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 per the window size to a minimum width.

It will be like:

My Code So Far:

<Window x:Class="Blend.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" WindowState="Maximized">
    <Grid>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
                    Padding="5" HorizontalAlignment="Left" Margin="20,10,0,0" 
                    VerticalAlignment="Top" Height="211.5" Width="484.5">
    <Grid Background="#FFEDF3F8">

    </Grid>
    </Border>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
        Padding="5" Margin="523.333,10,16.334,283.5">
        <Grid Background="#FFEDF3F8"/>
    </Border>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
        Padding="5" Margin="21.333,234,16.334,144">
        <Grid Background="#FFEDF3F8"/>
    </Border>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
        Padding="5" Margin="21.333,372,16.334,31.5">
        <Grid Background="#FFEDF3F8"/>
    </Border>
    <Button Content="Button" HorizontalAlignment="Left" Margin="626.833,478.5,0,0"
     VerticalAlignment="Top" Width="49" Background="#FF00458C"/>
    <Button Content="Button" HorizontalAlignment="Left" Margin="693.166,478.5,0,0" 
    VerticalAlignment="Top" Width="49" Background="#FF00458C"/>
    </Grid>
</Window>

I have tried two things here: one is Margin and other is using 'Alignments' with Width and Height.

Not sure which will solve my purpose and secondly will it respond to the screen size or not.

I read about dynamic Grid using * but that does not seems to work here.

Answer 1

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