CheckBox DelegateCommand not firing - winrt-xaml

I have seen many similar questions posted, but I think mine may be different enough to warrant posting it.
I am simply migrating the sample Azure Mobile Services application to Windows 10 UWP and trying to keep everything MVVM. I have a ListView that has a DataTemplate that looks like this:
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="CheckBoxComplete"
Command="{Binding ElementName=ViewModel, Path=UpdateCommand}"
CommandParameter="{Binding}"
Margin="10,5"
VerticalAlignment="Center"
Content="{Binding Text}"
IsChecked="{Binding Complete,
Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
Everything compiles fine, but the UpdateCommand is not firing. I have set a breakpoint to make sure that the correct value would be passed as the CommandParameter, but the Command is not firing. Is it possible to use a DelegateCommand on a CheckBox that is inside of a DataTemplate?
Or will I have to use attached behaviors to achieve something like this?
EDIT
The original CheckBox looked like this, with the click event handler in the code-behind:
<CheckBox Name="CheckBoxComplete"
IsChecked="{Binding Complete, Mode=TwoWay}"
Checked="CheckBoxComplete_Checked"
Content="{Binding Text}"
Margin="10,5" VerticalAlignment="Center" />
EDIT2
Posting entire XAML by request:
<Page x:Class="MyMoney10.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:Template10.Behaviors"
xmlns:common="using:MyMoney10.Common"
xmlns:controls="using:Template10.Controls"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:local="using:MyMoney10.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models="using:MyMoney10.Models"
xmlns:vm="using:MyMoney10.ViewModels"
mc:Ignorable="d">
<Page.DataContext>
<vm:MainPageViewModel x:Name="ViewModel" />
</Page.DataContext>
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RelativePanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</RelativePanel.ChildrenTransitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveVisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!-- TODO: change properties for narrow view -->
<!--<Setter Target="StateTextBox.Text" Value="Narrow Visual State" />-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateNormal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!-- TODO: change properties for normal view -->
<!--<Setter Target="StateTextBox.Text" Value="Normal Visual State" />-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!-- TODO: change properties for wide view -->
<!--<Setter Target="StateTextBox.Text" Value="Wide Visual State" />-->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<controls:PageHeader x:Name="PageHeader" Text="MyMoney">
<!-- place stretched, across top -->
<RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
<RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
<RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
<!-- secondary commands -->
<controls:PageHeader.SecondaryCommands>
<AppBarButton Click="{x:Bind ViewModel.GotoSettings}" Label="Settings" />
<AppBarButton Click="{x:Bind ViewModel.GotoPrivacy}" Label="Privacy" />
<AppBarButton Click="{x:Bind ViewModel.GotoAbout}" Label="About" />
</controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
<controls:Resizer x:Name="ParameterResizer" Margin="16,16,16,0">
<!-- place below page header -->
<RelativePanel.Below>PageHeader</RelativePanel.Below>
<RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
<TextBox MinWidth="250"
MinHeight="62"
Header="Parameter to pass"
Text="{Binding Value,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}">
<interactivity:Interaction.Behaviors>
<!-- enable submit on enter key -->
<behaviors:KeyBehavior Key="Enter">
<core:CallMethodAction MethodName="GotoDetailsPage" TargetObject="{Binding}" />
</behaviors:KeyBehavior>
<!-- focus on textbox when page loads -->
<core:EventTriggerBehavior>
<behaviors:FocusAction />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBox>
</controls:Resizer>
<Button x:Name="SubmitButton"
Click="{x:Bind ViewModel.GotoDetailsPage}"
Content="Submit">
<!-- place next to textbox -->
<RelativePanel.RightOf>ParameterResizer</RelativePanel.RightOf>
<RelativePanel.AlignBottomWith>ParameterResizer</RelativePanel.AlignBottomWith>
</Button>
<TextBlock x:Name="StateTextBox"
Margin="16,16,0,0"
Text="Current Visual State">
<!-- place under to textbox -->
<RelativePanel.Below>ParameterResizer</RelativePanel.Below>
<RelativePanel.AlignLeftWith>ParameterResizer</RelativePanel.AlignLeftWith>
</TextBlock>
<Grid>
<RelativePanel.Below>StateTextBox</RelativePanel.Below>
<RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
<RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
<RelativePanel.AlignBottomWithPanel>True</RelativePanel.AlignBottomWithPanel>
<Grid Margin="50,50,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Grid.ColumnSpan="2"
Margin="0,0,0,20">
<StackPanel>
<TextBlock Margin="0,0,0,6"
FontFamily="Segoe UI Light"
Foreground="#0094ff">
MICROSOFT AZURE MOBILE SERVICES
</TextBlock>
<TextBlock FontFamily="Segoe UI Light"
FontSize="45"
Foreground="Gray">
MyMoney10
</TextBlock>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel>
<common:QuickStartTask Title="Insert a TodoItem"
Description="Enter some text below and click Save to insert a new todo item into your database"
Number="1" />
<StackPanel Margin="72,0,0,0" Orientation="Horizontal">
<TextBox Name="TextInput"
MinWidth="300"
Margin="5" />
<Button Name="ButtonSave"
Command="{x:Bind ViewModel.SaveCommand}"
CommandParameter="{Binding ElementName=TextInput,
Path=Text}"
IsEnabled="{x:Bind ViewModel.SaveEnabled}">
Save
</Button>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel>
<common:QuickStartTask Title="Query and Update Data"
Description="Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems"
Number="2" />
<Button Name="ButtonRefresh"
Margin="72,0,0,0"
Click="{x:Bind ViewModel.RefreshCommand}"
IsEnabled="{x:Bind ViewModel.RefreshEnabled}">
Refresh
</Button>
</StackPanel>
<ListView Name="ListItems"
Grid.Row="1"
Margin="62,10,0,0"
ItemsSource="{Binding TodoItems}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="CheckBoxComplete"
Margin="10,5"
VerticalAlignment="Center"
Command="{Binding ElementName=ViewModel,
Path=UpdateCommand}"
CommandParameter="{Binding}"
Content="{Binding Text}"
IsChecked="{Binding Complete,
Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</Grid>
</RelativePanel>
</Page>

