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?

You could explicitly add the `TextBlock` to the `Button` and set the property directly or via the style with selector ` — radoslawik, Feb 17 '22 at 08:34

score 5 · Answer 1 · answered Feb 24 '22 at 21:00

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.

score 0 · Answer 2 · answered Aug 09 '23 at 15:25

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>

Horizontal centering of button text in AvaloniaUI Button

2 Answers2