Как сохранить отзыв на экране с помощью сетки в wpf

Question

Я работаю над небольшим и очень простым WPF-приложением, НО у меня проблемы с отзывчивыми материалами, компьютер, на котором я работаю, похож на 22 '' с полным HD разрешение и все выглядит хорошо, позвольте мне разместить картинку, как это выглядит: [! [введите описание изображения здесь] [1]] [1]

Но когда я запускаю приложение на меньшем мониторе, мой контент также перемещается вверх , acctualy my datagrid и мои текстовые поля каким-то образом приклеиваются к заголовку (который имеет синий фон). И это выглядит очень плохо на небольших устройствах. Я работаю с сетками, и я подумал, что это правильный путь, но, вероятно, что я делаю что-то неправильно ..

Так вот как это выглядит на меньшее устройство и разрешение:

[[введите описание изображения здесь] [2]] [2]

А вот мой XAML код:

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

     <!-- This is my main grid which is coming by default when I created this window --> 

    <Grid> 
     <!-- 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 --> 

     <Grid Height="65" Margin="0" VerticalAlignment="Top"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0,60*" /> 
      <ColumnDefinition Width="0,10*" /> 
      <ColumnDefinition Width="0,10*" /> 
      <ColumnDefinition Width="0,10*" /> 
      <ColumnDefinition Width="0,10*" /> 
     </Grid.ColumnDefinitions> 
     <Rectangle Grid.ColumnSpan="5"> 
      <Rectangle.Fill> 
       <SolidColorBrush Color="#0091EA"></SolidColorBrush> 
      </Rectangle.Fill> 
     </Rectangle> 
    </Grid> 

      <!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part --> 
    <Grid Margin="0,50,0,0"> 
     <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="0,80*"/> 
     <ColumnDefinition Width="0,20*"/> 
    </Grid.ColumnDefinitions> 
<Border Grid.Column="0" Grid.RowSpan="10" BorderThickness="0,0,3,0" BorderBrush="#0091EA"/> 

      <!-- Here are my text boxes, 6 of them, so I have 6 column definitions--> 

     <Grid Margin="0,0,0,0" Grid.Column="0"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0,20*" /> 
      <ColumnDefinition Width="0,30*"/> 
      <ColumnDefinition Width="0,12*" /> 
      <ColumnDefinition Width="0,12*" /> 
      <ColumnDefinition Width="0,12*" /> 
      <ColumnDefinition Width="0,12*" /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="0,10*"/> 
      <RowDefinition Height="0,86*"/> 
      <RowDefinition Height="0,04*"/> 
      </Grid.RowDefinitions> 

      <Border Grid.Row="2" Grid.ColumnSpan="10" BorderThickness="0,3,0,0" BorderBrush="#0091EA"/> 

      <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" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <DataGrid Grid.ColumnSpan="6" MinHeight="200" Margin="15,-20,8,50" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" Background="White" > 
       <DataGrid.Resources> 
       <Style TargetType="{x:Type DataGridColumnHeader}"> 
        <Setter Property="Background" Value="#0091EA"/> 
        <Setter Property="Opacity" Value="1"/> 
        <Setter Property="Foreground" Value="White"/> 
        <Setter Property="HorizontalContentAlignment" Value="Center" /> 
        <Setter Property="FontSize" Value="16"/> 
        <Setter Property="FontFamily" Value="Arial"/> 
        <Setter Property="Height" Value="40"/> 
       </Style> 
       </DataGrid.Resources> 
       </DataGrid> 
      </Grid> 
     </Grid> 
    </Grid> 
</Window> 

Редактировать после ответа Марка:

XAML кОД:

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

    <Grid> 
    <!-- 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 --> 
    <Grid.RowDefinitions> 
     <!--Reserved header space--> 
     <RowDefinition Height="50" /> 
     <!--Rest of space for textboxes and grid, etc.--> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Rectangle Fill="#0091EA" /> 

    <!--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--> 

    <Grid Height="50" Grid.Row="0"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0,60*" /> 
      <ColumnDefinition Width="0,10*" /> 
      <ColumnDefinition Width="0,10*" /> 
      <ColumnDefinition Width="0,10*" /> 
      <ColumnDefinition Width="0,10*" /> 
     </Grid.ColumnDefinitions> 

     <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"/> 
     <StackPanel Grid.Column="4" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center"> 
      <TextBlock x:Name="lblTimeText" Text="Time" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" /> 
      <TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" /> 
     </StackPanel> 

     <StackPanel Grid.Column="3" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center"> 
      <TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" /> 
      <TextBlock Name="lblDate" Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" /> 
     </StackPanel> 

     <StackPanel Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center"> 
      <TextBlock x:Name="lblOperater" Text="User" Margin="0,0,0,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" /> 
      <TextBlock x:Name="lblOperaterText" Text="Tony Montana" Grid.Column="0" Margin="0" FontSize="16" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" /> 
     </StackPanel> 

     <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center"> 
      <TextBlock x:Name="lblNumber" Text="Ordinal number." Margin="0,0,40,0" FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" /> 
      <TextBlock x:Name="lblNumber" Text="0014" Grid.Column="0" Margin="0" FontSize="16" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" /> 
     </StackPanel> 
    </Grid> 
    <!--header section--> 


    <!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part --> 
    <Grid Margin="0,0,0,0" Grid.Row="1"> 
     <Grid.RowDefinitions> 
      <!--Space for Textboxes - left to auto so that it is not overconstrained, but does 
      not take up too much space--> 
      <RowDefinition Height="Auto" /> 
      <!--Datagrid gets the remainder of the space--> 
      <RowDefinition /> 
      <!--This is the space allowed for the bottom border--> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <!--Reserved 80% of remaining space for text/grid--> 
      <ColumnDefinition Width="8*"/> 
      <!--This is the space allowed for the right border--> 
      <ColumnDefinition Width="Auto" /> 
      <!--This is the 20% of remaining space--> 
      <ColumnDefinition Width="2*"/> 
     </Grid.ColumnDefinitions> 
     <!--textbox section--> 
     <Grid Grid.Row="0" Margin="0 5"> 
      <Grid.ColumnDefinitions> 
       <!--you only had 8 definitions, but 6 boxes... not sure what is intended--> 
       <ColumnDefinition Width="6*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <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" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
     </Grid> 
     <!--grid element--> 
     <DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" > 
      <DataGrid.Resources> 
       <Style TargetType="{x:Type DataGridColumnHeader}"> 
        <Setter Property="Background" Value="#0091EA"/> 
        <Setter Property="Opacity" Value="1"/> 
        <Setter Property="Foreground" Value="White"/> 
        <Setter Property="HorizontalContentAlignment" Value="Center" /> 
        <Setter Property="FontSize" Value="16"/> 
        <Setter Property="FontFamily" Value="Arial"/> 
        <Setter Property="Height" Value="40"/> 
       </Style> 
      </DataGrid.Resources> 
     </DataGrid> 
     <!--right border element--> 
     <Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" /> 

     <!--bottom border element--> 
     <Rectangle Fill="#0091EA" Height="3" Grid.Row="2" /> 

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

    </Grid> 

</Grid> 
</Window> 

Итак, приятель взглянуть, я отредактировал заголовок, это правильный путь? Чтобы добавить еще одну сетку со стеклянными панелями, и как я могу добавить авторские права и материалы в нижней части, не следует ли рассматривать ее как еще одну строку, которая будет очень мала по высоте для exaple 20px? Спасибо большое

Answer 1

Я думаю, что у вас есть правильная идея - используйте сетки для макета ... Вам просто нужно немного опыта. Pikoh является правильным в комментарии о «жестко закодированных» измерениях. Для меня был красным флагом - отрицательная маржа на сетке (именно поэтому ей будет разрешено перекрывать ваши текстовые поля).

Я использую несколько сеток, вложенных друг в друга, чтобы создать то, что вы хотите сделать. Подумайте об этом от самого большого контейнера до самого маленького. Например, нет никаких оснований для того, чтобы ваша основная сетка имела 6 столбцов ... ей нужен только 1 столбец, но 2 строки соответствуют вашим «разделам». В более крупном разделе требуется 3 секции бок о бок (80%/граница/20%) (столбцы) и 2 раздела в самом левом разделе (сетка/граница). Вот пример того, что, по моему мнению, вы пытаетесь выполнить. Я оставил ряд жестко закодированных высот и т. Д., Так как я не привык к вашим требованиям, но остался достаточно, чтобы сделать его отзывчивым.

