WPF编程基础入门 ——— 第三章 布局（七）布局面板Grid

• • WPF——Grid布局控件
  • • Grid简单实例——按钮排列
    • Grid简单实例——登录界面
    • Grid特征——从结构中分离布局
    • Grid特征——尺寸模型
    • Grid特征——共享尺寸组
    • Grid特征——跨越行和列
    • Grid特征——GridSplitter
  • 本章小结

尽管上一篇讲解的UniformGrid能够布局统一单元格，但是很多布局中需要构建单元格大小不等，具有跨越式单元格(Span Cells) 和空白列等功能。而Grid能实现上述这些功能，它是一个使用灵活、能构建复杂UI的布局控件。
Grid最简单的用法是通过设置RowDefinitions和ColumnDefinitions属性定义单元格的总数。其中，RowDefinitions指行数，ColumnDefinitions指列数。添加子元素时，使用Grid.Row和Grid.Column附加属性设定子元素在单元格中的位置。

此例设计要求：现在使用Grid布局控件来布局6个Button，单元格排列3行2列。
说了好多实例了，这次总算可以用默认的Grid布局了
依旧是在解决方案WpfApp3新建项目：命名项目名字GridButton6。
XAML代码如下：

    
        
            
            
            
        
        
            
            
        
        One
        Two
        Three
        Four
        Five
        Six
    

效果图
此例中，调节窗口大小时，Button大小随着窗口的变化而变换。

在很多应用程序中都会有登录页面的设计，在此，作为一个Grid实例。
设计要求：现在使用Grid布局控件来设计一个简单的登录界面，使用多种控件。
依旧是在解决方案WpfApp3新建项目：命名项目名字GridLogin。
XAML代码如下：

效果图
该登录页面含有两个TextBlock、两个TextBox和两个Button，共有6个子元素。当窗口大小变化时，页面子元素会随着窗口的大小动态调整。
上面的两个实例显示了基本的Grid布局网格的用法，但并没有充分体现Grid的重要特征。

前面讲到的WPF布局面板，都是通过改变元素的声明顺序来改变布局结构，因为声明顺序不同，所以布局结构也会不同。WPF除Grid以外的布局面板，首先，将布局面板融入可视化树中，便于调用布局算法。然后，根据声明子控件声明的顺序，设定布局结构。
Grid能从结构中分离布局，指的是不依赖子元素的声明顺序来改变布局结构。因为子元素可以通过两个附加属性进行定位。
重新设计以上做好GridButton6项目，对6个Button通过设置Grid.Row和Grid.Column两个附加属性值，让页面显示与Button的定义顺序相反。
XAML代码如下:

        One
        Two
        Three
        Four
        Five
        Six
    

效果图
运行上述代码所显示的效果而言，6个Button布局效果与Button定义顺序相反，是通过设置附加属性Grid.Row和Grid.Column的值来改变Button的输出。
我们再给一个UniformGrid的示例对比，新建项目UniformAndGrid
XAML代码如下:

效果图
通过对比发现，使用UniformGrid布局时，只能通过改变子元素定义顺序改变布局结构。Grid布局页面时，在不影响代码的情况下，通过设置Grid.Row和Grid.Column两个附加属性值，调整布局结构，这种从结构中分离布局使Grid能够创建控件结构。

在Canvas布局中,要使用元素绝对值来分割空间；而Grid引入了百分比尺寸，也就是列或行的高度能设置为星花( * )单位。星花允许行和列在按照内容尺寸或绝对尺寸分配空间后，占用网格空间的一个百分比值。
接下来理解*的用法,新建项目GridPer
XAML代码如下：

    
        
            
            
            
        
        
            
            
        
        One
        Two
        Three
        Four
        Five
        Six
    

效果图
第0行第0列的Button One的高度(Height=“50”) 是50像素，宽度(Width=“80”) 是80像素。Button Three所在行占余下空间的1/3, Button Five所在行占余下空间的2/3。还使用了Grid.Row、Grid.Column附加属性把子元素定位到单元格。在此，需要声明的是，Grid的行和列都是从0开始计数的，如果没有指定子元素的行列值，则子元素默认位于第0行第0列。
接下来更改设计，将上述代码中的Height与Width全改成星花( * )单位的XAML代码如下：

    
        
            
            
            
        
        
            
            
        
        One
        Two
        Three
        Four
        Five
        Six
    

