How to make a WPF Window responsive

Question

I\'m using Blend Expression and just started with WPF.

I\'m trying to make a window responsive window which can accommodate multiple Grids and will be re sized as pe

Answer 1

you can use multi column and multi row that usage example as bootstrap you can define new control with attribute grid.row or gird.column.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
    <Button Content="Button" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
</Grid>

Answer 2

You're not using the grid in the correct way.

WPF Grids have a property that allows to set columns and rows. Then, you would put elements inside the grid and set in which row/column they should go.

Of course you can have grids inside grid and so on.

You can then play with the Width="2*" and things like that to make columns larger or smaller than other, "responsively".

The code below should give you something "similar" to what you try to achieve.

<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"
          Grid.Column="0"
          Background="Red" />

    <Grid Grid.Row="0"
          Grid.Column="1"
          Background="Blue" />

    <Grid Grid.Row="1"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          Background="Violet" />

    <Grid Grid.Row="2"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          Background="Green" />

    <StackPanel Grid.Row="3"
                Grid.ColumnSpan="2"
                Orientation="Horizontal">
         <Button>OK</Button>
         <Button>Cancel</Button>
    </StackPanel>
</Grid>

You can play with "*" and "Auto" for width and height of the column and rows, "*" is always defined as a "percent" of the current windows' width or height. If you have one column with "*" and another with "2*", the one with "2*" will be twice as big as the one with only "*", which will make a 2/3 1/3 separation.

The "Auto" means that it will take "the smaller width or height that allows to show the inside of the column".