WPF入门教程系列八——布局之Grid与UniformGrid（三）

桃扇骨 2024-03-17 10:45 63阅读 0赞

**五. Grid**

Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。 Grid和其他各个Panel比较起来，功能最多也最为复杂。要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其 放置所在的行和列，它们都是以0为基准的整型 值，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单 元格中，所以布局起来就很精细了。

Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。与Canvas一样，同一个单元格中 的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。接下来我们来使用一些实际的代码演示一下如何使用GRID。

1) Grid的列宽与行高可采用固定、自动、按比列三种方式定义

![614f36d8f3bf1ea16dfe7d126f42fe26.gif][]

![3fbf76295369e99b029f7c41d671c10c.gif][]

注意：这里介绍一下Grid高度、宽度的几种定义方式：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>名称</p> </td> 
   <td style="vertical-align:top;"> <p>说明</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>绝对尺寸</p> </td> 
   <td style="vertical-align:top;"> <p>就是给一个实际的数字，但通常将此值指定为整数，像上图中中那样</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>自动(Autosizing)</p> </td> 
   <td style="vertical-align:top;"> <p>值为Auto，实际作用就是取实际控件所需的最小值</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>StarSizing</p> </td> 
   <td style="vertical-align:top;"> <p>值为*或N*，实际作用就是取尽可能大的值，当某一列或行被定义为*则是尽可能大，当出现多列或行被定义为*则是代表几者之间按比例方设置尺寸</p> </td> 
  </tr> 
 </tbody> 
</table>

第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。  
第二种，自动长度——自动匹配列中最长元素的宽度。  
第三种，比例长度——\*表示占用剩余的全部宽度；两行都是\*，将平分剩余宽度；像上面的一个2\*，一个\*，表示前者2/3宽度。

2) 跨越多行和多列

使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并，所以元素也可以跨越多个单元格。

3) 使用GridSplit分割

使用GridSplit控件结合Grid控件实现类似于WinForm中SplitContainer的功能，这个大家在WinForm当中经常用到，我们也不多做介绍。

4) XAML代码实现下图效果（用XAML）：

![85d6b3e1f48ea51d0048b3aa86d61b6e.png][]

![fb872d213bd78ffa5efb618ee6ccb8c3.gif][]

<Window x:Class="WpfApp1.WindowGridDemo"
    
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    
            Title="WindowGridDemo" Height="300" Width="400">
    
        <Grid>
    
            <Grid.RowDefinitions>
    
                <RowDefinition Height="61*"/>
    
                <RowDefinition Height="101*"/>
    
                <RowDefinition Height="108*"/>
    
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
    
                <ColumnDefinition Width="139"/>
    
                <ColumnDefinition Width="184*"/>
    
                <ColumnDefinition Width="45*" />
    
                <ColumnDefinition Width="250*"/>
    
            </Grid.ColumnDefinitions>
    
     
    
            <TextBlock   Grid.Row="0" Grid.ColumnSpan="1"  Text="第一行，第一列，占1列" Background="Red" HorizontalAlignment="Center"  />
    
            <Button Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Grid.RowSpan="2" Content="从第1行第2列开始，占两行，三列" />
    
            <Button  Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Content="第3行，第1列开始，占4列" />
    
            <Button Grid.Row="1" Name="btnAddByCode" Click="btnAddByCode_Click" >后台代码生成(第2行第1列)</Button>
    
        </Grid>
    
    </Window>

![fc4999abf45862e70b90b515540258fc.gif][]

5) 下图，以C\#代码实现：

![85e36cdef88d416419e332c308c2cdca.png][]

![ec1f971370affe52e407ee59d3d5e88a.gif][]

