WPF---Grid布局讲解

最新推荐文章于 2024-07-25 16:38:17 发布
最新推荐文章于 2024-07-25 16:38:17 发布
阅读量1.8k 收藏 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>
在这里插入图片描述

光怪陆离的节日
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WPF的布局
Rose_1_bull的博客
05-17 241
布局 Grid网格： 1.RowDefinitions，ColumnDefinitions行列集合 height width 2.设置宽高（1,自己定义具体数字的宽或者高；2,比例等分设置宽高；3,auto适应属性自动调整） 3.使用方法： <Button Grid.Row="0" Grid.Column="0" ></Button> 在控件中以0开头数起 4.空间跨行跨行Grid.RowSpan和Grid.ColumnSpan 5...
WPF--布局（代码讲解）
w_g_y123456的博客
12-20 413
布局通用属性 所有布局面板都由System.Windows.Controls.Panel抽象类派生。 panel就是所有布局元素的基类，这个抽象类包含三个公共属性：Background、Children、IsItemHost（IsItemHost标志着控件是不是类似TreeView、ListView这样的控件）。 其中： Background：如果想接收鼠标事件，就必须将属性设置为非空值，（如果想接收鼠标事件，又不希望显示固定颜色的背景，那么只需要将背景色设置为透明即可），一般设置鼠标事件时，系统会自动设
C# WPF入门学习主线篇（十六）—— Grid布局容器
weixin_56595425的博客
06-09 1405
在《C# WPF入门学习主线篇（十六）—— Grid布局容器》这篇文章中，我们详细介绍了WPF中的 `Grid` 布局容器。本文涵盖了 `Grid` 的基本概念、常见属性及使用方法，并通过具体的示例代码展示了如何实现复杂且灵活的用户界面布局。此外，还讨论了 `Grid` 布局容器的优缺点，帮助读者在实际开发中做出更好的布局选择。
WPF--控件（代码讲解）
w_g_y123456的博客
12-22 1702
粗略而言，使用最多控件的基本为6类，即： （1）布局控件：可以容纳多个控件或嵌套其他布局控件。有Grid、StackPanel、DockPanel等。他们拥有共同的父类Panel。 Panel族控件包含： StackPanel、UniformGrid、WraPanel……； 内容属性为Children。 （2）内容控件：只能一个其他控件或布局控件作为他的内容。有Window、Button等。他们的父类为ContentControl。 ContentControl族控件包含： Button、Label、
WPF-基础及进阶扩展合集（持续更新）
rwo_bear的博客
04-15 4560
/格式化字符串类型。Console.WriteLine("格式str:{0}",str.Format);//获取格式化字符串的原始字符串。
WPF编程基础入门 ——— 第三章 布局（七）布局面板Grid
m0_46334316的博客
05-30 5846
WPF布局——布局面板GridWPF——Grid布局控件Grid简单实例——按钮排列Grid简单实例——登录界面 WPF——Grid布局控件 尽管上一篇讲解的UniformGrid能够布局统一单元格，但是很多布局中需要构建单元格大小不等，具有跨越式单元格(Span Cells) 和空白列等功能。而Grid能实现上述这些功能，它是一个使用灵活、能构建复杂UI的布局控件。 Grid最简单的用法是通过设置RowDefinitions和ColumnDefinitions属性定义单元格的总数。其中，RowDefini
WPF编程宝典--布局番外篇
lufylegend_fans的博客
05-05 200
WPF编程宝典--布局番外篇写在前面UniformGridInkCanvas写在结尾 写在前面 布局容器是WPF中比较关键的一部分，我们在初步学习的时候只掌握了基础部分的布局容器，比如Grid，Canvas等，虽然也能满足我们的简单开发，但是在一些特殊的环境中，我们可能使用一些进阶的容器，所以今天我为同学们讲解两个分别由Grid和Canvas衍生出来的进阶容器。 UniformGrid 看名字也能...
WPF － 本质：数据和行为
weixin_30354675的博客
07-07 59
　　如果自己来做一个UI框架，我们会首先关注哪些方面？我想UI框架主要处理的一定包括两个主要层次的内容，一个是数据展现，另一个就是数据操作，所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来，然后可以通过控件行为来操作这些数据，也就是UI框架的数据（Data）和行为（Behavior）。 　　本篇从总体上讲解一下WPF如何处理和操作Data，看完之后大家应该对WPF框架如何把数据转变为...
wpf初学者-wpf控件简单介绍
丘鸣山的博客
08-20 2347
本文大纲 1、基本控件介绍与用法。 基本控件介绍与用法   文本控件 Label控件 label控件：一般用户描述性文字显示。          在Label控件使用时，一般给予用户提示。用法上没有什么很特殊的，label控件的值记住：不是Text 而是 Content属性。 TextBlock控件 TextBlock控件，是只读的文本框，无法进行编辑，比较适合显示文...
【WPF开发】控件介绍-button（按钮）
qq_39150957的博客
07-23 1145
本文深入探讨了WPF中按钮控件的功能与应用，详细介绍了按钮的基本属性、事件及其与C#的交互方法。文章不仅列举了按钮控件的主要属性和事件，还提供了丰富的代码示例，帮助读者更好地理解和运用按钮控件。同时，文章分享了UI设计技巧和样式技巧，包括颜色、形状、字体、大小、动画等方面的设计建议，旨在指导开发者创建出既美观又实用的按钮，以提升应用程序的用户体验。通过本文，读者将掌握按钮控件的核心知识，并在实际开发中灵活运用。
WPF-4-unleashed PDF 原书
05-04
接着，书中的章节会深入讨论控件和布局管理，涵盖各种内置控件的用法，如Button、TextBox、ListBox等，以及如何通过Grid、StackPanel和DockPanel等布局容器来组织这些控件。此外，还会讲解自定义控件和用户控件的...
WPF-一个简单登录界面
12-13
本教程将通过一个简单的登录界面实例，深入讲解如何使用WPF进行开发。 ### 1. 创建新项目 首先，打开Visual Studio并创建一个新的WPF应用程序项目。在解决方案资源管理器中，你会看到`MainWindow.xaml`，这是默认...
WPF-Samples.zip
04-08
6. **布局系统**: WPF的布局系统包括Grid、StackPanel、Canvas等，它们负责管理UI元素的位置和大小，适应不同屏幕尺寸和设备方向。 **案例分析** 在“WPF-Samples”中，你将找到一系列精心设计的示例，涵盖以下...
Pro-WPF-Chapter21-30.rar_C# EDI
09-19
本章涵盖了各种WPF控件的使用，如按钮、文本框、列表视图等，以及不同的布局系统（如StackPanel、Grid、DockPanel等），阐述了如何组织和管理用户界面元素。 4. **第24章：路由事件和命令** 讲解了WPF中的事件...
WPF的ListView控件自定义布局用法实例
09-02
本实例将深入讲解如何在WPF中自定义ListView控件的布局。 首先，自定义布局主要涉及到两部分：ControlTemplate和DataTemplate。ControlTemplate定义了ListView的整体外观和行为，而DataTemplate则决定了每个Item...
在WPF中使用WebView2详解
zhaotianff的专栏
07-25 1683
WebView2在WPF中的使用，非常详细。
WPF脱机应用：实现拼音模糊搜索的AutoCompleteBox
2401_85789772的博客
07-25 576
然而，在脱机环境下实现拼音模糊搜索功能，需要一些额外的技术处理。通过在WPF中实现拼音模糊搜索的AutoCompleteBox，不仅可以提升用户输入的便捷性，还能增强应用的用户体验。尽管在脱机环境下实现这一功能面临一些挑战，但通过合理的设计和技术实现，可以有效地解决这些问题。拼音模糊搜索是一种根据用户输入的拼音，返回匹配的汉字或词语的搜索方式。分析不同的数据结构（如哈希表、Trie树等）对搜索性能的影响，并选择最适合的实现方式。探讨在WPF中实现异步搜索的方法，避免界面冻结，提供流畅的用户体验。
wpf 环形进度条，自定义控件
最新发布
sunjay117的专栏
07-25 1137
// CircleProgress.xaml 的交互逻辑。
wpf后台代码创建window并添加grid
06-09
好的，下面是示例代码，可以在后台代码中创建一个 WPF Window，然后在其中添加一个 Grid 控件： ```csharp using System.Windows; public void CreateWindowWithGrid() { // 创建一个新的 Window 对象 Window window = new Window(); // 设置 Window 的属性，比如标题、大小等等 window.Title = "My Window"; window.Width = 640; window.Height = 480; // 创建一个 Grid 控件，并设置其属性 Grid grid = new Grid(); grid.Margin = new Thickness(10); // 将 Grid 控件添加到 Window 的内容中 window.Content = grid; // 显示 Window window.Show(); } ``` 你可以在需要的时候调用这个方法，就可以创建一个新的 Window 并添加一个 Grid 控件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

光怪陆离的节日

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

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

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

打赏作者

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

抵扣说明：

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

余额充值