如何在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通常對我來說更有用。 另外，對於頁面頂部附近的標題和內容，請使用固定間距，而不要根據屏幕尺寸計算百分比。 我發現通常最好將菜單欄保持固定大小，並讓內容為動態大小。