WPF Resizing/Aligning Buttons when parent window resized

Question

I'm writing my first WPF app, and i'm having a few problems with resizing/aligning buttons when the window is maximised.

Essentially I have a single row of large buttons at the top of my application. Currently they are in a Canvas, but I have also tried Grid and Stackpanel. Whenever I maximise (or indeed just expand my window), the buttons essentially stay in the same place. What I want is to either reposition the buttons relative to its parent container, or stretch the button width to accommodate the change.

Can anybody offer advice on what is the best container and method to achieve this? I've looked at Canvas.Top/Left, HorzontalAlignment, Margin etc, but I can't seem to find the correct combination.

Thanks.

Answer 1

The way to go in WPF is all content should be aligned in your MainGrid. If you put Button 1 in for example Grid.Row 3 and Grid.Column 2, it will remain there.

If you change your window size, the grid gets resized, but the controls remain in their place. You can also make your grid rows/columns fixed width, autosize, or percentage.

Same with your controls. So knowing this, it's just a matter of playing around with it.

Here is an example. Just play around with the Widths:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="43*" />
        <RowDefinition Height="222*" />
        <RowDefinition Height="35*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="113*" />
        <ColumnDefinition Width="168*" />
        <ColumnDefinition Width="119*" />
    </Grid.ColumnDefinitions>
    <Button Content="TEST" Grid.Column="2" Grid.Row="1" 
     HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" />
</Grid>

Make some Auto, make some fixed and at the end you'll understand the goal.