How to vertically align XAML UWP checkbox - xaml

Question

I am trying to vertically align a checkbox. The actual box appears at the top. I want it to appear in the middle.
This is the XAML:
<CheckBox FontSize="100" Content="Test" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
This is what it looks like:
I have seen similar questions on SO, but the answer was to use VerticalContentAlignment. This does not work. Some answers have suggested using negative padding or margins, which does not scale. So please don't mark as duplicate, this has not really been answered. Or perhaps it was answered for WPF but not for UWP.
I am aware that you can change the style of the control, but that is a lot of work for something that should just work out of the box.
I am using VS 2019 16.6.2 with UWP v6.2.10
Update
This is what I would like my CheckBox to look.

Answer 1

How to vertically align XAML UWP checkbox
For the requirement, the better way is modify the checkbox's default layout. The default layout is Column, we need to change it to Row. And I will share the a part of style and you could use it directly.
<Grid
x:Name="RootGrid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid
Height="32"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Rectangle
x:Name="NormalRectangle"
Width="20"
Height="20"
Fill="{ThemeResource CheckBoxCheckBackgroundFillUnchecked}"
Stroke="{ThemeResource CheckBoxCheckBackgroundStrokeUnchecked}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
UseLayoutRounding="False"
/>
<FontIcon
x:Name="CheckGlyph"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Foreground="{ThemeResource CheckBoxCheckGlyphForegroundUnchecked}"
Glyph=""
Opacity="0"
/>
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Row="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
TextWrapping="Wrap"
/>
For the complete style please refer this link.
Update
If do not want to edit the default style, we could make custom checkbox, and edit the layout in OnApplyTemplate method.
public class CustomCheckBox : CheckBox
{
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
var normalRectangle = GetTemplateChild("NormalRectangle") as Rectangle;
var rootGrid = normalRectangle.Parent as Grid;
Grid.SetColumnSpan(rootGrid, 2);
rootGrid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
var contentPresenter = GetTemplateChild("ContentPresenter") as ContentPresenter;
Grid.SetColumn(contentPresenter, 0);
Grid.SetColumnSpan(contentPresenter, 2);
contentPresenter.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
}
}
Usage
<local:CustomCheckBox FontSize="100" Content="Test" VerticalAlignment="Center" HorizontalAlignment="Center" />
Update 1
use the following to replace OnApplyTemplate content.
var normalRectangle = GetTemplateChild("NormalRectangle") as Rectangle;
var rootGrid = normalRectangle.Parent as Grid;
Grid.SetColumnSpan(rootGrid, 2);
rootGrid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left
rootGrid.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;