WPF---Grid布局讲解

最新推荐文章于 2025-04-10 13:37:38 发布
最新推荐文章于 2025-04-10 13:37:38 发布
阅读量2.2k 收藏 2
点赞数 1
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41883890/article/details/126153895
版权

Grid面板

网格面板是所有面板中最复杂但用途最广泛的面板。网格面板可用于设计复杂的用户界面，我们需要将多个元素以行和列的表格格式放置。

XAML 中的 Grid 元素表示一个 Grid 面板。以下代码片段创建一个 Grid 元素并设置其背景、宽度、高度、垂直和水平对齐属性。

在这里插入图片描述
Grid属性

网格具有三个主要属性，RowDefinitions、ColumnDefinitions 和 ShowGridLines。RowDefinitions 属性是 RowDefinitions 的集合。ColumnDefinitions 属性表示 ColumnDefinition 的集合。ShowGridLines 属性确定 Grid 面板的网格线是否可见。

创建Grid

格 XAML 中的 Grid 元素表示 WPF 网格控件。下面的代码片段创建一个 Grid 控件，设置它的宽度和前景色，并确保网格线可见。

<Grid Name=“MCGrid” Width=“400” Background=“LightSteelBlue” ShowGridLines=“True” >
ColumnDefinitions 属性用于添加列，RowDefinitions 属性用于将行添加到 Grid。以下代码片段将三列和三行添加到网格中。

<Grid.ColumnDefinitions>



</Grid.ColumnDefinitions>
<Grid.RowDefinitions>



</Grid.RowDefinitions>
WPF 中的任何控件都可以使用其 Grid.Row 和 Grid.Column 属性放置在网格中，这些属性表示控件将放置在哪一列和哪一行。行和列的值以 0 开头。这意味着，如果有网格中的三列，第一列将由数字 0 表示。下面的代码片段将 TextBlock 控件放在第二行第三列的单元格中。



<Grid.ColumnDefinitions>



</Grid.ColumnDefinitions>
<Grid.RowDefinitions>



</Grid.RowDefinitions>

WPF中的Grid类表示一个 Grid 控件。以下代码片段创建了一个 Grid 控件，设置它的宽度、水平对齐、垂直对齐并显示网格线并设置背景颜色。

Grid DynamicGrid = new Grid();
DynamicGrid.Width = 400;
DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;
DynamicGrid.VerticalAlignment = VerticalAlignment.Top;
DynamicGrid.ShowGridLines = true;
DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);
代码片段将三列和三行添加到Grid。

// Create Columns
ColumnDefinition gridCol1 = new ColumnDefinition();
ColumnDefinition gridCol2 = new ColumnDefinition();
ColumnDefinition gridCol3 = new ColumnDefinition();
DynamicGrid.ColumnDefinitions.Add(gridCol1);
DynamicGrid.ColumnDefinitions.Add(gridCol2);
DynamicGrid.ColumnDefinitions.Add(gridCol3);

// Create Rows
RowDefinition gridRow1 = new RowDefinition();
gridRow1.Height = new GridLength(45);
RowDefinition gridRow2 = new RowDefinition();
gridRow2.Height = new GridLength(45);
RowDefinition gridRow3 = new RowDefinition();
gridRow3.Height = new GridLength(45);

DynamicGrid.RowDefinitions.Add(gridRow1);
DynamicGrid.RowDefinitions.Add(gridRow2);
DynamicGrid.RowDefinitions.Add(gridRow3);
将行和列添加到 Grid 后，您可以使用 SetRow 和 SetColumn 方法将任何内容添加到 Grid 单元格。SetRow 和 SetColumn 方法将第一个参数作为控件名称，将第二个参数分别作为行号和列号。清单 4 中的以下代码片段创建一个 TextBlock 控件并将其显示在代表 Grid 的第一行和第一列的 Cell(0,0) 中。

// Add first column header
TextBlock txtBlock1 = new TextBlock();
txtBlock1.Text = “Author Name”;
txtBlock1.FontSize = 14;
txtBlock1.FontWeight = FontWeights.Bold;
txtBlock1.Foreground = new SolidColorBrush(Colors.Green);
txtBlock1.VerticalAlignment = VerticalAlignment.Top;
Grid.SetRow(txtBlock1, 0);
Grid.SetColumn(txtBlock1, 0);
完整的代码。