So the checkbox binding to elementname="viewmodel" is the issue. Because viewmodel is not a name of an element.
So give your page a name and put that name in the binding. With path=Datacontext.UpdateCommand

Related

UWP Accessing content in a data bound ListView

I have a ListView with a ListView.ItemTemplate if it is important: the ListView is part of a Grid). I will strip it down here for the minumum:
<ListView x:Name="lstFotos" Grid.Row="2" Grid.Column="1" Height="auto" Tapped="imageControl_Tapped" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid IsTapEnabled="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="imageControl" Width="200" Height="200" Source="{Binding DateiSoftwareBitmapSource}" IsTapEnabled="True" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
<TextBlock x:Name="txtImageDateDescription" Text="Aufnahmedatum: " Grid.Column="1" Grid.Row="0" />
<TextBlock x:Name="txtImageDescriptionDescription" Text="Beschreibung: " Grid.Column="1" Grid.Row="1" />
<TextBlock x:Name="txtImageDate" Text="{Binding Datum}" Grid.Column="2" Grid.Row="0" />
<TextBox x:Name="txtImageDescription" Text="{Binding Beschreibung}" Grid.Column="2" Grid.Row="1" />
<Button x:Name="btnSpeichern" Content="Speichern" Grid.Column="3" Grid.Row="1" Click="btnSpeichern_Click" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the code behing I do a
lstFotos.ItemsSource = AlleAnzeigeFotos
AlleAnzeigeFotos is a List(Of myClass), myClass contains the properties Datum, Beschreibung, DateiSoftwareBitmapSource.
What I want to do is that the user can edit the textfield, presses on the button and in the code behing I want to update the class and do some more stuff.
How can I get the appropriate instance of that class when I click the button?
UPDATE:
This is how it looks like:
"Beschreibung" (english: description) is empy after adding a foto and should be editable and stored by clicking "Speichern" (save).
(sender as Button).DataContext will give you the item which you clicked. Cast it to appropriate type of your class
update
Text="{Binding Beschreibung,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
var userenteredstring=((sender as Button).DataContext as your class).Beschreibung

