如何在WPF中使用网格保持屏幕响应

Question

我正在开发小型且非常简单的WPF应用程序，但是我在响应式内容方面遇到了麻烦，我正在使用的计算机像22英寸的全高清分辨率，一切看起来都很好，让我发布图片像这样：[！[在此处输入图片描述] [1]] [1]

但是，当我在较小的监视器上运行应用程序时，我的内容也会移动，从而使我的数据网格和文本框以某种方式粘到标题（蓝色背景）上。 在较小的设备上看起来确实很糟糕。 我正在使用网格，我认为这是正确的方法，但可能我做错了。

因此，这是在较小的设备和分辨率下的外观：

[！[在此处输入图片描述] [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>

伴侣看看我编辑的标题，是正确的方法吗？ 要添加一个带有堆栈面板的网格，以及如何在底部添加版权和内容，我不应该将其视为多一行，例如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>

更新：这是基于您包含的图像的最终产品。 在这一点上，它只是在回顾用于组合在一起的不同部分，并进行实践以使它们全部组合在一起。 细分为逻辑部分，然后在需要操纵布局时在这些部分中工作。 如果您认为这有帮助，请随时将其标记为答案，并祝您应用程序好运！

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

我建议您使用堆栈面板和扩展面板。 在WPF经验中，Stackpanels通常对我来说更有用。 另外，对于页面顶部附近的标题和内容，请使用固定间距，而不要根据屏幕尺寸计算百分比。 我发现通常最好将菜单栏保持固定大小，并让内容为动态大小。