当前位置：首页 > ds >正文

wpf之Grid控件

ds 2025/8/25 5:17:25

前言

Grid是wpf中的容器控件，可将窗体分割为多行多列，每个单元格可以放置控件，在wpf中得到非常频繁的应用。

1、1行1列

默认填充满整个窗体
在这里插入图片描述

<Window x:Class="wpf之Grid.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:wpf之Grid"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800" Background="Green" ><Grid Background="Blue"   Margin=" 10" ></Grid >
</Window>

2、1行多列

在这里插入图片描述

2.1 列宽度的设置

通过Grid.ColumnDefinitions来定义Grid有多少列，每一个ColumnDefinition都代表了一列，通过Width设置列的宽度。Width=“20” 代表使用绝对值宽度20，Width="2*"代表使用剩下宽度的比例，具体计算方式为把前的数字加起来作为分母，比如本文中就是2+1+1+1=5（*前面没写数字就是代表1*，不设置宽度也代表1*），所在列前面的数字作为分子，比如本文的第2列就是2/5，最终再乘以剩余没有被使用的宽度，相当于第2列占了剩余宽度的2份，3、4、5列各占了1份。

<Window x:Class="wpf之Grid.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:wpf之Grid"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800" Background="Green" ><Grid Background="Blue"   Margin=" 10" ><Grid.ColumnDefinitions><ColumnDefinition Width="20" /><ColumnDefinition Width="2*"/><ColumnDefinition Width="1*"/><ColumnDefinition Width="*"/><ColumnDefinition /></Grid.ColumnDefinitions><TextBlock Grid.Column=" 0" Text="列1" Foreground="Red" Background="Yellow"/><TextBlock Grid.Column=" 1" Text="列2" Foreground="Red"  Background="White"/><TextBlock Grid.Column=" 1" Text="列2" Foreground="Red"  Background="White"/><TextBlock Grid.Column=" 2" Text="列3" Foreground="Red" Background="Yellow"/><TextBlock Grid.Column=" 3" Text="列4" Foreground="Red" Background="White" /><TextBlock Grid.Column=" 4" Text="列5" Foreground="Red" Background="Yellow"/></Grid >
</Window>

2.2 在每个列中添加控件

通过Grid.Column=" 0" 来指定控件占据哪一列，0代表占用第一列（索引从0开始）。

3、1列多行

在这里插入图片描述

3.1 行高度的设置

通过Grid.RowDefinitions来定义Grid有多少行，每一个RowDefinition都代表了一行，通过Height设置列的高度。Height=“20” 代表使用绝对值高度20，Height="2*"代表使用剩下高度的比例，具体计算方式为把前的数字加起来作为分母，比如本文中就是2+1+1+1=5（*前面没写数字就是代表1*，不设置宽度也代表1*），所在列前面的数字作为分子，比如本文的第2列就是2/5，最终再乘以剩余没有被使用的高度，相当于第2行占了剩余高度的2份，3、4、5行各占了1份。

<Window x:Class="wpf之Grid.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:wpf之Grid"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800" Background="Green" ><Grid Background="Blue"   Margin=" 10" ><Grid.RowDefinitions  ><RowDefinition  Height ="20" /><RowDefinition Height="2*"/><RowDefinition Height="1*"/><RowDefinition Height="*"/><RowDefinition /></Grid.RowDefinitions><TextBlock Grid.Row =" 0" Text="行1" Foreground="Red" Background="Yellow"/><TextBlock Grid.Row=" 1" Text="行2" Foreground="Red"  Background="White"/><TextBlock Grid.Row=" 1" Text="行2" Foreground="Red"  Background="White"/><TextBlock Grid.Row=" 2" Text="行3" Foreground="Red" Background="Yellow"/><TextBlock Grid.Row=" 3" Text="行4" Foreground="Red" Background="White" /><TextBlock Grid.Row=" 4" Text="行5" Foreground="Red" Background="Yellow"/></Grid >
</Window>

3.2 在每个行中添加控件

通过Grid.Row==" 0" 来指定控件占据哪一行，0代表占用第一行（索引从0开始）。

4、多行多列

在这里插入图片描述
下面的代码中同时通过Grid.RowDefinitions 设置多行、Grid.ColumnDefinitions 设置多列，然后再通过给子控件TextBlock的 Grid.Row选择控件应该放置在哪一行，Grid.Column选择控件应该放置在哪一列。比如行2列2它的Grid.Row和Grid.Column都是1（索引从0开始）。

<Window x:Class="wpf之Grid.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:wpf之Grid"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800" Background="Green" ><Grid Background="Blue"   Margin=" 10" ><Grid.RowDefinitions  ><RowDefinition  Height ="20" /><RowDefinition Height="1*"/></Grid.RowDefinitions><Grid.ColumnDefinitions   ><ColumnDefinition Width  ="200" /><ColumnDefinition Width="1*"/></Grid.ColumnDefinitions><TextBlock Grid.Row =" 0" Grid.Column="0"  Text="行1列1" Foreground="Red" Background="Yellow"/><TextBlock Grid.Row=" 1" Grid.Column="0"  Text="行2列1" Foreground="Red"  Background="White"/><TextBlock Grid.Row=" 0" Grid.Column="1"  Text="行1列2" Foreground="Red"  Background="White"/><TextBlock Grid.Row=" 1" Grid.Column="1"  Text="行2列2" Foreground="Red" Background="Yellow"/></Grid >
</Window>