Sit UNLOCK's word in the middle of the button it is drawn on

A button's content alignment defaults to Stretch and the Fluent template binds
it straight through, so a text block filling a 48-pixel button draws its line
along the top edge of it rather than across the middle. That is why all seven
button classes in Phone.axaml set VerticalContentAlignment, and it is why this
one did not: the lock screen is the only place on the phone whose buttons carry
their own metrics rather than a class, and it was written with the horizontal
half of the pair and not the vertical.

Its two neighbours are unaffected and not for the same reason, which is worth
knowing before this is read as a pattern: RESET has no fixed height and a
symmetric vertical padding, and the fingerprint button's content is a panel
that stretches and centres its own children. Only the one with a bare string in
a fixed-height box shows it.

Left as its own set of metrics rather than folded into Button.primary, which it
otherwise duplicates down to the font weight. The two differ in corner radius —
6 here against the 9 the v2 ladder gives a button — and changing that is a
design decision rather than a fix to the thing that was reported.
This commit is contained in:
2026-08-03 14:04:58 +02:00
parent ce86a4ff72
commit 6fb82a111e
@@ -60,8 +60,16 @@
</TextBox.KeyBindings>
</TextBox>
<!--
VerticalContentAlignment is not decoration and not a duplicate of the line above it. A button's
content alignment defaults to Stretch and the Fluent template binds it straight through, so the
text block filling a 48-pixel button draws its line at the top of it. Every button class in
Phone.axaml sets this; the three on this screen are the only ones on the phone that carry their
own metrics instead, which is how this one came to sit high in its box.
-->
<Button Content="UNLOCK" Command="{Binding UnlockCommand}" IsEnabled="{Binding !IsBusy}"
Height="48" Margin="0,10,0,0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
Height="48" Margin="0,10,0,0" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Background="{StaticResource Accent}" Foreground="{StaticResource AccentInk}"
CornerRadius="6" FontFamily="{StaticResource MonoFont}" FontSize="12" FontWeight="SemiBold" />