WPF的容器控件之Gird

WPF的容器控件之Gird

Grid顾名思义就是“网格”，以表格形式布局元素，对于整个面板上的元素进行布局，它的子控件被放在一个一个事先定义好的小格子里面，整齐配列。 Grid和其他各个Panel比较起来，功能最多也最为复杂。要使Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单 元格中，所以布局起来就很精细了。 列宽和行高，分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。
Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。与Canvas一样，同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。
Grid面板将元素分割到不可见的行列网格中。尽管可以在一个单元格中放置多个元素（这时这些元素会相互重叠），但在每个单元格中只放置一个元素通常更合理。当然，在Grid单元格中的元素本身也可能是另一个容器，该容器组织它所包含的一组控件。

将主窗口划分为四个等分的部分，并各自显示不同的颜色

注意wpf中从0行0列开始。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border  Background="Red"/>
        <Border Grid.Row="1" Background="Yellow"/>
        <Border Grid.Column="1" Background="Blue"/>
        <Border Grid.Row="1" Grid.Column="1" Background="Green"/> 
 </Grid>

效果如下：

修改行与列的尺寸

自动适应

<Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
</Grid.RowDefinitions>

高度根据界面元素进行自适应。

由于窗口没有元素，自适应导致第一行高度被隐藏。可通过添加一个元素修改，如添加一个button。

<Button Width="100" Height="50"/>

添加button代码段位置如下：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Button Width="100" Height="50"/>

        <Border  Background="Red"/>
        <Border Grid.Row="1" Background="Yellow"/>
        <Border Grid.Column="1" Background="Blue"/>
        <Border Grid.Row="1" Grid.Column="1" Background="Green"/>
</Grid>

自适应以元素最大值为标准，例如：

<Button Width="100" Height="50"/>
<Button Width="100" Height="100"/>

绝对尺寸

<Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
</Grid.RowDefinitions>

将高度设置为绝对值100。

按照比例

<Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition/>
</Grid.RowDefinitions>

将第一行高度设置为第二行的两倍。

元素跨行与跨列

默认情况下，元素在第一行第一列。

让元素占两列空间

<Border  Background="Red" Grid.ColumnSpan="2"/>

让元素占两行空间

<Border  Background="Red" Grid.ColumnSpan="2" Grid.RowSpan="2"/>