（C#）WPF：Grid面板介绍

Grid:网格面板

      Grid和其他各个Panel比较起来，功能最多也最为复杂。要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数；而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。

      注意：尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。

1、定义一个两行三列的Grid，在单元格里面放置Button按钮

<Window x:Class="WpfApp3.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:WpfApp3"
                mc:Ignorable="d"
                Title="MainWindow" Height="237" Width="525">
          <Grid ShowGridLines="True">
                    <Grid.RowDefinitions>
                             <RowDefinition></RowDefinition>
                             <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                             <ColumnDefinition></ColumnDefinition>
                             <ColumnDefinition></ColumnDefinition>
                             <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
                    <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
                    <Button Grid.Row="1" Grid.Column="2">Button Right</Button>
                    <Button Grid.Row="1" Grid.Column="1">Button Middle</Button>
           </Grid>
</Window>

效果图：

               

2、调整行高和列宽

Grid面板支持以下三种设置尺寸的方式：

名称	说明
绝对设置尺寸方式	使用设备无关单位准确地设置尺寸，就是给一个实际的数字，但通常将此值指定为整数。这是最无用的策略，因为这种策略不够灵活，难以适应内容大小和容器大小的改变，而且难以处理本地化。
自动设置尺寸方式	值为Auto，实际作用就是取实际控件所需的最小值，每行和每列的尺寸刚好满足需要，这是最有用 的尺寸设置方式。
按比例设置尺寸方式	按比例将空间分割到一组行和列中。这是对所有行和列的标准设置。通常值为*或N*，实际作用就是取尽可能大的值，当某一列或行被定义为*则是尽可能大，当出现多列或行被定义为*则是代表几者之间按比例方设置尺寸。

        为了获得最大的灵活性，可混合使用这三种尺寸设置方式。例如，创建几个自动设置尺寸的行，然后通过按比例设置尺寸的方式让最后的一行或两行充满剩余的空间，这通常是很有用的。

       可通过设置ColumnDefinition对象的Width属性或者RowDefinition对象的Height属性来确定尺寸设置方式。

      （1）设置100设备无关单位的绝对宽度：

<ColumnDefinition Width="100"></ColumnDefinition>

       （2）使用自动尺寸设置方式，需要使用Auto值

<ColumnDefinition Width="Auto"></ColumnDefinition>

        （3）使用按比例尺寸设置方式，需要使用星号(*)

<ColumnDefinition Width="*"></ColumnDefinition>

          如果希望不均匀的分割剩余空间，可指定权重，权重必须放在星号之前。例如，如果有两行是按比例设置尺寸，并希望第一行的高度是第二行高度的一半，那么可以使用如下设置来分配剩余空间：

<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>

        定义一个三行四列的Grid

<Window x:Class="WpfApp4.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:WpfApp4"
                mc:Ignorable="d"
                Title="MainWindow" Height="237" Width="525">
            <Grid ShowGridLines="True">
                    <Grid.RowDefinitions>
                             <!-- 自动行高 -->
                             <RowDefinition Height="Auto"></RowDefinition>
                             <!-- 按比例行高 -->
                             <RowDefinition Height="*"></RowDefinition>
                             <!-- 固定行高 -->
                             <RowDefinition Height="50"></RowDefinition>
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                             <!-- 按比例列宽 -->
                             <ColumnDefinition Width="*"></ColumnDefinition>
                             <!-- 固定列宽 -->
                             <ColumnDefinition Width="200"></ColumnDefinition>
                  </Grid.ColumnDefinitions>
                  <TextBlock Grid.Row="0" Grid.Column="0">第一行第一列</TextBlock>
                  <TextBlock Grid.Row="1" Grid.Column="0">第二行第一列</TextBlock>
                  <TextBlock Grid.Row="2" Grid.Column="0">第三行第一列</TextBlock>
                  <Button Grid.Row="0" Grid.Column="1">第一行第二列</Button>
                  <Button Grid.Row="1" Grid.Column="1">第二行第二列</Button>
                  <Button Grid.Row="2" Grid.Column="1">第三行第二列</Button>
           </Grid>
</Window>

效果图：

               

3、跨越多行和多列 

还有两个附加属性是RowSpan和ColumnSpan，它们可以使元素跨越多个单元格。

 1 <Window x:Class="WpfApp5.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:WpfApp5"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="237" Width="525">
 9     <Grid ShowGridLines="True">
10         <Grid.RowDefinitions>
11             <RowDefinition Height="*"></RowDefinition>
12             <RowDefinition Height="Auto"></RowDefinition>
13         </Grid.RowDefinitions>
14         <Grid.ColumnDefinitions>
15             <ColumnDefinition Width="*"></ColumnDefinition>
16             <ColumnDefinition Width="Auto"></ColumnDefinition>
17             <ColumnDefinition Width="Auto"></ColumnDefinition>
18         </Grid.ColumnDefinitions>
19         <TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">this is a test</TextBox>
20         <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button>
21         <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="2">Cancle</Button>
22     </Grid>
23 </Window>

效果图：

               

4、分割窗口

       每个Windows用户都见过分隔条—能将窗口的一部分与另一部分分类的可拖动分割器。例如，当使用Windows资源管理器时，会看到一系列文件夹（在左边）和一系列文件（在右边）。可拖动它们之间的分隔条来确定每部分占据窗口的比例。

       在WPF中，分隔条由GridSplitter类表示，它是Grid面板的功能之一。通过为Grid面板添加GridSplitter对象，用户就可以改变行和列的尺寸。

       例如：

<Window x:Class="WpfApp6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp6"
        mc:Ignorable="d"
        Title="MainWindow" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
    </Grid>
</Window>

效果图：

              

             

注意：为了成功地创建GridSplitter对象，务必为VerticalAlignment（垂直对齐方式）、HorizontalAlignment（水平对齐方式）以及width属性（或Height属性）提供相应的属性值。

https://www.cnblogs.com/dotnet261010/p/6281915.html