avaloniaui - AvaloniaUI 按钮中按钮文本的水平居中

Question

我一直在尝试各种技术来尝试让按钮标签文本居中对齐。当我查看 Avalonia DevTools inpspector 中的按钮时，我可以看到 AccessText TextAlignment 始终设置为 Left。

这是应用样式的一种尝试，但不起作用:

<Style Selector="Button">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Foreground" Value="Gray"/>
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="TextBlock.TextAlignment" Value="Center"/>
</Style>

修改 TextBlock TextAlignment 的正确方法是什么？

Answer 1

有两种不同类型的对齐方式:

• 如何将一个元素与比该元素大的父元素对齐
• 如何对齐元素内的内容

要在父元素内水平对齐元素，您可以使用 Horizo​​ntalAlignment。但是，要对齐内容，必须使用 Horizo​​ntalContentAlignment。

Avalonia Dev Tools中右侧Layout Visualizer区域显示的是Horizo​​ntalAlignment。但是当按钮被选中时，您可以在属性区域的中心以文本形式看到 Horizo​​ntalContentAlignment。

这些不同的对齐方式可以通过一个简短的 XAML 示例得到最好的展示:

• 首先是一个与父面板中的元素对齐的堆栈面板
• 然后是应用内容对齐的堆栈面板
• 最后是内容对齐方式设置为居中的按钮

<Window.Styles>
    <Style Selector="Button#myBtn">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
    </Style>
</Window.Styles>

<StackPanel Background="#D9D0DE">
    <!-- different horizontal alignments of element in parent panel -->
    <StackPanel Background="#C46D5E">
        <Button HorizontalAlignment="Left" Content="Left" Width="200" />
        <Button HorizontalAlignment="Center" Content="Center" Width="200" />
        <Button HorizontalAlignment="Right" Content="Right" Width="200" />
    </StackPanel>

    <!-- different horizontal content alignments -->
    <StackPanel Background="#7A9E7E">
        <Button HorizontalContentAlignment="Left" Content="Content Left" Width="200" />
        <Button HorizontalContentAlignment="Center" Content="Content Center" Width="200" />
        <Button HorizontalContentAlignment="Right" Content="Content Right" Width="200" />
    </StackPanel>

    <!-- styled button -->
    <StackPanel>
        <Button x:Name="myBtn" Content="Styled Button" Width="200" />
    </StackPanel>
</StackPanel>

从视觉上看，它看起来像这样:

正如您在底部按钮上看到的那样，样式将按钮内容水平居中对齐。