Search code examples
wpfxamlbuttonalignmenttextblock

Adjust TextBlock on a Button within a Grid


I have two buttons on a grid. On the right button there should be some text shown left aligned and another text right aligned. In all my tries so far the two strings are positioned in the center of the button and not left and right.

Once this is solved I need some space between the text and the left/right borders of the button. Who can help?

My XAML-code so far to start:

<UserControl x:Class="MyNamespace.MyClass"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="900">
  <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Button>
        <TextBlock Text="left button"></TextBlock>
    </Button>
    <Button Grid.Column="1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="left"></TextBlock>
            <TextBlock Text="right" Grid.Column="1"></TextBlock>
        </Grid>
    </Button>
  </Grid>
</UserControl>

Don´t blame me for not putting this stuff in a ResourceDictionary. Just wanted to make the example simple.


Solution

  • You need to add HorizontalContentAlignment="Stretch" to Button in order for contents to take up full space. After that, to make space between text and button borders, just add two more grid columns at first and last position.

    XAML:

    <UserControl x:Class="MyNamespace.MyClass"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="900">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Button>
            <TextBlock Text="left button"></TextBlock>
        </Button>
        <Button Grid.Column="1" HorizontalContentAlignment="Stretch">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="10"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="left" Grid.Column="1"></TextBlock>
                <TextBlock Text="right" Grid.Column="3"></TextBlock>
            </Grid>
        </Button>
    </Grid>