WPF入门2：Grid网格布局

最新推荐文章于 2024-05-22 19:32:25 发布

黄瓜炒鸡蛋emm

最新推荐文章于 2024-05-22 19:32:25 发布

阅读量2.1k

点赞数

分类专栏： WPF 文章标签： wpf

原文链接：http://www.bilibili996.com/Course?id=5070796000084

版权

WPF 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

转载源小宅博客：http://www.bilibili996.com/Course?id=5070796000084

一.Grid:

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单元格中的元素本身也可能是另一个容器，该容器组织它所包含的一组控件。

注意：尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。

1.Grid基础效果：

在这里插入图片描述
代码：

<Window x:Class="WPFDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" Margin="50,50,50,50">
        <Button Content="按钮" HorizontalAlignment="Left" Margin="50,40,0,0" VerticalAlignment="Top" Width="240" Height="100" FontSize="20" FontWeight="Bold"></Button>
        <!--<Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="787*"/>
        </Grid.ColumnDefinitions>-->
    </Grid>
</Window>

2.Grid跨行跨列：

Row,Column：
在这里插入图片描述

代码：

<Window x:Class="WPFDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid >
        <!--格子Row,Column布局0，1，2-->
        <Rectangle Grid.Row="1" Grid.Column="1" Width="100" Height="100" Fill="Blue"></Rectangle>
        <Grid.RowDefinitions> 
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

RowSpan,ColumnSpan:

在这里插入图片描述

代码：

<Window x:Class="WPFDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid >
        <!--格子RowSpan,ColumnSpan布局1，2，3-->
        <!--这里发现<1和〉3和1，3效果相同-->
        <Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="2" Width="100" Height="100" Fill="Blue"></Rectangle>
        <Grid.RowDefinitions> 
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

3.使用GridSplitter分割窗口：

在这里插入图片描述

代码：

<Window x:Class="WPFDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid ShowGridLines="True" Margin="0,0,0,1">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="5">LeftTop</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="5,5,-50,5">RightTop</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="5">LeftBottom</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="5,5,-50,5">RightBottom</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="30" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
    </Grid>
</Window>

4.UniformGrid：均布网格

在这里插入图片描述

代码：

<Window x:Class="WPFDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid ShowGridLines="True" Margin="0,0,0,1">
        <UniformGrid Rows="2" Columns="2">
            <Button>第一个（0，0）</Button>
            <Button>第二个（0，1）</Button>
            <Button>第三个（1，0）</Button>
            <Button>第四个（1，1）</Button>
        </UniformGrid>
    </Grid>
</Window>