参考链接

《WPF编程宝典》3.4
《深入浅出WPF》5.4.2

简述

  1. 子元素 Grid 按标记或代码中显示的顺序绘制。 因此，当元素共享相同的坐标时，书写顺序在后面的元素，在上层显示。如果想手动设置元素在Z轴的显示顺序，可以通过Panel类的附加属性ZIndex实现
  2. 超出边界的子元素默认会被裁剪
  3. Grid可以界定宽高不相同的n行n列
  4. 行的高度和列的宽度都可以通过3种方式设置：* Auto 固定值
  5. 通过RowSpan和ColumnSpan属性可以横跨多个行列，典型的场景是：合并单元格
  6. ShowGridLines属性 可以获取或设置一个值，该值指示网格线在此 Grid 中是否可见。 如果网格线可见，则为 true；否则为 false。 默认值是 false。 启用网格线会在一个 Grid内的所有元素周围创建虚线。 只有虚线可用，因为此属性旨在用作用于调试布局问题的设计工具，不适用于生产质量代码。 如果要在一个 Grid内部设置线条，请设置元素的 Grid 样式以具有边框。

  7. 灵活运用Grid布局，可以实现StackPanel、DockPanel、UniformGrid、Canvas等布局，但WrapPanel除外

    其他

    Grid和Table的区别

    Table 和 Grid 有一些共同的功能，但每个都有其各自最适合的场景。 Table 设计为在流内容内使用（有关流内容的详细信息，请参阅流文档概述）。 网格最适合在表单中（主要在流内容以外的任意位置）使用。 在 FlowDocument 中，Table 支持分页、列重排和内容选择等流内容行为，而 Grid 不支持。 另一方面，Grid 最适合在 FlowDocument 之外使用，其原因有多种，例如 Grid 基于行和列索引添加元素，而 Table 不是。 Grid 元素支持对子内容进行分层，从而允许多个元素共存于单个“单元格”内，而 Table 不支持分层。 Grid 的子元素可相对于其“单元格”边界区域进行绝对定位。 Table 不支持此功能。 最后，Grid 比 Table 更轻量。

    实践

    官方示例

    以下示例演示如何创建网格。 在这种情况下，网格定义托管子内容的三 ColumnDefinition 个元素和四 RowDefinition 个元素。 

    1. <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Grid Sample">
    2.  <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
    3.    <Grid.ColumnDefinitions>
    4.      <ColumnDefinition />
    5.      <ColumnDefinition />
    6.      <ColumnDefinition />
    7.    </Grid.ColumnDefinitions>
    8.    <Grid.RowDefinitions>
    9.      <RowDefinition />
    10.      <RowDefinition />
    11.      <RowDefinition />
    12.      <RowDefinition />
    13.    </Grid.RowDefinitions>
    15.    <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
    16.    <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
    17.    <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
    18.    <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
    19.    <TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
    20.    <TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
    21.    <TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
    22.    <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>
    23.  </Grid>
    24. </Page>

    ```csharp // Create the application’s main window mainWindow = new Window(); mainWindow.Title = “Grid Sample”;

// Create the Grid Grid myGrid = new Grid(); myGrid.Width = 250; myGrid.Height = 100; myGrid.HorizontalAlignment = HorizontalAlignment.Left; myGrid.VerticalAlignment = VerticalAlignment.Top; myGrid.ShowGridLines = true;

// Define the Columns ColumnDefinition colDef1 = new ColumnDefinition(); ColumnDefinition colDef2 = new ColumnDefinition(); ColumnDefinition colDef3 = new ColumnDefinition(); myGrid.ColumnDefinitions.Add(colDef1); myGrid.ColumnDefinitions.Add(colDef2); myGrid.ColumnDefinitions.Add(colDef3);

// Define the Rows RowDefinition rowDef1 = new RowDefinition(); RowDefinition rowDef2 = new RowDefinition(); RowDefinition rowDef3 = new RowDefinition(); RowDefinition rowDef4 = new RowDefinition(); myGrid.RowDefinitions.Add(rowDef1); myGrid.RowDefinitions.Add(rowDef2); myGrid.RowDefinitions.Add(rowDef3); myGrid.RowDefinitions.Add(rowDef4);

// Add the first text cell to the Grid TextBlock txt1 = new TextBlock(); txt1.Text = “2005 Products Shipped”; txt1.FontSize = 20; txt1.FontWeight = FontWeights.Bold; Grid.SetColumnSpan(txt1, 3); Grid.SetRow(txt1, 0);

// Add the second text cell to the Grid TextBlock txt2 = new TextBlock(); txt2.Text = “Quarter 1”; txt2.FontSize = 12; txt2.FontWeight = FontWeights.Bold; Grid.SetRow(txt2, 1); Grid.SetColumn(txt2, 0);

// Add the third text cell to the Grid TextBlock txt3 = new TextBlock(); txt3.Text = “Quarter 2”; txt3.FontSize = 12; txt3.FontWeight = FontWeights.Bold; Grid.SetRow(txt3, 1); Grid.SetColumn(txt3, 1);

// Add the fourth text cell to the Grid TextBlock txt4 = new TextBlock(); txt4.Text = “Quarter 3”; txt4.FontSize = 12; txt4.FontWeight = FontWeights.Bold; Grid.SetRow(txt4, 1); Grid.SetColumn(txt4, 2);

// Add the sixth text cell to the Grid TextBlock txt5 = new TextBlock(); Double db1 = new Double(); db1 = 50000; txt5.Text = db1.ToString(); Grid.SetRow(txt5, 2); Grid.SetColumn(txt5, 0);

// Add the seventh text cell to the Grid TextBlock txt6 = new TextBlock(); Double db2 = new Double(); db2 = 100000; txt6.Text = db2.ToString(); Grid.SetRow(txt6, 2); Grid.SetColumn(txt6, 1);

// Add the final text cell to the Grid TextBlock txt7 = new TextBlock(); Double db3 = new Double(); db3 = 150000; txt7.Text = db3.ToString(); Grid.SetRow(txt7, 2); Grid.SetColumn(txt7, 2);

// Total all Data and Span Three Columns TextBlock txt8 = new TextBlock(); txt8.FontSize = 16; txt8.FontWeight = FontWeights.Bold; txt8.Text = “Total Units: “ + (db1 + db2 + db3).ToString(); Grid.SetRow(txt8, 3); Grid.SetColumnSpan(txt8, 3);

// Add the TextBlock elements to the Grid Children collection myGrid.Children.Add(txt1); myGrid.Children.Add(txt2); myGrid.Children.Add(txt3); myGrid.Children.Add(txt4); myGrid.Children.Add(txt5); myGrid.Children.Add(txt6); myGrid.Children.Add(txt7); myGrid.Children.Add(txt8);

// Add the Grid as the Content of the Parent Window Object mainWindow.Content = myGrid; mainWindow.Show ();

  1. <a name="mcxGl"></a>
  2. ## 个人实践
  3. <a name="DgRPG"></a>
  4. ### 共享尺寸组
  5. 设置列ColumnDefinition 属性中的[ SharedSizeGroup](https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls.definitionbase.sharedsizegroup?view=netframework-4.8#system-windows-controls-definitionbase-sharedsizegroup) ，SharedSizeGroup的值相同时，可以控制一个Grid中的列和另外一个Gird中的某一列的宽度相同。<br />还有一个要注意的是 顶级Grid元素的[IsSharedSizeScope](https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls.grid.issharedsizescope?view=netframework-4.8#system-windows-controls-grid-issharedsizescope)要设置为True
  6. ```xml
  7. <Grid Grid.IsSharedSizeScope="True" Margin="3" ShowGridLines="True">
  8.   <Grid.RowDefinitions>
  9.     <RowDefinition></RowDefinition>
  10.     <RowDefinition Height="Auto"></RowDefinition>
  11.     <RowDefinition></RowDefinition>
  12.   </Grid.RowDefinitions>
  14.   <Grid Grid.Row="0" Margin="3" Background="LightYellow" ShowGridLines="True">
  15.     <Grid.ColumnDefinitions >
  16.       <ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
  17.       <ColumnDefinition Width="Auto"></ColumnDefinition>
  18.       <ColumnDefinition></ColumnDefinition>
  19.     </Grid.ColumnDefinitions>
  20.     <Label Margin="5">A very long bit of text</Label>
  21.     <Label Grid.Column="1" Margin="5">More text</Label>
  22.     <TextBox Grid.Column="2" Margin="5">A text box</TextBox>
  23.   </Grid>
  25.   <Label Grid.Row="1">Some text in between the two grids</Label>
  27.   <Grid Grid.Row="2" Margin="3" Background="LightYellow" ShowGridLines="True">
  28.     <Grid.ColumnDefinitions>
  29.       <ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
  30.       <ColumnDefinition></ColumnDefinition>
  31.     </Grid.ColumnDefinitions>
  32.     <Label Margin="5">Short</Label>
  33.     <TextBox Grid.Column="1" Margin="5">A text box</TextBox>
  34.   </Grid>
  35. </Grid>