Grid控件

Grid控件是WPF布局容器中功能最强大、最灵活的控件。Grid控件基本上能够完成其他WPF容器控件所能完成的功能，Microsoft建议大多数界面的布局都使用Grid控件来实现，因此默认情况下。vs会自动在XAML文件中添加

<Grid>元素的声明。

 

创建Grid控件

　　创建一个基于Grid的布局需要两个步骤

　　1.定义Grid控件的行和列，用于放置子元素。

　　2.在为每个子元素指定Grid.Row和Grid.Column附加属性，将元素放置在合适的位置。 

为了创建Grid的行列，需要使用Grid.ColumnDefinitions和Grid.RowDefinitions这两个集合属性。

下面创建一个GridDemo的WPF项目，来演示如何使用Grid控件添加行和列。

    <Grid ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <!--~定义3列-->
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!--~定义3行-->
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>  

    </Grid>

注意：ShowGridLines只是为了便于调试Grid控件，最好不要用在发布的应用程序上面。

由于此处没有为ColumnDefinitions和RowDefinitions指定任何尺寸，因此默认情况下，Grid将会平均分配行列的宽度和高度。

 

调整行列尺寸

　　ColumnDefinitions和RowDefinitions 分别定义了一个用于调整其尺寸的属性，可以从下图看到默认情况下，这两个属性都被指定了一个*号。对于ColumnDefinitions来说，主要是

设置其Width属性指定没一列的宽度，对于RowDefinitions主要是设置Heigt属性指定行的高度。与其他控件的尺寸设置不同的是，Grid控件支持如下3种尺寸设置策略。

　　1绝对尺寸：指定精确的设备无关单位的大小。比如，想要让行指定为100个设备无关单位的高度，则可以使用如下的代码

　　<RowDefinitions height="100" /> 

绝对尺寸在Grid中通常较少，因为一经指定，便不能根据内容大小的改变而灵活的伸缩。

　　注意：如果确实需要指定某些控件的大小，可以使用Margin属性。该属性将相对于网格的边缘进行调整控件的大小。

 

　　2自动内容尺寸:Grid尺寸的变化将基于行或者列中的子元素的内容而定，在XAMl中，通常使用Auto来进行设定，代码如下：

　　<RowDefinitions height="AUTO" />

　　3按比例分配剩余空间：这些默认设置，通常使用*、1*、2*等样式来指定，按比例分配空间是指，当使用精确尺寸分配或自动内容尺寸分配后，所剩余的空间如何进行分配。

这是一个相对单位，默认是*（一个星号）。表示将获取所有剩余空间。当有两个列都设置为*时，其将按比例个一半进行空间分配。如果为一列指定2*，另一个列指定*，则将

剩余的空间分为3份，其中，2*的列将占用2/3的空间，而*的则占用1/3的空间，代码如下

 

    <Grid ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <!--~定义3列-->
            <ColumnDefinition />
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <!--~定义3行-->
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
            <RowDefinition  Height="3*"/>
        </Grid.RowDefinitions>  

    </Grid>

 

编程创建Grid控件

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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.Navigation;
using System.Windows.Shapes;

namespace WpfApplication8
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
           this.Content= CreadteGrid();
        }
        public Grid CreadteGrid()
        {
            Grid gr = new Grid();  //首先实例化一个Grid
            RowDefinition row1 = new RowDefinition(); //创建第一行，行的height和列的Width都是GridLength类型的对象。该对象有三个重载
            //构造函数，分别对应到Grid空间志存模式。这里使用GridUnitType.Star来指定尺寸单位，star在XAMl中就是一个*号；
            row1.Height = new GridLength(1,GridUnitType.Star);
            gr.RowDefinitions.Add(row1);  //行row1添加到Grid面板中
            RowDefinition row2 = new RowDefinition();    //定义第二行
            //这里使用GridLength的静态方法来指定自动内容适应
            row2.Height = GridLength.Auto;
            gr.RowDefinitions.Add(row2);  //添加第二行
            TextBox tb = new TextBox();
            tb.Text = "这是一个对话窗口,RowDefinitons的height属性被设置为* 那么textbox将占用剩余空间";
            tb.TextWrapping = TextWrapping.Wrap;   //文本换行操作
            Grid.SetRow(tb,0);   //使用Grid控件的附加属性设置textbox控件在Grid中的位置 
            Grid.SetColumn(tb,0);        
            gr.Children.Add(tb);     //添加元素到grid中

            StackPanel stk = new StackPanel();    //创建stackpanel对象
            //设置Stackpanel方向
            stk.Orientation = Orientation.Horizontal;
            //设置Stackpanel水平布局
            stk.HorizontalAlignment = HorizontalAlignment.Right;
            //设置Stackpanel在grid0列
            Grid.SetColumn(stk,0);
            Grid.SetRow(stk,1);
            gr.Children.Add(stk);
            Button btn = new Button();
            btn.Margin = new Thickness(10,10,2,10);
            btn.Content = "确定";
            btn.Padding = new Thickness(3);   //设置button 内容距离
            stk.Children.Add(btn);

            Button btn1 = new Button();
            btn1.Content = "取消";
            btn1.Margin = new Thickness(2,10,10,10);
            btn1.Padding = new Thickness(3);
            stk.Children.Add(btn1);
            return gr;     //返回新创建的Grid对象
        }

 

