Public Access
Centre a button caption in the button, not just the button in its parent
App.axaml's Button.ghost, Button.accent, Button.danger rule set VerticalAlignment and never VerticalContentAlignment. The first places the button in its parent; the second places the caption in the button, and its default is Stretch — so on any of these given a fixed Height the content presenter stretched the caption TextBlock to the whole content box, and a TextBlock draws its line at the top of whatever it is given. Measured on the hosts toolbar, whose three buttons are 40 pixels: nine above the ink and twenty below it. Every box was the height it declared, which is why this read as one of them being the wrong height — nothing was mis-sized, the labels sat in the top third. Center rather than a hand-tuned Padding, because the gap is the difference between the line box and the content box and moves with the font size: these carry 11.5 by default and the primary action overrides it to 13.5. It is the three shapes that were missed rather than a new idiom — navseg, sesstab, headerghost, sidebarrow, fieldrow and paneicon all state it already, as does every one of the phone head's own button classes. 134 buttons carry these three classes; the ones that show it are those with an explicit Height, which is both toolbars, the drawer's Save/Cancel pair, and the import screen. A button sized to its own caption was already right and is untouched. HorizontalContentAlignment is deliberately left alone: it is Stretch too and invisible on a self-sized button, and the flyout rows that are stretched wide ask for Left themselves. ButtonCaptionTests measures a bare Button, since Application.Styles is global and a screen-level test would pin one toolbar and leave the rest to the same defect. It measures the laid-out line rather than the TextBlock's arranged bounds, and that distinction is the test: under Stretch those bounds fill the content box and so are symmetrical whether or not the ink in them is. The first draft asserted on them and passed against the defect; the calibration test caught it, and against the old markup all three shapes now fail naming their own gap.
This commit is contained in:
@@ -268,7 +268,26 @@
|
||||
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
|
||||
</Style>
|
||||
|
||||
<!-- Every button in this window is small, mono and tracked out; only the colours differ. -->
|
||||
<!--
|
||||
Every button in this window is small, mono and tracked out; only the colours differ.
|
||||
|
||||
◆ VerticalContentAlignment IS NOT VerticalAlignment, and this style used to set only the second. The
|
||||
first places the caption inside the button; the second places the button inside its parent. Avalonia's
|
||||
default for content alignment is Stretch, so on any of these given a fixed Height — the hosts toolbar's
|
||||
three at 40, and every dialog's row of them — the ContentPresenter stretched the caption's TextBlock to
|
||||
the full content box and a TextBlock draws its line at the TOP of its bounds. Measured on the hosts
|
||||
toolbar: a 40-pixel button with 9 pixels above the ink and 20 below it. Nothing was the wrong height,
|
||||
which is why this read as one — the box was right and the label sat in the top third of it.
|
||||
|
||||
Center rather than a hand-tuned Padding, because the gap is the difference between the line box and the
|
||||
content box and so moves with the font size: these carry 11.5 by default and the primary action
|
||||
overrides it to 13.5. Every other button class here already sets it — navseg, sesstab, headerghost,
|
||||
sidebarrow, fieldrow, paneicon — so this is the three shapes that were missed rather than a new idiom.
|
||||
|
||||
HorizontalContentAlignment is deliberately left alone. It is Stretch too, and it is invisible on a
|
||||
button sized to its own caption; the ones that are stretched wide state their own (the flyouts' rows
|
||||
ask for Left), and centring those from here would move text nobody complained about.
|
||||
-->
|
||||
<Style Selector="Button.ghost, Button.accent, Button.danger">
|
||||
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
|
||||
<Setter Property="FontSize" Value="11.5" />
|
||||
@@ -277,6 +296,7 @@
|
||||
<Setter Property="Padding" Value="10,5" />
|
||||
<Setter Property="MinHeight" Value="0" />
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Center" />
|
||||
</Style>
|
||||
|
||||
<!--
|
||||
|
||||
Reference in New Issue
Block a user