Building Adaptative Layout with RelativePanel and VisualStateManager

I try to use VisualStateManager inside a user control embedded in a flipview. but with the code below does not work despite it really look like the one mentioned in Building adaptive layout with RelativePanel
<UserControl
x:Class="JintekiArchives.Views.CardDetailsControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:JintekiArchives"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveVisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateNormal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="521" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Margin="20">
<RelativePanel.Background>
<ImageBrush x:Name="backgroundGrid" ImageSource="{Binding FactionImage}" Opacity="0.1" />
</RelativePanel.Background>
<StackPanel x:Name="titlePanel" Orientation="Horizontal" Margin="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock FontSize="48" FontWeight="SemiBold" Text="{Binding Title}"></TextBlock>
</StackPanel>
<StackPanel Name="imageBorder" Width="300" Height="420" Margin="24, 24"
RelativePanel.Below="titlePanel"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="false">
<Image Source="{Binding ImageSrc}" Stretch="None"/>
</StackPanel>
<StackPanel Name="descriptionPanel" Orientation="Vertical" Margin="24, 24"
RelativePanel.AlignTopWith="imageBorder"
RelativePanel.RightOf="imageBorder">
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock>
<Run FontWeight="Bold" Text="Faction : "></Run>
<Run Text="{Binding Faction}"></Run>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock>
<Run FontWeight="Bold" Text="Set : "></Run>
<Run Text="{Binding Set}"></Run>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock>
<Run FontWeight="Bold" Text="Type : "></Run>
<Run Text="{Binding Type}"></Run>
</TextBlock>
</StackPanel>
</StackPanel>
<StackPanel Name="textPanel" Orientation="Vertical" Margin="24,24"
RelativePanel.AlignTopWith="imageBorder"
RelativePanel.RightOf="descriptionPanel">
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" Text="{Binding Text}"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontStyle="Italic" Text="{Binding Flavor}">
</TextBlock>
</StackPanel>
<StackPanel Padding="5" Orientation="Horizontal" Margin="5">
<TextBlock>
<Run Text="Illustrated by "></Run>
<Run Text="{Binding Illustrator}"></Run>
</TextBlock>
</StackPanel>
</StackPanel>
</RelativePanel>
</Grid>
</UserControl>
The problem here is related to the Conflicting relationships with RelativePanel in your layout.
If you set multiple relationships that target the same edge of an element, you might have conflicting relationships in your layout as a result. When this happens, the relationships are applied in the following order of priority:
Panel alignment relationships (AlignTopWithPanel, AlignLeftWithPanel, …) are applied first.
Sibling alignment relationships (AlignTopWith, AlignLeftWith, …) are applied second.
Sibling positional relationships (Above, Below, RightOf, LeftOf) are applied last.
The panel-center alignment properties (AlignVerticalCenterWith, AlignHorizontalCenterWithPanel, ...) are typically used independently of other constraints and are applied if there is no conflict.
The HorizontalAlignment and VerticalAlignment properties on UI elements are applied after relationship properties are evaluated and applied. These properties control the placement of the element within the available size for the element, if the desired size is smaller than the available size.
So the priority of AlignTopWith is higher than Below. And in your code, you've set RelativePanel.AlignTopWith to imageBorder in descriptionPanel and textPanel. Therefore the settings like descriptionPanel.(RelativePanel.Below) in VisualState won't work.
To fix this issue, I'd suggest you delete the attached properties of RelativePanel in your descriptionPanel and textPanel and just set these attached properties in VisualState without using AlignTopWith.
As I'm not sure what your desired layout is, here I just use two visual states for example:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveVisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="descriptionPanel.(RelativePanel.Below)" Value="titlePanel" />
<Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" />
<Setter Target="textPanel.(RelativePanel.Below)" Value="titlePanel" />
<Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

