WPF中的网格布局(Grid)

WPF中的网格布局(Grid)

开发工具与关键技术：Visual Studio 2015、WPF
作者：郑伟基
撰写时间：2019年4月14号

在外面用Grid来做最外层布局，是以表格的形式来表现布局元素的，它可以把每一个控件都可以清晰的放在每个事先定义好的小格子里面，可以整齐配列。要使用Grid布局，首先要向RowDefinitions(定义行)和CoumnDefinitions(定义列)属性中添加一定数量的RowDefinitions和CoumnDefinitions元素，定多少行和列就写多少个，从而定义行数和列数。还可以在网格布局里面放置其他的布局元素。
见下面的XAML代码：

<!--网格布局-->
<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="20*"></RowDefinition>
        <RowDefinition Height="20*"></RowDefinition>
        <RowDefinition Height="20*"></RowDefinition>
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20*"></ColumnDefinition>
        <ColumnDefinition Width="20*"></ColumnDefinition>
        <ColumnDefinition Width="20*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Content="红色" FontFamily="华文行楷" FontSize="50" Background="Red"/>
    <Button Grid.Row="1" Grid.Column="1" Content="绿色" FontFamily="华文行楷" FontSize="50" Background="LawnGreen"/>
    <Button Grid.Row="2" Grid.Column="2" Content="紫色" FontFamily="华文行楷" FontSize="50" Background="Violet"/>
</Grid>

在上面的代码中看到RowDefinitions可以用Height(行高)来分高度，有三种分行高的按比例(20*)、绝对数值(具体数字)、自动(Auto)，可以在定义好的格子里面放各种需要的控件和图片。
下面是用三个按钮来分布在其中的三个格子中，可以在格子放任意的控件和其他的，我放了三个按钮在里面，见下面的效果图：

在网格里面还可以放置其他的布局，网格布局的好处在于布局出来的样式比较整齐，布局出来的是固定大小的，所有我们假如做主页面的话可以用网格布局。