19

In the following XAML the button will stretch to fit the width of the window, including as you resize the window. However, the TextBlock and blue box are centered. How would you change it so that: 1) the TextBlock is inside the Button, but left justified with the actual Button width (i.e. on the left side of the Window) 2) the Canvas is inside the Button, but right-justified with the actual Button width (i.e. on the right side of the Window)

It seems "HorizontalAlignment=Stretch" doesn't work in this case, and, when using Auto sizing, the Grid inside the Button only ever grows to the minimum width needed for its contents. 

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Window"
    Title="test"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Button Height="30">
            <Grid HorizontalAlignment="Stretch">
                <TextBlock Text="Sample Text" HorizontalAlignment="Stretch" TextAlignment="Left"></TextBlock>
                <Canvas Width="40" Background="AliceBlue" HorizontalAlignment="Right"></Canvas>
            </Grid>
        </Button>
    </Grid>
</Window>
Denis P
  • 585
  • 2
  • 6
  • 17

2 Answers2

20

You should set Button.Template. Also Grid.ColumnDefinitions can be used to set the position and width of elements inside properly.

        <Button Height="30" Content="Smaple text">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter HorizontalAlignment="Left"  Grid.Column="0"
                                          VerticalAlignment="Center"/>
                                <Canvas Background="AliceBlue" Grid.Column="1" />
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
Bahman_Aries
  • 4,658
  • 6
  • 36
  • 60
  • 1
    This works - thanks! Could you explain why it works? – Denis P Jul 27 '15 at 15:42
  • Because when you put elements inside your button (like what you did in your question) you're actually setting 'Button.Content' but what you intended to do was to change button's layout and that can be achived by setting 'Button.Template'. – Bahman_Aries Jul 27 '15 at 16:46
18

You could also set the HorizontalContentAlignment to Stretch on the Button itself.

This will tell the content to fill the horizontal space available on the button.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Window"
    Title="test"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Button Height="30" HorizontalContentAlignment="Stretch">
            <Grid HorizontalAlignment="Stretch">
                <TextBlock Text="Sample Text" HorizontalAlignment="Stretch" TextAlignment="Left"></TextBlock>
                <Canvas Width="40" Background="AliceBlue" HorizontalAlignment="Right"></Canvas>
            </Grid>
        </Button>
    </Grid>
</Window>
Hamish
  • 579
  • 5
  • 20