Horizontal centering of button text in AvaloniaUI Button

Question

I have been trying various techniques to try and get the button label text center aligned. When I look at the button in the Avalonia DevTools inpspector, I can see the the AccessText TextAlignment is always set to Left.

Here is one attempt at applying a style, but is doesn't work:

<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>

What is the proper way to modify the TextBlock TextAlignment?

Antefix

You could explicitly add the TextBlock to the Button and set the property directly or via the style with selector <Style Selector="Button TextBlock">. More generic approach would be to just set HorizontalContentAlignment, so everything you insert as a Content property will be aligned. – Vaginal

Answer 1

There are two different types of alignments:

• how to align an element with a parent element that is larger than the element
• how to align the content inside an element

To align an element horizontally within a parent element, you can use HorizontalAlignment. To align the content, however, HorizontalContentAlignment must be used.

What is displayed in the Avalonia Dev Tools on the right side in the Layout Visualizer area is the HorizontalAlignment. But when the button is selected, you can see the HorizontalContentAlignment in the center in the Properties area in text form.

These different alignments are best demonstrated with a short XAML example:

• first a stackpanel with alignment of the element in the parent panel
• then a stack panel with applied content alignment
• finally the button with a style where the content alignment is set to centered

<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>

Visually, it looks something like this:

As you can see on the bottom button, the style aligns the button content horizontally centered.

Financier

Answer 2

As an addition:

I needed an automatic multi-line text in the button. Instead of setting the Button Content, put a TextBlock into the Button.

Example:

<Button>
    <TextBlock TextWrapping="Wrap">My multi-line text is very long and will be multi-line if the button is shorter as the text.</TextBlock>
</Button>

Concepcion