XAML C# Dynamic position of elements in window by grid

Question

I'm new to C# and XAML and I am having difficulty with the dynamic resizing/position of elements. I want create 3x3 grid with this schema:

text  |  text  |  grid
image |  image |  same grid of above
text  |  text  |  same grid of above

I have written the following code:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Microsoft.Samples.Kinect.BodyBasics.MainWindow"
        Title="Body tracking" 
        Height="Auto" Width="Auto" 
        Loaded="MainWindow_Loaded"
        Closing="MainWindow_Closing">
    <Window.Resources>
        <SolidColorBrush x:Key="MediumGreyBrush" Color="#ff6e6e6e" />
        <SolidColorBrush x:Key="KinectPurpleBrush" Color="#ff52318f" />
        <SolidColorBrush x:Key="KinectBlueBrush" Color="#ff00BCF2" />
    </Window.Resources>
    <Grid Margin="10,1,10,1" ShowGridLines="True" Height="Auto" Width="Auto" VerticalAlignment="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition  Width="Auto"/>
            <ColumnDefinition  Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock  MinHeight="25" MinWidth="25" Grid.Row="0" Grid.Column="0" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18"><Run Text="Body Tracking"/>
        </TextBlock>

        <Viewbox Grid.Row="1" Grid.Column="0">
            <Border x:Name="borderSkeleton" BorderThickness="7" Height="Auto" Width="Auto">
                <Image Source="{Binding ImageSource}" Stretch="UniformToFill" />
            </Border>
        </Viewbox>

        <Image Grid.Column="1" Grid.Row="1" x:Name="imageReference" Height="Auto" Width="Auto" Stretch="UniformToFill"/>

        <StatusBar MinHeight="25" MaxHeight="25" x:Name="statusBar" Grid.Row="2" Grid.Column="0" Background="White" Foreground="{StaticResource MediumGreyBrush}">
            <StatusBarItem Content="{Binding StatusText}" />
        </StatusBar>
        <Label x:Name="lblIstruction" Grid.Row="0" Grid.Column="1"  Content="Reference Pose: please,  position yourself as picture" Width="Auto" Height="Auto" FontSize="16"/>
        <Grid Grid.Row="1" Grid.Column="2" Grid.RowSpan="3" Width="Auto" Height="Auto">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Label Grid.Row="0" x:Name="lblFeedback1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="1" x:Name="lblFeedback2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="2" x:Name="lblFeedback3" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="3" x:Name="lblFeedback4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="4" x:Name="lblFeedback5" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="5" x:Name="lblFeedback6" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="6" x:Name="lblFeedback7" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="7" x:Name="lblFeedback8" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="8" x:Name="lblFeedback9" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="9" x:Name="lblFeedback10" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="10" x:Name="lblFeedback11" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="11" x:Name="lblFeedback12" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="12" x:Name="lblFeedback13" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="13" x:Name="lblFeedback14" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <Label Grid.Row="14" x:Name="lblFeedback15" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
        <Label Grid.Row="2" Grid.Column="1" x:Name="lblSummaryFeedback"  FontSize="18" FontWeight="Bold"  Width="Auto" Height="Auto" />
    </Grid>
</Window>

But I cannot see all of the elements. Also, when I resize the window, the grid is cut or resized.

Answer 1

I solved this issue by setting the rows and the columns with an image to * and not Auto. I also added viewBox for all images so the image ratio is kept and the image is not cut down.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Microsoft.Samples.Kinect.BodyBasics.MainWindow"
    Title="Body tracking" 
    Height="Auto" Width="Auto" 
    Loaded="MainWindow_Loaded"
    Closing="MainWindow_Closing">
<Window.Resources>
    <SolidColorBrush x:Key="MediumGreyBrush" Color="#ff6e6e6e" />
    <SolidColorBrush x:Key="KinectPurpleBrush" Color="#ff52318f" />
    <SolidColorBrush x:Key="KinectBlueBrush" Color="#ff00BCF2" />
</Window.Resources>
<Grid Margin="10,1,10,1" ShowGridLines="True" VerticalAlignment="Bottom">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition  Width="*"/>
        <ColumnDefinition  Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock  MinHeight="25" MinWidth="25" Grid.Row="0" Grid.Column="0" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18"><Run Text="Body Tracking"/></TextBlock>

    <Viewbox Grid.Row="1" Grid.Column="0">
        <Border x:Name="borderSkeleton" BorderThickness="7" Height="Auto" Width="Auto">
            <Image Source="{Binding ImageSource}" Stretch="UniformToFill" />
        </Border>
    </Viewbox>

    <Viewbox Grid.Row="1" Grid.Column="1">
        <Image x:Name="imageReference"  Stretch="UniformToFill" />
    </Viewbox>

    <StatusBar MinHeight="25" MaxHeight="25" x:Name="statusBar" Grid.Row="2" Grid.Column="0" Background="White" Foreground="{StaticResource MediumGreyBrush}">
        <StatusBarItem Content="{Binding StatusText}" />
    </StatusBar>
    <Label x:Name="lblIstruction" Grid.Row="0" Grid.Column="1"  Content="Reference Pose: please,  position yourself as picture" Width="Auto" Height="Auto" FontSize="16"/>
    <Grid Grid.Row="1" Grid.Column="2" Grid.RowSpan="3" Width="Auto" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" x:Name="lblFeedback1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="1" x:Name="lblFeedback2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="2" x:Name="lblFeedback3" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="3" x:Name="lblFeedback4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="4" x:Name="lblFeedback5" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="5" x:Name="lblFeedback6" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="6" x:Name="lblFeedback7" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="7" x:Name="lblFeedback8" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="8" x:Name="lblFeedback9" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="9" x:Name="lblFeedback10" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="10" x:Name="lblFeedback11" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="11" x:Name="lblFeedback12" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="12" x:Name="lblFeedback13" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="13" x:Name="lblFeedback14" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Label Grid.Row="14" x:Name="lblFeedback15" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </Grid>
    <Label Grid.Row="2" Grid.Column="1" x:Name="lblSummaryFeedback"  FontSize="18" FontWeight="Bold"  Width="Auto" Height="Auto" />
</Grid>