效果图
第0行第0列的高度(Height=“1*”) 是加权百分比，表示占总数 (1+2+3=6) 中的1份，即六分之一；第1行第1列的高度占六分之二，第2行第2列的高度占六分之三。同理，可求Width宽度所占的百分比，各为二分之一。
Height属性和Width属性可以被设置成绝对值、百分比和Auto。当采用绝对值时,像素是默认单位，可省略。
设置行高或者列宽时，除了可以使用像素作为单位外，还能使用厘米(Centimeter)、英寸(Inch)和点(Point)。它们与像素之间的换算关系如下：

• 1cm = (96/2.54)pixel
• 1in = 96pixel
• 1pt = (96/72)pixel

共享尺寸组是使用Grid布局时，位于同一列的子元素具有相同的尺寸大小。若在一个窗体中，允许一组控件具有相同的尺寸,尺寸大小由最宽的那个控件来决定。
设置共享尺寸，需要两个步骤。首先，在某一列或行上设置SharedSizeGroup属性；在控件上设置 “IsSharedSizeScope = “True”” 。
演示这个效果，新建一个项目GridSSG，对位于同一窗口的4个Button实现共享尺寸。
XAML代码如下：

    
        
            
               
               
            
          
              
              
          
           One
           Two
           Three (Which is Longer)
           Four
      
    

效果图

尽管列中设置了Width= "Auto"，但是4个Button全与最宽的那个Button保持一致，因为列上设置了共享尺寸分组(SharedSizeGroup= "a"),并且在Grid中设置"Grid.IsSharedSizeScope="True""。
将代码中的“Grid.IsSharedSizeScope="True""和“SharedSizeGroup="a""去掉，运行后，页面显示效果如下土所示。*Button(Two)与Button(Four)*不再与最宽的Button保持。

前面的例子，用Grid.Row和Grid.Column附加属性把子元素定位到单元格。还可以使用另外两个附加属性Grid.RowSpan和Grid.ColumnSpan，让子元素跨越多个单元格。
下面使用Grid设计计算器的页面，新建项目GridCalculator
XAML代码如下：

    
        
            
            
            
            
            
            
        
        
            
            
            
            
        
        
        1
        2
        3
        +
        4
        5
        6
        -
        7
        8
        9
        *
        0
        .
        /
        Del
        =
    

效果图
Grid布局6行4列网格。页面是由1个TextBox、17个Button构成。
其中，代码中的Grid.Row=“0"用来设置TextBox位于第0行；Grid.ColumnSpan="4设置TextBox占据4列，即从第0列~第3列；Margin= "2,4,2,2"设置TextBox与四周边界的左、上、右、下相距四周的间隙分别是2像素、4像素、2像素、2像素。
修改上述代码中的两条语句：

   0
   Del

修改后的XAML语句：

   0
   Del

效果图
Grid.RowSpan="2"实现跨越2行。

GridSplitter是网格分割线。它支持用户在运行时编辑行或列，当用户移动分割线时，还可以改变行高列宽。在很多聊天软件的页面布局都含有分割线。
接下来，设计常用的“一上二下式”布局。新建一个项目命名为GridSplitter
该布局的上面是一个菜单栏，下面是两列网格，两列网格间是条分割线。在布局中的子元素全部用Button。
XAML代码如下：

    
         Menu 
        
            
                
                
            
            ColumnLeft
            
            ColumnRight
        
    

效果图
当程序处在运行状态下,用户可以根据需要,移动ColumnLeft与ColumnRight之间的GridSplitter(分割线).
在ColumnRight中再加上一条垂直分割线，XAML代码如下：

    
         Menu 
        
            
                
                
            
            ColumnLeft
            
            
                
                    
                    
                
                ColumnRightUp
                
                ColumnRightDown
            
        
    

效果图

分析布局结构发现，在DockPanel下是Grid，Grid下还有一个Grid。其中，语句指的是为第2个Grid命名，并使用了第一个Grid的附加属性定位；语句定义垂直分割线水平拉伸。

本章重点介绍了WPF布局原则以及布局面板中的Canvas、DockPanel、StackPanel、WrapPanel和UniformGrid的适用场合；详细介绍了Grid 从结构中分离布局、尺寸模型，共享尺寸组和跨越行列等特征，并演示了Grid的多种用法。本章中的案例涉及Windows窗口页面、用户搜索页面、用户登录页面、计算器页面及常用布局。但是布局内容远不止于此，当了解更多的控件以后，可以做出个性化的布局。在以后的章节中还会补充布局的相关知识。