how to set multiple Grids vertically like Bootsrap in a universal app

I have this architecture in my project and I try to make it responsive,
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="49" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2">
</Grid>
<Grid Grid.Row="1" Grid.Column="0">
</Grid>
<Grid Grid.Row="2" Grid.Column="0">
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
</Grid>
<Grid Grid.Column="1" Grid.Row="2">
</Grid>
</Grid>
I have used a trigger and a StackPanel to change the orientation from horizontal to vertical when I resize the Screen but it doesn't work :(
any good solution please to do somthing like we do it bootsrap :)
thanks for help
Since OP doesnt have code for triggers. Have a look at Channel 9 video of Hero Explorer by Bob Tabor. Here he handles a similar scenario of cahnging layout from vertical to horizontal with video and code you will get the basic idea on how to handle trigger.
Following is the code from HeroExplorer to handle resizing, similary you can do that in your code also
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DetailGrid.(Grid.Row)" Value="0" />
<Setter Target="DetailGrid.(Grid.Column)" Value="1" />
<Setter Target="ColumnOne.Width" Value="Auto" />
<Setter Target="ColumnTwo.Width" Value="*" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DetailGrid.(Grid.Row)" Value="1" />
<Setter Target="DetailGrid.(Grid.Column)" Value="0" />
<Setter Target="ColumnOne.Width" Value="*" />
<Setter Target="ColumnTwo.Width" Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnOne" Width="Auto" />
<ColumnDefinition x:Name="ColumnTwo" Width="*" />
</Grid.ColumnDefinitions>
<!-- Detail Grid -->
<Grid Name="DetailGrid" Grid.Column="1" Grid.Row="0" Margin="10,0,10,0">

stretch TextBlocks inside a Grid in a universal App

I am having a problem in fixing 3 TextBlocks inside a Grid,in a metro App,I used this link enter link description here
but I get always a problem in stretching my TextBlocks inside the Grid
this is my code:
<ListView Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
<ListView.ItemTemplate >
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="0">
<Image Grid.Column="0" Source="images/img1.png" Margin="0,5" Stretch="Fill" Width="80"/>
</Border>
<Grid Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="test1" Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text2" Text="test2" Grid.Row="1" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text3" Text="test3" Grid.Row="2" HorizontalAlignment="Stretch" ></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so please I need your help,to fix that
thanks for help
You have to edit style of ListViewItem and set HorizontalAlignment to Stretch
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

Setting column width to 50% of available width in windows phone 8.1

Developing/learning about WP8.1 for the 1st time.
This question is about layout.
I have 2 buttons.
I want them at the bottom of my screen.
I want each button to take 50% of the available width of the screen.
Similar to this:
So far I have this:
And this is my markup:
<Page
x:Class="Informed.BasicPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Informed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
>
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0" Grid.ColumnSpan="2">
<Image Name="imgHeader" Grid.Row="0" Source="Images/bannershort.jpg" Stretch="UniformToFill"/>
<TextBlock Text="Log In" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<TextBox Name="email" Header="Email address"/>
<PasswordBox Name="password" Header="Password"/>
<CheckBox Name="showPassword" Content="Show password"/>
<!-- Content body -->
<TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
<TextBlock.Text>
Enter Email Address and Password created.
</TextBlock.Text>
</TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" Grid.ColumnSpan="1">
<Button Content="hello" Grid.Column="0" FontFamily="Global User Interface" />
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1">
<Button Content="hello2" Grid.Column="1" FontFamily="Global User Interface" />
</StackPanel>
</Grid>
</Page>
Remove those StackPanels they are not needed. When you want something to take available space use HorizontalAlignment = Stretch:
<Button Content="hello" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
You will also need to make your columns equal width:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
You may also think of adding Margin="20,0,10,0" (first) and Margin="10,0,20,0" (second).
There is no point in putting one control inside panel (except some rare cases). You may also modify your code and put those Buttons inside a Grid then there is no need to make the whole main Grid with two columns:
<Grid Grid.Row="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="hello" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
</Grid>

Resources