using System;
    
    using System.Collections.Generic;
    
    using System.Linq;
    
    using System.Text;
    
    using System.Threading.Tasks;
    
    using System.Windows;
    
    using System.Windows.Controls;
    
    using System.Windows.Data;
    
    using System.Windows.Documents;
    
    using System.Windows.Input;
    
    using System.Windows.Media;
    
    using System.Windows.Media.Imaging;
    
    using System.Windows.Shapes;
    
     
    
    namespace WpfApp1
    
    {
    
        /// <summary>
    
        /// WindowGridDemo.xaml 的交互逻辑
    
        /// </summary>
    
        public partial class WindowGridDemo : Window
    
        {
    
            public WindowGridDemo()
    
            {
    
                InitializeComponent();
    
            }
    
            public void btnAddByCode_Click(object sender, RoutedEventArgs e)
    
            {
    
                Grid grid = new Grid();
    
                grid.Width = Double.NaN;    //相当于在XAML中设置Width="Auto"
    
                grid.Height = Double.NaN;   //相当于在XAML中设置Height="Auto"
    
                //把grid添加为窗体的子控件
    
                this.Content = grid;
    
     
    
                //列一
    
                ColumnDefinition cd1 = new ColumnDefinition();
    
                cd1.Width = new GridLength(139);
    
                grid.ColumnDefinitions.Add(cd1);
    
                //列二
    
                ColumnDefinition cd2 = new ColumnDefinition();
    
                cd2.Width = new GridLength(1, GridUnitType.Star);
    
                grid.ColumnDefinitions.Add(cd2);
    
                //列三
    
                ColumnDefinition cd3 = new ColumnDefinition();
    
                cd3.Width = new GridLength(2, GridUnitType.Star);
    
                grid.ColumnDefinitions.Add(cd3);
    
     
    
                //行一
    
                RowDefinition row1 = new RowDefinition();
    
                row1.Height = new GridLength(61);
    
                grid.RowDefinitions.Add(row1);
    
                //行二
    
                RowDefinition row2 = new RowDefinition();
    
                row2.Height = new GridLength(1, GridUnitType.Star);
    
                grid.RowDefinitions.Add(row2);
    
                //行三
    
                RowDefinition row3 = new RowDefinition();
    
                row3.Height = new GridLength(200);
    
                grid.RowDefinitions.Add(row3);
    
                //把单元格添加到grid中
    
                Rectangle r0c1 = new Rectangle();
    
                r0c1.Fill = new SolidColorBrush(Colors.Gray);
    
                r0c1.SetValue(Grid.ColumnProperty, 0);
    
                r0c1.SetValue(Grid.RowProperty, 0);
    
                grid.Children.Add(r0c1);
    
     
    
                Rectangle r1c23 = new Rectangle();
    
                r1c23.Fill = new SolidColorBrush(Colors.Yellow);
    
                r1c23.SetValue(Grid.ColumnProperty, 1);
    
                r1c23.SetValue(Grid.ColumnSpanProperty, 2);
    
                r1c23.SetValue(Grid.RowProperty, 1);
    
                r1c23.SetValue(Grid.RowSpanProperty, 2);
    
                grid.Children.Add(r1c23);
    
     
    
            }
    
        }
    
    }

![d419bed129d073f59a2aa158518547f5.gif][]

**六、 UniformGrid**

介绍了前面的Grid,接下来介绍的这个UniformGrid 就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。UniformGrid 中没有Row 和Column 附加属性，也没有空白单元格。

与Grid布局控件相比，UniformGrid布局控件很少使用。Grid面板是用于创建简单乃至复杂窗口布局的通用工具。UniformGrid面板是一个一种更特殊的布局容器，主要用于在一个刻板的网格中快速地布局元素。

下面用XAML代码实现一个示例，该示例使用4个按钮填充UniformGrid面板。：

![760901adffa4f3374571056e88a79f99.png][]

![6edafbce5a7f33dcdf1e2bc4f38753c5.gif][]

![c885772106fa2a41c3e029b7e533730d.gif][]

下面使用C\#代码实现10个TextBlock的控件的布局。

![b35088fbb5ccf59dd39ee3e4f5b53acc.png][]

![9119c9b42dbb71a33bcdc411e7b63caf.gif][]

![b2580346c66ce5cd95aa43146297661e.gif][]

[614f36d8f3bf1ea16dfe7d126f42fe26.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/e3e883aef1b84adf9bd07c09f0b85b46.png
[3fbf76295369e99b029f7c41d671c10c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/9aa16f9a79ca42a3bbeb29cbfb3d7421.png
[85d6b3e1f48ea51d0048b3aa86d61b6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/70a322520f714d6b8c44f3c0107f7ef9.png
[fb872d213bd78ffa5efb618ee6ccb8c3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/a456144c387f4465a1fd67145f58e44c.png
[fc4999abf45862e70b90b515540258fc.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ebfaad0d925349d7b0cc268cbec7d185.png
[85e36cdef88d416419e332c308c2cdca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/af2713d84ca84853af997acb6e3606cf.png
[ec1f971370affe52e407ee59d3d5e88a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/77aad18f0c07486d90b50d8542186a8b.png
[d419bed129d073f59a2aa158518547f5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/aad0b69820ff4ad695b1eecf34bdfb34.png
[760901adffa4f3374571056e88a79f99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/278b76dd72e742169b4a75e626082a7c.png
[6edafbce5a7f33dcdf1e2bc4f38753c5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b4cad3bb4b1344bb8f1609d680653907.png
[c885772106fa2a41c3e029b7e533730d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/e817a24e15dc4959ab0aac67ff629841.png
[b35088fbb5ccf59dd39ee3e4f5b53acc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/53d735ae0fcb4deea513647786c242e5.png
[9119c9b42dbb71a33bcdc411e7b63caf.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/a963c162a3474262b358c8c74fd6b12d.png
[b2580346c66ce5cd95aa43146297661e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ec5d0bb4fba448fda36a0fa3fce73ebc.png