Windows Phone XAML CheckBox Alignment - xaml

Question

I have a problem with my XAML layout, this works perfectly on my Silverlight app, but when using Windows Runtime, all the checkboxes disappear from the grids entirely, yet the textblocks are aligned perfectly. I don't know what to change in my XAML to make it work correctly.
I figured out that the culprit is the HorizontalAlignment property, without it, the checkBoxes appear in the grids (though all snapped to the left side of the columns). The Textblocks use the same property, yet they appear completely fine.
This is what it looks like when using Silverlight:
<Grid Height="Auto" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CheckBox Name="ARStory" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
<CheckBox Name="ARPath1" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1"/>
<CheckBox Name="ARPath2" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2"/>
<CheckBox Name="ARPath3" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="3"/>
<CheckBox Name="ARPath4" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="4"/>
<TextBlock Text="Story" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock Text="Path 1" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"/>
<TextBlock Text="Path 2" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center"/>
<TextBlock Text="Path 3" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Center"/>
<TextBlock Text="Path 4" Grid.Row="1" Grid.Column="4" HorizontalAlignment="Center"/>
</Grid>

Answer 1

I would much rather edit the checkbox template instead of separating the box and the label because:
Users expect that the content/label of a checkbox control can be tapped to check/uncheck the box.
If the label is tapped, the whole checkbox control will tilt as part of the normal pointer down theme animation.
I'm sure there's also some accessibility reason too (like e.g. screen readers will be able to interpret the control correctly).
You can easily reuse the style anywhere you want.
<Page.Resources>
<Style x:Key="CheckBoxStyleCentered" TargetType="CheckBox">
<Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Padding" Value="0,10,0,0"/>
<Setter Property="MinWidth" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Grid" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Center">
<Border x:Name="CheckBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="25.5" IsHitTestVisible="False" VerticalAlignment="Center" Width="25.5"/>
<Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" HorizontalAlignment="Center" Height="13" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="13"/>
<Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="18.5"/>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Row="1" Foreground="{TemplateBinding Foreground}" FontWeight="Normal" FontSize="{ThemeResource TextStyleLargeFontSize}" FontFamily="{ThemeResource PhoneFontFamilyNormal}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Height="Auto" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Name="ARStory" HorizontalAlignment="Center" Grid.Column="0" Content="Story" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath1" HorizontalAlignment="Center" Grid.Column="1" Content="Path 1" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath2" HorizontalAlignment="Center" Grid.Column="2" Content="Path 2" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath3" HorizontalAlignment="Center" Grid.Column="3" Content="Path 3" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath4" HorizontalAlignment="Center" Grid.Column="4" Content="Path 4" Style="{StaticResource CheckBoxStyleCentered}" />
</Grid>
Why your XAML doesn't work as expected
If you inspect the original checkbox style (right click an unstyled checkbox in the designer > Edit Template > Edit a Copy), you'll see that the default style sets the MinWidth of the checkbox control:
<Setter Property="MinWidth" Value="{ThemeResource CheckBoxAndRadioButtonMinWidthSize}"/>
with
<x:Double x:Key="CheckBoxAndRadioButtonMinWidthSize">168</x:Double>
This is too large and causes the checkbox glyph to be pushed outside the bounds of the grid cell, which is why it isn't visible. Set MinWidth="0" to each of your checkboxes and you'll restore the original layout you expected.