<Grid> 
    <!-- 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 --> 
    <Grid.RowDefinitions> 
     <!--Reserved header space--> 
     <RowDefinition Height="40" /> 
     <!--Rest of space for textboxes and grid, etc.--> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 

    <!--header section--> 
    <Rectangle Fill="#0091EA" /> 

    <!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part --> 
    <Grid Margin="0,0,0,0" Grid.Row="1"> 
     <Grid.ColumnDefinitions> 
      <!--Reserved 80% of remaining space for text/grid--> 
      <ColumnDefinition Width="8*"/> 
      <!--This is the space allowed for the right border--> 
      <ColumnDefinition Width="Auto" /> 
      <!--This is the 20% of remaining space--> 
      <ColumnDefinition Width="2*"/> 
     </Grid.ColumnDefinitions> 
     <!--left-hand grid--> 
     <Grid> 
      <Grid.RowDefinitions> 
       <!--Space for Textboxes - left to auto so that it is not overconstrained, but does 
      not take up too much space--> 
       <RowDefinition Height="Auto" /> 
       <!--Datagrid gets the remainder of the space--> 
       <RowDefinition /> 
       <!--This is the space allowed for the bottom border--> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <!--textbox section--> 
      <Grid Grid.Row="0" Margin="0 5"> 
       <Grid.ColumnDefinitions> 

        <ColumnDefinition Width="6*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <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" /> 
       <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
       <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
       <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="3" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
       <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="4" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
       <TextBox Height="40" Margin="0,0,8,0" Grid.Row="0" Grid.Column="5" TextWrapping="Wrap" Text="TextBox" Background="White" BorderBrush="#0091EA" BorderThickness="1" /> 
      </Grid> 
      <!--grid element--> 
      <DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" > 
       <DataGrid.Resources> 
        <Style TargetType="{x:Type DataGridColumnHeader}"> 
         <Setter Property="Background" Value="#0091EA"/> 
         <Setter Property="Opacity" Value="1"/> 
         <Setter Property="Foreground" Value="White"/> 
         <Setter Property="HorizontalContentAlignment" Value="Center" /> 
         <Setter Property="FontSize" Value="16"/> 
         <Setter Property="FontFamily" Value="Arial"/> 
         <Setter Property="Height" Value="40"/> 
        </Style> 
       </DataGrid.Resources> 
      </DataGrid> 


      <!--bottom border element--> 
      <Rectangle Fill="#0091EA" Height="3" Grid.Row="2" /> 
     </Grid> 
     <!--right border element--> 
     <Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" /> 
     <!--right-hand grid--> 
     <Grid Grid.Column="2"> 
      <!--Whatever content ends up here--> 
     </Grid> 

    </Grid> 
</Grid> 

UPDATE: Вот конечный продукт, основанный на изображении вы включены. На данный момент, это просто обзор различных частей, которые использовались, чтобы собрать их вместе и практиковать, которые позволят им собрать все вместе для вас. Разделите на логические разделы, затем работайте в этих разделах, когда вам нужно манипулировать макетом. Если вы сочтете это полезным, не стесняйтесь отмечать в качестве ответа и удачи в своем приложении!

<!--header section--> 
<Rectangle Fill="#0091EA" /> 
<Grid Height="50" Grid.Row="0"> 
    <Grid.Resources> 
     <Style TargetType="TextBlock"> 
      <Setter Property="Margin" Value="0" /> 
      <Setter Property="Foreground" Value="#FFFFFFFF" /> 
      <Setter Property="FontSize" Value="15" /> 
      <Setter Property="FontFamily" Value="Arial" /> 
     </Style> 
     <Style TargetType="StackPanel"> 
      <Setter Property="Margin" Value="6 0" /> 
      <Setter Property="VerticalAlignment" Value="Center" /> 
     </Style> 
    </Grid.Resources> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" MinWidth="135" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <StackPanel Grid.Column="4" > 
     <TextBlock x:Name="lblTimeText" Text="Time" /> 
     <TextBlock x:Name="lblTime" Text="labelTime" /> 
    </StackPanel> 
    <StackPanel Grid.Column="3" > 
     <TextBlock Name="lblDateText" Text="Date" /> 
     <TextBlock Name="lblDate" Text="labelaDate" /> 
    </StackPanel> 
    <StackPanel Grid.Column="2" > 
     <TextBlock x:Name="lblOperater" Text="User" /> 
     <TextBlock x:Name="lblOperaterText" Text="Tony Montana" /> 
    </StackPanel> 
    <StackPanel Grid.Column="1" > 
     <TextBlock x:Name="lblBrojRacuna" Text="Ordinal number." /> 
     <TextBlock x:Name="lblBrojRacunaText" Text="0014" FontSize="16" /> 
    </StackPanel> 