private void CreateDynamicWPFGrid()
{
// Create the Grid
Grid DynamicGrid = new Grid();
DynamicGrid.Width = 400;
DynamicGrid.HorizontalAlignment = HorizontalAlignment.Left;
DynamicGrid.VerticalAlignment = VerticalAlignment.Top;
DynamicGrid.ShowGridLines = true;
DynamicGrid.Background = new SolidColorBrush(Colors.LightSteelBlue);

// Create Columns   
ColumnDefinition gridCol1 = new ColumnDefinition();  
ColumnDefinition gridCol2 = new ColumnDefinition();  
ColumnDefinition gridCol3 = new ColumnDefinition();  
DynamicGrid.ColumnDefinitions.Add(gridCol1);  
DynamicGrid.ColumnDefinitions.Add(gridCol2);  
DynamicGrid.ColumnDefinitions.Add(gridCol3);  

// Create Rows   
RowDefinition gridRow1 = new RowDefinition();  
gridRow1.Height = new GridLength(45);  
RowDefinition gridRow2 = new RowDefinition();  
gridRow2.Height = new GridLength(45);  
RowDefinition gridRow3 = new RowDefinition();  
gridRow3.Height = new GridLength(45);  
DynamicGrid.RowDefinitions.Add(gridRow1);  
DynamicGrid.RowDefinitions.Add(gridRow2);  
DynamicGrid.RowDefinitions.Add(gridRow3);  

// Add first column header   
TextBlock txtBlock1 = new TextBlock();  
txtBlock1.Text = "Author Name";  
txtBlock1.FontSize = 14;  
txtBlock1.FontWeight = FontWeights.Bold;  
txtBlock1.Foreground = new SolidColorBrush(Colors.Green);  
txtBlock1.VerticalAlignment = VerticalAlignment.Top;  

Grid.SetRow(txtBlock1, 0);  
Grid.SetColumn(txtBlock1, 0);  
// Add second column header   
TextBlock txtBlock2 = new TextBlock();  
txtBlock2.Text = "Age";  
txtBlock2.FontSize = 14;  
txtBlock2.FontWeight = FontWeights.Bold;  
txtBlock2.Foreground = new SolidColorBrush(Colors.Green);  
txtBlock2.VerticalAlignment = VerticalAlignment.Top;  
Grid.SetRow(txtBlock2, 0);  
Grid.SetColumn(txtBlock2, 1);  

// Add third column header   
TextBlock txtBlock3 = new TextBlock();  
txtBlock3.Text = "Book";  
txtBlock3.FontSize = 14;  
txtBlock3.FontWeight = FontWeights.Bold;  
txtBlock3.Foreground = new SolidColorBrush(Colors.Green);  
txtBlock3.VerticalAlignment = VerticalAlignment.Top;  
Grid.SetRow(txtBlock3, 0);  
Grid.SetColumn(txtBlock3, 2);  

 Add column headers to the Grid   

DynamicGrid.Children.Add(txtBlock1);  
DynamicGrid.Children.Add(txtBlock2);  
DynamicGrid.Children.Add(txtBlock3);  

// Create first Row   

TextBlock authorText = new TextBlock();  
authorText.Text = "Mahesh Chand";  
authorText.FontSize = 12;  
authorText.FontWeight = FontWeights.Bold;  
Grid.SetRow(authorText, 1);  
Grid.SetColumn(authorText, 0);  
TextBlock ageText = new TextBlock();  
ageText.Text = "33";  
ageText.FontSize = 12;  
ageText.FontWeight = FontWeights.Bold;  
Grid.SetRow(ageText, 1);  
Grid.SetColumn(ageText, 1);  
TextBlock bookText = new TextBlock();  
bookText.Text = "GDI+ Programming";  
bookText.FontSize = 12;  
bookText.FontWeight = FontWeights.Bold;  
Grid.SetRow(bookText, 1);  
Grid.SetColumn(bookText, 2);  

// Add first row to Grid   
DynamicGrid.Children.Add(authorText);  
DynamicGrid.Children.Add(ageText);  
DynamicGrid.Children.Add(bookText);  

// Create second row   
authorText = new TextBlock();  
authorText.Text = "Mike Gold";  
authorText.FontSize = 12;  
authorText.FontWeight = FontWeights.Bold;  
Grid.SetRow(authorText, 2);  
Grid.SetColumn(authorText, 0);  
ageText = new TextBlock();  
ageText.Text = "35";  
ageText.FontSize = 12;  
ageText.FontWeight = FontWeights.Bold;  
Grid.SetRow(ageText, 2);  
Grid.SetColumn(ageText, 1);  

bookText = new TextBlock();  
bookText.Text = "Programming C#";  
bookText.FontSize = 12;  
bookText.FontWeight = FontWeights.Bold;  
Grid.SetRow(bookText, 2);  
Grid.SetColumn(bookText, 2);  

// Add second row to Grid   
DynamicGrid.Children.Add(authorText);  
DynamicGrid.Children.Add(ageText);  
DynamicGrid.Children.Add(bookText);  

// Display grid into a Window   
RootWindow.Content = DynamicGrid;

}
管理列宽和行高

