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

Question

我一直在尝试各种技术来尝试使按钮标签文本居中对齐。当我查看 Avalonia DevTools 检查器中的按钮时，我可以看到 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

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

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

要在父元素内水平对齐元素，可以使用HorizontalAlignment. HorizontalContentAlignment然而，必须使用对齐内容。

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>

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

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