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.

Solution 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.

Solution 2

You can use a grid as @De-ruige mentioned.

In addition to help you understand the meaning of a grid, use the property "ShowGridLines" in your grid definition, like that:

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">

Also, if you want to add a control like a button to few cells in your grid, you can use these: Grid.RowSpan / Grid.ColumnSpan.

Grid.RowSpan - MSDN

Solution 3

I would use a DockPanel with a Panel docked to the top for your purpose. Alternatively, you could use UniformGrid if you'd want the buttons to stretch.

<DockPanel>
  <StackPanel DockPanel.Dock="Top">
    <Button Content="Button1"/>
    <Button Content="Button2"/>
    <Button Content="Button3"/>
  </StackPanel
  <Grid>
    <!-- Stuff in the main part of the window here -->
  </Grid>
</DockPanel>

Comments

[Shai]

Try removing the Anchors on your controls; set Anchor to None

[Darren Young]

There is no anchor property in WPF.

[DRapp]

@DarrenYoung, in addition to what De Ruige describes here (each "button" in its own grid row/col cell), you can also set the properties of your button for HorizontalAlignment and VerticalAlignment to "Stretch", so as the cells stretch out, so too will the buttons within them.

[De ruige]

@DRapp: Thank you for pointing that out. Forgotten to add some button properties as well, made an edit!

[inspiration]

@NickProzee can you explain how this is bad practice? Just wondering.