ColumnDefinition 具有三个属性，用于管理网格中列的宽度。这些属性是 Width、MaxWidth 和 MinWidth。Width 属性表示列的宽度。MaxWidth 和 MinWidth 用于设置列的最大和最小宽度。

RowDefinition 具有三个属性，用于管理 Grid 中行的高度。这些属性是高度、最大高度和最小高度。Height 属性表示行的高度。MaxHeight 和 MinHeight 用于设置行的最大和最小高度。

代码在设计时使用 XAML 设置 Grid 面板中的列宽和行高。


<Grid.ColumnDefinitions>



</Grid.ColumnDefinitions>
<Grid.RowDefinitions>






</Grid.RowDefinitions>

的 Background 属性设置 Grid 的背景颜色。下面的代码使用线性渐变画笔来绘制网格的背景。

<Grid.Background>






</Grid.Background>
在这里插入图片描述
将图像设置为网格的背景

要将图像设置为网格的背景，我们可以将图像设置为网格的背景。以下代码片段将 Grid 的背景设置为图像。该代码还设置了图像的不透明度。

<Grid.Background>

</Grid.Background>
在这里插入图片描述

WPF--布局（代码讲解）
w_g_y123456的博客
12-20 503
布局通用属性 所有布局面板都由System.Windows.Controls.Panel抽象类派生。 panel就是所有布局元素的基类，这个抽象类包含三个公共属性：Background、Children、IsItemHost（IsItemHost标志着控件是不是类似TreeView、ListView这样的控件）。 其中： Background：如果想接收鼠标事件，就必须将属性设置为非空值，（如果想接收鼠标事件，又不希望显示固定颜色的背景，那么只需要将背景色设置为透明即可），一般设置鼠标事件时，系统会自动设
Xaml技术：浅谈Grid.ColumnDefinitions和Grid.RowDefinitions属性
谢灿的软件开发技术交流博客
08-04 1万+
浅谈Grid.ColumnDefinitions和Grid.RowDefinitions属性,当指定的行或列的值大于Grid的单元格数量时，系统默认为最后一个
WPF学习笔记
蒋劲豪的博客
02-14 367
设置3行3列，会平均分配。一般用来修饰部分空，一般是垂直居中的水平。默认是贴着上面水平，会自动换行。最后一个元素会填充剩余的空间。第一行的高度是第二行的2倍。
一文读懂WPF布局
最新发布
Marzlam的博客
04-10 1221
注意：UniformGrid 没有内置的 Spacing 属性，需通过子元素的 Margin 或容器的 Padding 实现间距3。
wpf Grid布局
01-04
wpf Grid布局 简单介绍Grid布局控件的基本属性
使用Grid来对WPF页面进行布局排版
蝈蝈俊.net
08-17 8877
       对于以前用 Windows Form 来开发客户端程序的程序员，在使用 WPF 开发客户端的程序时，在窗体布局上将是他必须面对的一个坎。       布局产生困惑的一个典型场景如下：       我们在开发WPF窗体时候，我们会发现，当我们把菜单控件(Menu)、工具条（ToolBar、ToolBarPanel）、状态条（StatusBar）这些最常见的页面元素拖动到WPF窗
