How to stretch button all over the grid, xaml

Question

I have a problem with stretching the button all over the grid.

My code look like this:

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="8*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="5" Grid.Row="1" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button Content="Search" Background="#FF13D38D" Click="searchButton_Click" FontSize="48"/>
    </StackPanel>
</Grid>

But it didn't work for me, and stretch the button all over the grid, I tried maxwidth/maxheight but it also didn't work correctly anyone has an idea?

Remove the stackpanel and your problem is solved - stackpanels only take up the minimum amount of room to contain the child controls (no matter what you set their alignment to). Controls in a stackpanel will not stretch to fill the parent container. Grid cells, however, will stretch. — Charleh, Nov 17 '13 at 14:16
also remove Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" the Width and Height set to Auto won't matter because they would be re set from the Grid elements and the H/V Alignment = "Stretch" are the default value. — eran otzap, Nov 17 '13 at 14:29
If the problem got solved , please add it as an answer yourself and accept it, rather than adding it to the question. — Rndm, Nov 17 '13 at 14:50

score 11 · Accepted Answer · edited Nov 20 '18 at 19:33

TL;DR:
Remove the StackPanel (see Charleh's comment below question).

PROBLEM SOLVED

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="8*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Content="Search" Background="#FF13D38D" Click="searchButton_Click" FontSize="48" Grid.Column="5" Grid.Row="1"/>
</Grid>

How to stretch button all over the grid, xaml

1 Answers1