title: How to keep my screen responsive using grid in wpf
body: <p>I'm working on small and very simple WPF application, BUT I'm having trouble with responsive stuffs, computer where I'm working at is like 22'' with full HD resolution and everything looks fine, let me post picture how it looks like this:
  [![enter image description here][1]][1]</p>
  
  <p>But when I run application on smaller monitor, my content also moves up, acctualy my datagrid and my textboxes somehow glue up to the header ( which has blue background). And it looks really bad on smaller devices. I'm working with grids and I thought that's right way, but probably I am doing something wrong..</p>
  
  <p>So this is how it looks on smaller device and resolution:</p>
  
  <p>[![enter image description here][2]][2]</p>
  
  <p>And here is my xaml code:</p>
  
  <pre><code>&lt;Window x:Class="Test.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None"&gt;
  
        &lt;!-- This is my main grid which is coming by default when I created this window --&gt;
  
      &lt;Grid&gt;
        &lt;!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition --&gt;
  
          &lt;Grid Height="65" Margin="0" VerticalAlignment="Top"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="0,60*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Rectangle Grid.ColumnSpan="5"&gt;
              &lt;Rectangle.Fill&gt;
                  &lt;SolidColorBrush Color="#0091EA"&gt;&lt;/SolidColorBrush&gt;
              &lt;/Rectangle.Fill&gt;
          &lt;/Rectangle&gt;
      &lt;/Grid&gt;
  
            &lt;!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part --&gt;
      &lt;Grid Margin="0,50,0,0"&gt;
        &lt;Grid.ColumnDefinitions&gt;
           &lt;ColumnDefinition Width="0,80*"/&gt;
           &lt;ColumnDefinition Width="0,20*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
   &lt;Border Grid.Column="0" Grid.RowSpan="10" BorderThickness="0,0,3,0" BorderBrush="#0091EA"/&gt;
  
            &lt;!-- Here are my text boxes, 6 of them, so I have 6 column definitions--&gt;
  
          &lt;Grid Margin="0,0,0,0" Grid.Column="0"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="0,20*" /&gt;
              &lt;ColumnDefinition Width="0,30*"/&gt;
              &lt;ColumnDefinition Width="0,12*" /&gt;
              &lt;ColumnDefinition Width="0,12*" /&gt;
              &lt;ColumnDefinition Width="0,12*" /&gt;
              &lt;ColumnDefinition Width="0,12*" /&gt;
           &lt;/Grid.ColumnDefinitions&gt;
           &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="0,10*"/&gt;
              &lt;RowDefinition Height="0,86*"/&gt;
              &lt;RowDefinition Height="0,04*"/&gt;
            &lt;/Grid.RowDefinitions&gt;
  
             &lt;Border Grid.Row="2" Grid.ColumnSpan="10" BorderThickness="0,3,0,0" BorderBrush="#0091EA"/&gt;
  
              &lt;TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;DataGrid Grid.ColumnSpan="6" MinHeight="200" Margin="15,-20,8,50" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" Background="White" &gt;
                  &lt;DataGrid.Resources&gt;
                  &lt;Style TargetType="{x:Type DataGridColumnHeader}"&gt;
                      &lt;Setter Property="Background" Value="#0091EA"/&gt;
                      &lt;Setter Property="Opacity" Value="1"/&gt;
                      &lt;Setter Property="Foreground" Value="White"/&gt;
                      &lt;Setter Property="HorizontalContentAlignment" Value="Center" /&gt;
                      &lt;Setter Property="FontSize" Value="16"/&gt;
                      &lt;Setter Property="FontFamily" Value="Arial"/&gt;
                      &lt;Setter Property="Height" Value="40"/&gt;
                  &lt;/Style&gt;
                  &lt;/DataGrid.Resources&gt;
                  &lt;/DataGrid&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Edit after Mark's answer:</p>
  
  <p>XAML CODE:</p>
  
  <pre><code>&lt;Window x:Class="xTouchPOS.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None"&gt;
  
      &lt;Grid&gt;
     &lt;!-- I created this grid, because soon I will put image to the left, as my logo, and few informations also, thats reason why I have column definition --&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;!--Reserved header space--&gt;
          &lt;RowDefinition Height="50" /&gt;
          &lt;!--Rest of space for textboxes and grid, etc.--&gt;
          &lt;RowDefinition /&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Rectangle Fill="#0091EA" /&gt;
  
       &lt;!--My edit.Added one more grid to row 0 which will contain some things that I need like time, date, user which is currently using app--&gt;
  
      &lt;Grid Height="50" Grid.Row="0"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="0,60*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
              &lt;ColumnDefinition Width="0,10*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;Image Stretch="Fill" Name="image2" Source="C:\Users\Tuca\Desktop\microsoft.logo.png" Width="135" Height="42" VerticalAlignment="Center" Margin="15,0,0,0" Grid.Column="0" HorizontalAlignment="Left"/&gt;
          &lt;StackPanel Grid.Column="4" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center"&gt;
              &lt;TextBlock  x:Name="lblTimeText"  Text="Time"  Margin="0,0,0,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" /&gt;
              &lt;TextBlock  x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0"  FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  /&gt;
          &lt;/StackPanel&gt;
  
          &lt;StackPanel Grid.Column="3" Orientation="Vertical"  VerticalAlignment="Center" HorizontalAlignment="Center"&gt;
              &lt;TextBlock  Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial" /&gt;
              &lt;TextBlock  Name="lblDate"  Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  /&gt;
          &lt;/StackPanel&gt;
  
          &lt;StackPanel Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center"&gt;
              &lt;TextBlock  x:Name="lblOperater"  Text="User"  Margin="0,0,0,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" /&gt;
              &lt;TextBlock  x:Name="lblOperaterText" Text="Tony Montana" Grid.Column="0" Margin="0"  FontSize="16" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  /&gt;
          &lt;/StackPanel&gt;
  
          &lt;StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center"&gt;
              &lt;TextBlock  x:Name="lblNumber"  Text="Ordinal number."  Margin="0,0,40,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" /&gt;
              &lt;TextBlock  x:Name="lblNumber" Text="0014" Grid.Column="0" Margin="0"  FontSize="16" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  /&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
      &lt;!--header section--&gt;
  
  
      &lt;!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part --&gt;
      &lt;Grid Margin="0,0,0,0" Grid.Row="1"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;!--Space for Textboxes - left to auto so that it is not overconstrained, but does
              not take up too much space--&gt;
              &lt;RowDefinition Height="Auto" /&gt;
              &lt;!--Datagrid gets the remainder of the space--&gt;
              &lt;RowDefinition /&gt;
              &lt;!--This is the space allowed for the bottom border--&gt;
              &lt;RowDefinition Height="Auto" /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;!--Reserved 80% of remaining space for text/grid--&gt;
              &lt;ColumnDefinition Width="8*"/&gt;
              &lt;!--This is the space allowed for the right border--&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;!--This is the 20% of remaining space--&gt;
              &lt;ColumnDefinition Width="2*"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;!--textbox section--&gt;
          &lt;Grid Grid.Row="0" Margin="0 5"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;!--you only had 8 definitions, but 6 boxes... not sure what is intended--&gt;
                  &lt;ColumnDefinition Width="6*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
                  &lt;ColumnDefinition Width="*" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;TextBox Height="40" Margin="15,0,8,0" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" FontSize="20" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
              &lt;TextBox Height="40"  Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /&gt;
          &lt;/Grid&gt;
          &lt;!--grid element--&gt;
          &lt;DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" &gt;
              &lt;DataGrid.Resources&gt;
                  &lt;Style TargetType="{x:Type DataGridColumnHeader}"&gt;
                      &lt;Setter Property="Background" Value="#0091EA"/&gt;
                      &lt;Setter Property="Opacity" Value="1"/&gt;
                      &lt;Setter Property="Foreground" Value="White"/&gt;
                      &lt;Setter Property="HorizontalContentAlignment" Value="Center" /&gt;
                      &lt;Setter Property="FontSize" Value="16"/&gt;
                      &lt;Setter Property="FontFamily" Value="Arial"/&gt;
                      &lt;Setter Property="Height" Value="40"/&gt;
                  &lt;/Style&gt;
              &lt;/DataGrid.Resources&gt;
          &lt;/DataGrid&gt;
          &lt;!--right border element--&gt;
          &lt;Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" /&gt;
  
          &lt;!--bottom border element--&gt;
          &lt;Rectangle Fill="#0091EA" Height="3" Grid.Row="2" /&gt;
  
          &lt;Grid Grid.Row="0" Grid.Column="2"/&gt;
          &lt;Grid Grid.Row="1" Grid.Column="2"/&gt;
  
      &lt;/Grid&gt;
  
  &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>So mate take a look I edited header, is that right way? To add one more grid with stackpanels, and how could I add copyright and stuffs at the bottom, shouldn't I treat it as one more row which will be very small by heigh for exaple 20px? 
  Thanks a lot</p>