WPF布局控件之Grid布局
qq_36819973的博客
11-10 4096
Grid控件常用于界面表格网格的布局，Grid和其他各个Panel比较起来，功能最多也最为复杂。同时此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置。
WPF Grid布局
weixin_33842328的博客
09-07 182
本节讲述布局，顺带加点样式给大家看看~单纯学布局，肯定是枯燥的~哈哈 那如上界面，该如何设计呢？ 1、一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等。如上这种布局，在子元素数量未知的情况下，我们应该使用WrapPanel或者StackPanel来布局，子元素会自己换行。 2、然后每一行的元素中，第一个要居左，第...
WPF(Grid与布局）
weixin_34185512的博客
04-03 150
<Window x:Class="TestOfGridLayout.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Ti...
WPF-4-unleashed PDF 原书
05-04
接着，书中的章节会深入讨论控件和布局管理，涵盖各种内置控件的用法，如Button、TextBox、ListBox等，以及如何通过Grid、StackPanel和DockPanel等布局容器来组织这些控件。此外，还会讲解自定义控件和用户控件的...
WPF-一个简单登录界面
12-13
本教程将通过一个简单的登录界面实例，深入讲解如何使用WPF进行开发。 ### 1. 创建新项目 首先，打开Visual Studio并创建一个新的WPF应用程序项目。在解决方案资源管理器中，你会看到`MainWindow.xaml`，这是默认...
WPF经典教程之Grid、UniformGrid布局
10-05
Grid UniformGrid容器 一、Grid Grid是以表格形式组织控件的一种布局方式，与Java AWT中的GridLayout类似，但区别在于..... 更多WPF资源：http://cleopard.download.csdn.net/
Pro-WPF-Chapter21-30.rar_C# EDI
09-19
本章涵盖了各种WPF控件的使用，如按钮、文本框、列表视图等，以及不同的布局系统（如StackPanel、Grid、DockPanel等），阐述了如何组织和管理用户界面元素。 4. **第24章：路由事件和命令** 讲解了WPF中的事件...
WPF-Samples.zip
04-08
6. **布局系统**: WPF的布局系统包括Grid、StackPanel、Canvas等，它们负责管理UI元素的位置和大小，适应不同屏幕尺寸和设备方向。 **案例分析** 在“WPF-Samples”中，你将找到一系列精心设计的示例，涵盖以下...
WPF篇（1）-Grid控件（网格布局）
一个人的江湖
08-05 1418
Grid控件绝对是WPF中所有布局控件中最好用的一个，因为它自适应屏幕的宽度，最关键的一点是，它在呈现时，其ActualWidth实际宽度和ActualHeight实际高度会有一个计算值，我们在业务开发中，有时候要根据父控件的实际宽度和高度来计算子控件的呈现位置和大小。
WPF入门2：Grid网格布局
黄瓜炒鸡蛋的博客
02-16 2297
WPF入门2：Grid网格布局
WPFGrid布局
weixin_43826111的博客
04-18 357
WPF中Grid布局XMAl<Grid Width="200" Height="100" ><Windowx:Class="wpfyonghukongjian.login" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://sch...
WPF:(三) Grid布局
weixin_44870681的博客
06-24 809
一：Grid Grid面板也许是最复杂的面板类型了。Grip可以包含多行多列。你可以定义每一行的高度和每一列的宽度，通过一个像素值、可用空间的百分比或者自动分配这三种方式。自动分配会根据内容自动调整行高和列宽。Grip一般用于其他面板无法实现的情形，譬如如你需要很多列而且需要联合其他面板。 在Grid中的所有控件都会被最大化，同时一个叠一个放置。这是Grid最基本的形式。 <Window x...
wpf:Grid 布局
热门推荐
张海涛
07-10 2万+
今天新学习了一下wpfBroserApplication中的Grid布局：虽然比起ASP.NET有点麻烦，但是挺容易理解的，下面我就分享一下
wpfgrid布局
04-02
<think>好的，我现在要处理用户关于WPF中Grid布局的教程和示例的问题。首先，我需要回忆一下WPF中Grid的基本用法，确保自己理解正确。Grid是WPF中常用的布局控件，可以定义行和列来排列子元素，类似于HTML中的表格。 用户提供的引用内容里有一个ListView的例子，其中用到了WrapPanel作为ItemsPanel。这可能和Grid布局不同，但用户现在需要的是Grid的具体使用方式。我需要先整理Grid的核心属性，比如RowDefinitions和ColumnDefinitions，以及如何通过附加属性在子元素中指定位置。 接下来，我应该考虑常见的Grid用法，比如定义行高和列宽。记得有几种单位，比如固定值、Auto和星号（*）比例分配。比如，RowDefinition的Height设置为"Auto"可以让行高自适应内容，而使用"*"则按比例分配剩余空间。这部分需要详细说明，因为这是Grid布局灵活的关键。 然后，我需要提供一些示例代码，展示如何定义Grid的行列，并将元素放置在特定位置。例如，在XAML中如何添加Grid，然后添加行和列的定义，再通过Grid.Row和Grid.Column附加属性将控件放在对应的单元格里。可能还需要展示跨行或跨列的示例，使用Grid.RowSpan和Grid.ColumnSpan。 此外，用户可能对Grid的其他功能感兴趣，比如对齐方式（HorizontalAlignment和VerticalAlignment）、边距（Margin）的设置，以及如何在代码动态添加控件到Grid中。这些内容可以增强教程的实用性。 需要确保示例代码语法正确，符合用户提到的系统级指令，比如使用正确的格式。同时，要检查是否有遗漏的重要功能，比如共享尺寸组（SharedSizeGroup），或者GridSplitter的使用，这些高级功能是否应该包含在教程中。考虑到用户可能刚开始学习，先集中在基础部分，如果有必要再简要提及高级用法。 最后，生成相关问题，帮助用户进一步学习。问题需要围绕Grid布局的常见疑问，比如行列定义、动态添加控件、与其他布局控件的比较等。确保问题具有针对性，能够引导用户深入理解Grid的使用。 总结步骤：介绍Grid布局的基本概念，详细讲解行列定义，提供基础示例代码，说明附加属性的使用，展示跨行跨列案例，讨论对齐和边距，动态添加控件的方法，最后生成相关问题。确保引用格式正确，并参考用户提供的引用示例中的结构。</think>### WPF Grid 布局使用教程 #### 一、Grid 布局基础 Grid 是 WPF 中通过行列结构组织子控件的布局容器，支持**动态行列定义**和**复杂对齐控制**。其核心功能通过以下属性实现： 1. **行列定义**：通过 `RowDefinitions` 和 `ColumnDefinitions` 集合定义行与列 2. **单元格定位**：子控件通过附加属性 `Grid.Row` 和 `Grid.Column` 指定位置 3. **跨单元格**：通过 `Grid.RowSpan` 和 `Grid.ColumnSpan` 实现跨行/列布局 #### 二、行列定义语法 ```xml <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <!-- 行高自适应内容 --> <RowDefinition Height="2*"/> <!-- 剩余高度分配比例为2 --> <RowDefinition Height="*"/> <!-- 剩余高度分配比例为1 --> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <!-- 固定宽度 --> <ColumnDefinition Width="Auto"/> <!-- 宽度自适应 --> <ColumnDefinition/> <!-- 默认Width="*" --> </Grid.ColumnDefinitions> </Grid> ``` - `Height/Width` 支持三种值类型： - **固定值**：`Height="100"` - **Auto**：自动适应内容 - **比例值**：`2*` 表示占剩余空间的2份比例[^1] #### 三、基础布局示例 ```xml <Grid ShowGridLines="True"> <!-- 显示网格线(调试用) --> <!-- 3x3网格定义 --> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.ColumnDefinitions> <Button Grid.Row="0" Grid.Column="0" Content="(0,0)"/> <Button Grid.Row="1" Grid.Column="1" Content="Center" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Grid.Row="2" Grid.ColumnSpan="3" Text="跨三列文本" Background="LightBlue"/> </Grid> ``` #### 四、高级功能 1. **动态添加控件** ```csharp var btn = new Button { Content = "动态添加" }; Grid.SetRow(btn, 1); Grid.SetColumn(btn, 2); myGrid.Children.Add(btn); ``` 2. **GridSplitter 分割条** ```xml <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="5"/> <!-- 分割条宽度 --> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="左面板"/> <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" Background="Gray"/> <TextBlock Grid.Column="2" Text="右面板"/> </Grid> ``` 3. **共享尺寸组**（同一容器内多Grid同步尺寸） ```xml <Grid Grid.IsSharedSizeScope="True"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="MyGroup"/> </Grid.ColumnDefinitions> </Grid> <!-- 其他Grid中同组列保持相同宽度 --> </Grid> ``` #### 五、布局优化建议 1. 优先使用 `Margin` 属性控制子元素间距 2. 复杂布局可嵌套多个Grid或其他布局容器（如StackPanel） 3. 对需要滚动的区域使用ScrollViewer包裹 §§ 相关问题 §§ 1. 如何实现Grid行列的动态增减？ 2. Grid与UniformGrid有什么区别？ 3. 怎样实现Grid中控件的自动换行？ 4. WPF中哪些场景不适合使用Grid布局？ : 示例代码中的比例分配原理与CSS的flex布局类似，但语法实现不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光怪陆离的节日

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值