下面分析一下这段代码的实现。

　　1.首先实例化一个Grid对象，接下来实例化RowDefinitions对象，该对象的height属性与ColumnDefinitions类似，是一个GridLength结构类型，为了给行和列设置尺寸

需要调用GridLength的构造函数来实例化对象。

　　GridLength结构的两种构造函数如下。

　　　　GridLength（Double）：使用指定的绝对值，朱世华GridLength结构的新实例。

　　　　GridLength（Double，GridunitType）：初始化GridLength结构的新实例并指定它包含何种类型的值。

　　　　　　如：为了给行指定100像素固定的高度

　　　　　　row1.height=new GridLength（100）；也可以显示的指定其单位类型row1.height=new GridLength(100,GridUnitType.pixel)

　          GridUnitType枚举用于描述GridLength的单位类型，具有如下几种可选值

　　　　　　Auto：大小有内容对象的大小决定。

　　　　　　Pixel：该值表示为像素。

　　　　　　Star：该值表示为可用空间的比例。*号

　　注意：GridUnitType.Star通常是搭配使用的，如果为一行指定了33*，那么最好具有另外一个使用67*的单位，这样将会为剩余空间中的第一行

分配33%的空间，而另一行分配67%的空间。

2.创建了RowDefinition对象并指定其单位后，需要将其添加到Grid控件的RowDefinitions集合中，可以调用Grid.RowDefinitions.add方法来完成。

3.接下来创建放置在GridView控件中的子元素，必须使用Grid.setRow和Grid.SetColumn来设置元素将要放置的行、列位置，Grid.SetRow和Grid.SetColumn是Grid的

两个静态方法，用来设置附加属性。

 

合并行和列

　　除了可以将一个控件放在一个单元格之外，也可以使用Grid控件的两个附加属性RowSpan和ColumnSpan将一个控件跨越多个行，形成合并行列的效果，

    <Grid ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <!--~在第1列 等0行显示一个文本块，并且使其跨越4列-->
        <TextBlock Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" TextWrapping="Wrap" >请输入名称、文件夹/wendang huozhe   internet资源，windows将会打开该资源</TextBlock>
        <!--~创建一个Image对象来显示图像放置在0行0列  跨越2行-->
        <Image Source="C:\Users\Administrator\Desktop\ASCL码.jpg" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
        <!--~在第2行第1列 放置一个textbox控件用来显示一个文本框该文本框跨越5列-->
        <TextBox Grid.Column="1" Grid.Row="2" Text="请在此输入信息......" Grid.ColumnSpan="5"   Name="tb" MouseEnter="tb_MouseEnter"  MouseLeave="tb_MouseLeave" />
        <!--~在第4行的不同的列中分别放置3个按钮-->
        <Button Content="确定" Grid.Row="4" Grid.Column="2" />
        <Button Content="取消" Grid.Row="4" Grid.Column="3" />
        <Button Content="浏览.." Grid.Column="4" Grid.Row="4" />
    </Grid>

　　下面来分析下代码的实现

　　　　1.首先定义一个5列4行的Grid控件，接下来在第2行第1列放置了一个TextBlock子元素。在TextBlock中，使用了一个附加属性Grid.ColumnSpan，将该属性指定为4表示将从指定

的列开始跨越后面的4列，textBlock位于第2列，因此跨度为从第2列开始一直到最后一列。

　　　　2.定义一个Image对象来显示一副图片，该对象位于第1列第1行，并使用Grid.RowSpan指定其跨度为跨越2行，那么图片将显示在第一列，并从第1列开始跨越到第2列的第一行。

　　　　3.定义一个文本框对象，并指定Grid.ColumnSpan属性值为5.该对象将从第2行第二列开始，跨越5列。

　　　　4.在第4行的第3.4.5列分别放置一个按钮。

窗体分割

　　

　　在Grid中，通过使用GridSpliter控件，可以为布局添加一个窗体分割条，使布局可以由用户来调整其大小。GridSplitter必须放置在Grid控件中，该控件使用户可以调整

Grid中的行列的大小。在使用GridSplitter之前，有如下几点需要调整

• 　　GridSplitter控件必须放置在一个Grid列中，可以与已经存在的内容刚在一起。为了防止覆盖已存的内容，需要调整其Margin属性。通常建议在一个特定的行列中放置GridSplitter

并且行列的高度和宽设置为Auto。

　　Gridsplitter控件将总是调整整个列或行的尺寸，而不是特定的单元格，例如