WPF中的Grid网格布局

开发工具与关键技术：Visual Studio 2015、WPF
作者：黄元进
撰写时间：2019年4月24日

要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这里我定义了一个两行两列的Grid，在每一个单元格里面放置一个Button按钮。
使用XAML代码实现：

<Window x:Class="Wpf动画.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="350" Width="525">
    <!--定义网格，此处显示了网格线-->
    <Grid ShowGridLines="False">
        <!--自定义行-->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <!--自定义列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Background="DarkBlue" Foreground="LawnGreen" Content="鸣" />
        <Button Grid.Column="1" Grid.Row="1" Background="Khaki" Foreground="DarkRed" Content="の"/>
        <Button Grid.Column="2" Grid.Row="2" Background="NavajoWhite" Foreground="SkyBlue" Content="人" />
        <Button Background="ForestGreen" Foreground="Gainsboro" Grid.Column="2" Content="佐"/>
        <Button Background="Black" Content="助" Foreground="BurlyWood" Grid.Row="2"/>
    </Grid>
</Window>

在按钮里，设置了一些基础的属性，比如Background—背景色，Foreground—字体颜色，使用Grid.Column和Grid.Row两个属性来调整位置。
呈现的效果图如下：
在这里插入图片描述

WPF中的Grid网格布局

猜你喜欢