WPF布局控件之Grid

最新推荐文章于 2024-08-05 15:06:28 发布

逍遥ovo

最新推荐文章于 2024-08-05 15:06:28 发布

阅读量1.9k

点赞数

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

本文链接：https://blog.csdn.net/m0_56651882/article/details/129249776

版权

WPF 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Grid

在WPF项目，Grid是WPF中默认的布局控件。在MainWindow.xaml中能够看到。

在这里插入图片描述

Grid的英文意思是网格、方格。在WPF中，也是这个意思。可以使用<Grid.RowDefinitions></Grid.ColumnDefinitions>和 <Grid.ColumnDefinitions></Grid.ColumnDefinitions> 来设置其网格属性。如下：

在这里插入图片描述

<Window x:Class="LearnLayout.GridWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="GridWin" Height="450" Width="800">
    <Grid>
		<Grid.RowDefinitions>
			<!--第一行-->
			<RowDefinition/>
			<!--第二行-->
			<RowDefinition/>
			<!--第三行-->
			<RowDefinition/>
			<!--第四行-->
			<RowDefinition/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<!--第一列-->
			<ColumnDefinition/>
			<!--第二列-->
			<ColumnDefinition/>
			<!--第三列-->
			<ColumnDefinition/>
			<!--第四列-->
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
	</Grid>
</Window>

在上图中，网格是均匀划分的，WPF提供Height和Width属性设置宽高的比例，如下：

在这里插入图片描述

<Window x:Class="LearnLayout.GridWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="GridWin" Height="450" Width="800">
    <Grid>
		<Grid.RowDefinitions>
			<!--第一行-->
			<RowDefinition Height="100"/>
			<!--第二行-->
			<RowDefinition Height="*"/>
			<!--第三行-->
			<RowDefinition Height="2*"/>
			<!--第四行-->
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<!--第一列-->
			<ColumnDefinition Width="200"/>
			<!--第二列-->
			<ColumnDefinition Width="2*"/>
			<!--第三列-->
			<ColumnDefinition Width="3*"/>
			<!--第四列-->
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>
	</Grid>
</Window>

以Width为例：

Width="200"：常数，200pixel；
Width="2*"：根据比例划分。示例中，2*+3*=5*，即Grid的总宽度减去200pixel，剩下的分为5份，第二列占两份，第三列占3份；
Width="Auto"：暂时不占宽度，会根据放在其中的空间去自适应调整宽度，届时，第二列和第三列也会根据剩下的宽度而根据比例划分。

现在以在第四行第四列中放置一个Content="Xiaoyao" Width="200" Height="200" 的Button为例，如下：

在这里插入图片描述

<Window x:Class="LearnLayout.GridWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="GridWin" Height="450" Width="800">
    <Grid>
		<Grid.RowDefinitions>
			<!--第一行-->
			<RowDefinition Height="100"/>
			<!--第二行-->
			<RowDefinition Height="*"/>
			<!--第三行-->
			<RowDefinition Height="2*"/>
			<!--第四行-->
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<!--第一列-->
			<ColumnDefinition Width="200"/>
			<!--第二列-->
			<ColumnDefinition Width="2*"/>
			<!--第三列-->
			<ColumnDefinition Width="3*"/>
			<!--第四列-->
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>
		<Button Grid.Row="3" Grid.Column="3" Content="Xiaoyao" Width="200" Height="200"/>
	</Grid>
</Window>