Vertically align the square/tick box of a CheckBox

[YvesHenri]

I'm trying to vertically align the square/tick box of a CheckBox whose heights exceed 60+ px (big sizes), however it doesnt seem to be that trivial for some reason. The Context is automatically aligned, but the quare box fails. Here's the code:

<Window....>
   <CheckBox Background="Blue" Content="Foobar" Height="60" />
</Window>

Here's the result:

I'm using Avalonia 11.2.8 and FluentTheme. There arent any Styles or whatsoever, just a plain Avalonia application with the CheckBox above.

[stevemonaco]

The FluentTheme CheckBox isn't friendly for resizing. Read the original ControlTemplate:

Avalonia/src/Avalonia.Themes.Fluent/Controls/CheckBox.xaml

Lines 28 to 69 in 808c86f

	<Setter Property="Template">
	<ControlTemplate>
	<Grid x:Name="RootGrid" ColumnDefinitions="20,*">
	<Border x:Name="PART_Border"
	Grid.ColumnSpan="2"
	Background="{TemplateBinding Background}"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	CornerRadius="{TemplateBinding CornerRadius}" />
	<Grid VerticalAlignment="Top" Height="32">
	<Border x:Name="NormalRectangle"
	BorderBrush="{DynamicResource CheckBoxCheckBackgroundStrokeUnchecked}"
	Background="{DynamicResource CheckBoxCheckBackgroundFillUnchecked}"
	BorderThickness="{DynamicResource CheckBoxBorderThemeThickness}"
	CornerRadius="{TemplateBinding CornerRadius}"
	UseLayoutRounding="False"
	Height="20"
	Width="20" />
	<Viewbox UseLayoutRounding="False">
	<Panel>
	<Panel Height="16" Width="16" />
	<Path x:Name="CheckGlyph"
	Opacity="0"
	Fill="{DynamicResource CheckBoxCheckGlyphForegroundUnchecked}"
	Stretch="Uniform"
	VerticalAlignment="Center"
	FlowDirection="LeftToRight" />
	</Panel>
	</Viewbox>
	</Grid>
	<ContentPresenter x:Name="PART_ContentPresenter"
	ContentTemplate="{TemplateBinding ContentTemplate}"
	Content="{TemplateBinding Content}"
	Margin="{TemplateBinding Padding}"
	RecognizesAccessKey="True"
	HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
	VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
	TextWrapping="Wrap"
	Grid.Column="1" />
	</Grid>

There are a fair number of fixed sizes which aren't easy to work around. It's easier to either: 1. re-template or 2. put it in a Viewbox or 3. apply a ScaleTransform.

[stevemonaco]

That said, the major issue is: <Grid VerticalAlignment="Top" Height="32">. If it were centered, then it might be fine. You can do stuff like the following to beat the local ControlTemplate setter priority, but really shouldn't:

<Window.Styles>
    <Style Selector="CheckBox /template/ Grid#RootGrid > Grid:not(.priorityhack)">
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
</Window.Styles>

[YvesHenri]

Why shouldn't I? What are the implications?

[YvesHenri]

Also, re-templating isn't currently a choice, neither I got the ScaleTransform to work. The Viewbox did not work either. Here's the expected result:

[stevemonaco]

Why shouldn't I? What are the implications?

Because it's a hack. The priority system wasn't really designed to let you use clever means to specify a higher priority than normal. So at some point, it may break.

I still think we be allowed to specify the priority on setters or at least have some more setter priority levels to combat this, but that's not a thing today.

Re-templating should always be a choice.

[robloo]

Note that this behavior is intentional with the Fluent theme and matches upstream WinUI. You can still see the discussions for it some place.

The CheckBox is top aligned with a margin for multi-line text. When you have a whole sentence that spans multiple lines you want the CheckBox to ONLY appear at the first line. This is why it has hard-coded margins too (it assumes a certain font/size of text).

All of this said, WinUI may not have made the most general-purpose decision here. It certainly causes issues on different platforms as well (FluentAvalonia has special settings for this case).

So we can:

1. Pull out the VerticalAlignment and margins as lightweight styling resources so they can be overridden without retemplating.
2. Just vertically center everything by default. We should see if this is what WPF did.

[YvesHenri]

Shouldn't there be an option whether we want it to top or center align while defaulting it to center? I dont really understand this choice.

[stevemonaco]

There are already over 2000 keyed resources in FluentTheme. It's impossible to encode literally every decision to fit every dev's preferences. Themes are necessarily opinionated at some level. If you don't like the particulars, then you should re-template or find a different theme. Making a PR to extract the setting as a resource is another option, but could take awhile to make it into a release. Especially now that master is on v12. Not sure if the team will release an 11.4.0.