</Grid> 

<!-- This is big grid which is separated in two columns which fits on screen 80% of screen - left part 20% of screen right part --> 
<Grid Margin="0,0,0,0" Grid.Row="1"> 
    <Grid.ColumnDefinitions> 
     <!--Reserved 80% of remaining space for text/grid--> 
     <ColumnDefinition Width="8*"/> 
     <!--This is the space allowed for the right border--> 
     <ColumnDefinition Width="Auto" /> 
     <!--This is the 20% of remaining space--> 
     <ColumnDefinition Width="2*"/> 
    </Grid.ColumnDefinitions> 
    <!--left-hand grid--> 
    <Grid> 
     <Grid.RowDefinitions> 
      <!--Space for Textboxes - left to auto so that it is not overconstrained, 
      but does not take up too much space--> 
      <RowDefinition Height="Auto" /> 
      <!--Datagrid gets the remainder of the space--> 
      <RowDefinition /> 
      <!--This is the space allowed for the bottom border--> 
      <RowDefinition Height="Auto" /> 
      <!--This is the space allowed for the copyright--> 
      <RowDefinition Height="20" /> 
     </Grid.RowDefinitions> 
     <!--textbox section--> 
     <Grid Grid.Row="0" Margin="15 5"> 
      <Grid.Resources> 
       <Style TargetType="TextBox"> 
        <Setter Property="Height" Value="40" /> 
        <Setter Property="Margin" Value="0 0 8 0" /> 
        <Setter Property="TextWrapping" Value="Wrap" /> 
        <Setter Property="BorderBrush" Value="#0091EA" /> 
        <Setter Property="BorderThickness" Value="1" /> 
       </Style> 
      </Grid.Resources> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="6*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <TextBox Grid.Row="0" Grid.Column="0" Text="TextBox" FontSize="20" /> 
      <TextBox Grid.Row="0" Grid.Column="1" Text="TextBox" /> 
      <TextBox Grid.Row="0" Grid.Column="2" Text="TextBox" /> 
      <TextBox Grid.Row="0" Grid.Column="3" Text="TextBox" /> 
      <TextBox Grid.Row="0" Grid.Column="4" Text="TextBox" /> 
      <TextBox Grid.Row="0" Grid.Column="5" Text="TextBox" /> 
     </Grid> 
     <!--grid element--> 
     <DataGrid Grid.Row="1" MinHeight="200" Margin="15,0,8,0" AutoGenerateColumns="False" Background="White" > 
      <DataGrid.Resources> 
       <Style TargetType="{x:Type DataGridColumnHeader}"> 
        <Setter Property="Background" Value="#0091EA"/> 
        <Setter Property="Opacity" Value="1"/> 
        <Setter Property="Foreground" Value="White"/> 
        <Setter Property="HorizontalContentAlignment" Value="Center" /> 
        <Setter Property="FontSize" Value="16"/> 
        <Setter Property="FontFamily" Value="Arial"/> 
        <Setter Property="Height" Value="40"/> 
       </Style> 
      </DataGrid.Resources> 
     </DataGrid> 
     <!--bottom border element--> 
     <Rectangle Fill="#0091EA" Height="3" Grid.Row="2" /> 
     <!--copyright--> 
     <TextBlock Grid.Row="3" HorizontalAlignment="Center" Text="Copyright some holder ####" /> 
    </Grid> 
    <!--right border element--> 
    <Rectangle Fill="#0091EA" Width="3" Grid.Column="1" Grid.RowSpan="3" /> 
    <!--right-hand grid--> 
    <Grid Grid.Column="2"> 
     <!--Whatever content ends up here--> 
    </Grid> 

</Grid> 

Answer 2

Я бы посоветовал смотреть в использовании stackpanels и dockpanels. Stackpanels, как правило, были более полезны для меня в моем опыте WPF. Также для заголовков и материалов в верхней части страницы используйте фиксированные интервалы вместо расчетных процентов в зависимости от размера экрана.Я считаю, что лучше держать панели меню в фиксированном размере и позволить динамическому размеру контента.