WPF之UI进阶--完整了解wpf的控件和布局容器及应用

前面三篇有关WPF的基础介绍,分别介绍了wpf与winform的异同,wpf的事件生成和使用以及数据绑定。但我们还缺乏一副好的“皮囊”,所以从这篇开始我们来开始学习wpf的UI相关的内容,首当其冲的就是布局容器。
其实我们知道,无论是winform还是wfp,布局容器都是属于控件的一种,只不过说布局容器是一种“装控件的控件”。这里我们来梳理一下他们的关系,并且详细介绍他们的使用及注意事项。

文章目录

  • 一、关系图
  • 二、常用的6种panel布局容器
    • 1. Grid(网格布局)
    • 2. StackPanel(堆叠面板)
    • 3. WrapPanel(换行面板)
    • 4. DockPanel(停靠面板)
    • 5. Canvas(画布)
    • 6. UniformGrid(均匀网格)
    • 7. VirtualizingStackPanel(虚拟化堆叠面板)
  • 三、两种装饰类 decorator类布局容器
  • 四、关于ItemsControl 与VirtualizingStackPanel

文章出处: https://blog.csdn.net/haigear/article/details/142616866

一、关系图

先直接上图,结果一目了然,后面我们再解释。

├── DependencyObject
│   └── UIElement
│       ├── FrameworkElement
│       │   ├── Control
│       │   │   ├── Decorator
│       │   │   │   ├── Border [用于为子元素添加边框装饰]
│       │   │   │   └── Viewbox [用于拉伸或缩放单个子元素以填充可用空间]
│       │   │   ├── Panel
│       │   │   │   ├── Grid [将空间划分为行和列来放置控件]
│       │   │   │   ├── StackPanel [按垂直或水平方向依次排列控件]
│       │   │   │   ├── WrapPanel [按顺序将子元素换行排列,基类为 Panel]
│       │   │   │   ├── DockPanel [允许将子元素停靠在特定位置]
│       │   │   │   ├── UniformGrid [将子元素排列在一个均匀的网格中]
│       │   │   │   └── Canvas [使用绝对坐标定位子元素]
│       │   │   ├── ContentControl
│       │   │   │   ├── Button [触发特定操作的可点击控件]
│       │   │   │   ├── Label [显示文本信息]
│       │   │   │   ├── ListBoxItem [列表框中的单个项目]
│       │   │   │   ├── ProgressBar [显示任务进度]
│       │   │   │   ├── Slider [允许用户通过拖动滑块选择数值]
│       │   │   │   ├── DatePicker [用于选择日期]
│       │   │   │   ├── Calendar [显示日历供用户选择日期]
│       │   │   │   ├── MediaElement [播放音频、视频等媒体内容]
│       │   │   │   ├── Image [显示图像]
│       │   │   │   └── HeaderedContentControl [带有标题的内容控件]
│       │   │   ├── ItemsControl
│       │   │   │   ├── ItemsPresenter [用于呈现 ItemsControl 的子项]
│       │   │   │   ├── Selector
│       │   │   │   │   ├── ListBox [显示可选择的列表项]
│       │   │   │   │   ├── ComboBox [下拉列表框,可选择或输入值]
│       │   │   │   │   ├── TreeView [以树形结构显示数据]
│       │   │   │   │   ├── DataGrid [显示表格数据]
│       │   │   │   │   ├── ListView [以列表形式显示数据]
│       │   │   │   │   └── TabControl [提供多个选项卡切换内容]
│       │   │   │   └── HeaderedItemsControl [带有标题的项控件集合]
│       │   │   ├── Menu [提供菜单功能,包含一系列命令选项]
│       │   │   └── RangeBase
│       │   │       ├── Slider [同上文 Slider]
│       │   │       └── ScrollBar [用于滚动查看内容]
│       │   └── Shapes.Shape
│       │       ├── Ellipse [绘制椭圆形状]
│       │       └── Rectangle [绘制矩形形状]
│       ├── Media.MediaElement [播放媒体内容]
│       ├── Controls.Primitives.Popup [弹出式窗口]
│       ├── Controls.ScrollViewer [提供滚动功能以查看超出可视区域的内容]
│       ├── Controls.TextBoxBase
│       │   ├── PasswordBox [输入密码的文本框]
│       │   └── TextBox [输入普通文本的文本框]
│       ├── Controls.RichTextBox [支持富文本编辑的文本框]
│       ├── Controls.DocumentViewer [查看文档的控件]
│       ├── Controls.ToolBarPanel [工具栏面板]
│       ├── Controls.ToolBarTray [工具栏托盘]
│       ├── Separator [用于分隔不同的控件或元素]
│       ├── GridSplitter [用于调整 Grid 中行或列的大小]
│       ├── GroupBox [用于组合和分组相关的控件]
│       ├── Frame [用于在一个窗口中显示另一个页面]
│       ├── Expander [可展开和折叠的容器控件]
│       ├── StatusBar [显示状态信息的栏]
│       ├── TextBlock [显示文本内容]
│       ├── ToolBar [工具栏控件]
│       ├── TreeView [以树形结构显示数据]
│       ├── Viewbox [用于拉伸或缩放单个子元素以填充可用空间]
│       ├── WebBrowser [用于显示网页内容]

这个图表展示了 WPF 控件的继承关系,从 UIElement 开始,经过 FrameworkElement 和 Control,到 Decorator、Panel、ContentControl 和 ItemsControl。每个控件类都继承自更基础的类,并提供了更具体的功能。例如,Decorator 类提供了装饰效果,Panel 类是布局容器的基类,ContentControl 用于展示单个内容,而 ItemsControl 用于展示一系列数据项。

二、常用的6种panel布局容器

很显然,通过上面的图,我们发现布局容器都是基于panel类的。这里我们详细介绍一下布局空容器。

Panel 是所有布局容器的基类,它定义了布局容器的通用行为,但本身不提供布局功能。
常用子类:

布局容器特点
Grid将空间划分为行和列的网格布局,可以灵活地放置和调整子元素的位置和大小。通过定义RowDefinitionsColumnDefinitions来确定行数和列数。
StackPanel按垂直或水平方向依次排列子元素。可以通过设置Orientation属性为Horizontal(水平)或Vertical(垂直)来确定排列方向。
WrapPanel按顺序将子元素换行排列,当一行排满后,自动换到下一行继续排列。
DockPanel允许将子元素停靠在特定位置,如顶部、底部、左侧、右侧。可以使用Dock属性来设置子元素的停靠位置。
UniformGrid将子元素排列在一个均匀的网格中,所有单元格大小相同。通常通过设置RowsColumns属性来确定网格的行数和列数。
Canvas使用绝对坐标定位子元素,可以通过设置子元素的LeftTopRightBottom属性来确定其在Canvas中的位置。
VirtualizingStackPanel类似于StackPanel,但在处理大量子元素时具有虚拟化功能,可以提高性能。当子元素数量很多时,只加载可见部分的子元素,而不是一次性加载所有子元素。
Panel 类本身不直接用于布局,而是作为其他布局容器的基类。

1. Grid(网格布局)

使用方法:通过定义行和列来创建一个网格,然后将控件放置在特定的单元格中。

应用场景:适用于需要精确控制布局位置和大小的复杂界面设计。

常用配合:GridSplitter 用于动态调整行或列的大小。

性能优化:尽量减少行和列的数量,避免不必要的嵌套。

代码示例:

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="2*" /></Grid.ColumnDefinitions><Button Grid.Row="0" Grid.Column="0" Content="Button 1" /><Button Grid.Row="1" Grid.Column="0" Content="Button 2" />
</Grid>

2. StackPanel(堆叠面板)

使用方法:控件按顺序垂直或水平堆叠排列。

应用场景:适用于简单的线性布局,如工具栏或表单控件的排列。

常用配合:无特别配合,但可以嵌套使用以实现更复杂的布局。

性能优化:避免在滚动视图中使用,因为滚动时会重新布局所有子元素。

代码示例:

<StackPanel Orientation="Vertical"><Button Content="Button 1" /><Button Content="Button 2" />
</StackPanel>

3. WrapPanel(换行面板)

使用方法:控件按顺序排列,当到达边界时自动换行。

应用场景:适用于需要自动换行的列表,如选项按钮组。

常用配合:无特别配合,但可以嵌套使用以实现更复杂的布局。

性能优化:由于不支持虚拟化,大量元素时性能可能下降。

代码示例:

<WrapPanel><Button Content="Wrap 1" /><Button Content="Wrap 2" /><!-- 更多按钮 -->
</WrapPanel>

4. DockPanel(停靠面板)

使用方法:控件可以停靠在面板的边缘(上、下、左、右),剩余空间可由中心控件填充。

应用场景:适用于工具窗口或停靠侧边栏的布局。

常用配合:LastChildFill 属性设置最后一个子元素填充剩余空间。

性能优化:避免在停靠的子元素中使用复杂的布局。

代码示例:

<DockPanel LastChildFill="True"><Button DockPanel.Dock="Top" Content="Top" /><Button DockPanel.Dock="Left" Content="Left" /><!-- 其他控件 -->
</DockPanel>

5. Canvas(画布)

使用方法:控件通过绝对坐标定位,可以自由放置在画布的任何位置。

应用场景:适用于需要精确控制控件位置的复杂绘图或自定义布局。

常用配合:无特别配合,但可以使用 ZIndex 属性控制控件的堆叠顺序。

性能优化:由于不涉及自动布局计算,性能较好,但需要手动管理控件位置。

代码示例:

<Canvas><Button Canvas.Left="10" Canvas.Top="20" Content="Button" /><!-- 其他控件 -->
</Canvas>

6. UniformGrid(均匀网格)

使用方法:控件均匀分布在行或列中,自动处理行数或列数。

应用场景:适用于需要均匀分布的简单布局,如网格视图。

常用配合:通常不需要配合其他布局容器使用,因为 UniformGrid 已经提供了均匀分布的功能。

性能优化:由于 UniformGrid 会自动计算行数或列数,所以当子元素数量变化时,性能可能会受到影响。

代码示例:

<UniformGrid Rows="2"><Button Content="1" /><Button Content="2" /><!-- 更多按钮 -->
</UniformGrid>

7. VirtualizingStackPanel(虚拟化堆叠面板)

使用方法:VirtualizingStackPanel 是 StackPanel 的一个特殊模式,它通过虚拟化技术只渲染视口内的元素,从而提高性能。

应用场景:适用于需要堆叠排列大量元素的场景,如列表或长数据集合。

常用配合:通常与 ItemsControl 结合使用,通过设置 ItemsControl 的 ItemsPanel 属性为 VirtualizingStackPanel,在本篇博文的最后会详细介绍。

性能优化:使用虚拟化可以显著提高性能,特别是在处理大量数据时。

代码示例:

<ItemsControl ItemsSource="{Binding YourItemsSource}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel Orientation="Vertical" /></ItemsPanelTemplate></ItemsControl.ItemsPanel><!-- 其他设置 -->
</ItemsControl>

总结
每种布局容器都有其特定的使用场景,选择合适的布局容器可以有效地管理界面布局和控件的排列。在实际开发中,根据具体需求选择合适的布局容器,可以提高界面的可用性和美观性。同时,注意性能优化,特别是在处理大量元素或复杂布局时。
文章出处:https://blog.csdn.net/haigear/article/details/142616866

三、两种装饰类 decorator类布局容器

Decorator 类是所有布局容器的基类,它本身并不提供布局功能,但定义了布局容器的通用行为。它主要用于装饰其他控件,如添加边框、背景等。

常用子类:

Border:用于给子元素添加边框。
Viewbox:用于缩放其子元素以填充可用空间。
性能优化:Decorator 类本身不涉及复杂的布局计算,因此性能影响不大。

代码示例:

<Border BorderThickness="2" BorderBrush="Black"><Button Content="Button in a Border" />
</Border>

四、关于ItemsControl 与VirtualizingStackPanel

ItemsControl 是 WPF 中一个非常强大的控件,它能够展示一系列的数据项。当与 VirtualizingStackPanel 结合使用时,它能够提供一种高效的方式来展示大量数据,尤其是当数据项数量非常庞大时。VirtualizingStackPanel 通过只渲染视口内的元素来优化性能,从而减少内存和 CPU 的使用。

如何使用 ItemsControl 结合 VirtualizingStackPanel
1.设置 ItemsControl 的 ItemsPanel:
通过设置 ItemsControl 的 ItemsPanel 属性为 VirtualizingStackPanel,可以启用虚拟化功能。
2.使用数据绑定:
通常,ItemsControl 会与数据源绑定,以展示数据集合。使用 ItemsSource 属性将 ItemsControl 与数据源关联。
3.定义数据模板:
通过 ItemTemplate 属性,可以定义如何显示集合中的每个数据项。这允许你自定义每个数据项的布局和样式。
示例代码
假设我们有一个简单的数据模型 ItemModel,它有一个 Name 属性,我们想展示一个包含多个 ItemModel 的列表。

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp"Title="VirtualizingStackPanel Example" Height="350" Width="525"><Grid><ItemsControl ItemsSource="{Binding Items}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel Orientation="Vertical" /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><Button Content="{Binding Name}" Width="100" Height="50" /></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid>
</Window>

在上面的代码中:

ItemsControl 绑定到一个名为 Items 的数据源。
ItemsPanel 设置为 VirtualizingStackPanel,并指定其 Orientation 属性为 Vertical,意味着子项将垂直堆叠。
ItemTemplate 定义了如何显示每个数据项,在这个例子中,每个数据项被表示为一个按钮。
后端代码
在你的窗口或用户控件的代码后面,你需要定义数据源:

public partial class MainWindow : Window
{public ObservableCollection<ItemModel> Items { get; set; }public MainWindow(){InitializeComponent();// 初始化数据源Items = new ObservableCollection<ItemModel>{new ItemModel { Name = "Item 1" },new ItemModel { Name = "Item 2" },// 添加更多项...};// 设置数据上下文DataContext = this;}
}public class ItemModel
{public string Name { get; set; }
}

在这个例子中,Items 是一个 ObservableCollection,它允许 ItemsControl 在数据项添加或删除时自动更新界面。

通过这种方式,ItemsControl 结合 VirtualizingStackPanel 可以高效地展示大量数据,同时保持良好的性能和响应速度。

下一篇博文,我们继续进阶wpf的UI,介绍样式和自定义母板,请感兴趣的童鞋继续关注!
文章出处:https://blog.csdn.net/haigear/article/details/142616866

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人工智能发展历程

发展历程 人工智能的发展可以追溯到20世纪30年代&#xff0c;当时数理逻辑的形式化和智能可计算思想开始构建计算与智能的关联概念。1943年&#xff0c;美国神经科学家麦卡洛克和逻辑学家皮茨共同研制成功了世界上首个人工神经网络模型——MP模型&#xff0c;这为现代人工智能…

【微服务】组件、基础工程构建(day2)

组件 服务注册和发现 微服务模块中&#xff0c;一般是以集群的方式进行部署的&#xff0c;如果我们调用的时候以硬编码的方式&#xff0c;那么当服务出现问题、服务扩缩容等就需要对代码进行修改&#xff0c;这是非常不好的。所以微服务模块中就出现了服务注册和发现组件&…

基于深度学习的乳腺癌分类识别与诊断系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 乳腺癌是全球最常见的癌症之一&#xff0c;早期诊断对于治疗效果至关重要。近年来&#xff0c;深度学习技术在医学图像分析领域取得了显著进展&#xff0c;能够从大量的医学影像数据中自动学习和提…

MySQL 支持行锁还是表锁?分别有哪些优缺点?破解数据库的锁之谜:MySQL行锁与表锁的博弈

在现代应用程序开发中&#xff0c;数据库管理系统扮演着至关重要的角色。而在数据库的性能优化过程中&#xff0c;锁机制成为了一个不可忽视的话题。对于MySQL而言&#xff0c;行锁和表锁是两种常见的锁定机制&#xff0c;了解它们的优缺点将有助于我们设计更高效的数据库应用。…

Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官

gitee平台源码 github平台源码 饮食陪伴师是一个管理饮食的原生大模型小程序&#xff0c;优势&#xff1a; 精确营养监控&#xff1a;用户记录饮食后&#xff0c;我们会计算出食用的营养成分与分量&#xff0c;并反馈给用户。饮食建议有效&#xff1a;大模型经过我们训练具备大…

Qt 中的 QListWidget、QTreeWidget 和 QTableWidget:简化的数据展示控件

Qt 中的 QListWidget、QTreeWidget 和 QTableWidget&#xff1a;简化的数据展示控件 在 Qt 的用户界面开发中&#xff0c;展示和管理数据是常见的需求。Qt 提供了丰富的控件供开发者选择&#xff0c;其中 QListWidget、QTreeWidget 和 QTableWidget 是三个高层封装控件&#x…

程计软考题2-编译、解释程序翻译阶段

(一) 编译器和解释器的工作阶段 1.编译和解释与源程序的区别 分析&#xff1a;编译和解释是语言处理的两种基本方式。 编译过程包括词法分析、语法分析、语义分析、中间代码生成、代码优化和目标代码生成等阶段&#xff0c;以及符号表管理和出错处理模块。 解释过程在词法、语…

【Kubernetes】常见面试题汇总(四十三)

目录 98. kube-apiserver 和 kube-scheduler 的作用是什么&#xff1f; 99.您对云控制器管理器了解多少&#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;…

网络层——IP

IP地址 结构&#xff1a; 由32位二进制数组成&#xff0c;通常用点分的形式被分为四个部分&#xff0c;每个部分1byte&#xff0c;最大值为255。 从功能的角度看&#xff0c;ip地址由两部分组成&#xff0c;网络号和主机号。网络号标识了ip所在的网段&#xff0c;主机号标识了…

基于微信的乐室预约小程序+ssm(lw+演示+源码+运行)

摘 要 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个…

VBA解除Excel工作表保护

Excel工作表保护解除 工作表保护后无法编辑内容&#xff0c;可能是密码忘记&#xff0c;不可暴力破解隐私 1 打开需的Excel 2 Alt F11 打开代码编辑&#xff0c;点击任意代码编辑项&#xff0c;将如下代码复制&#xff0c;并运行。 Public Sub GetWorkbookPassword()Dim w1 A…

服务器使用frp做内网穿透详细教程,请码住

目录 1.内网穿透的定义 2.前提条件 3.frp下载地址 4.配置服务器端的frps.toml文件 5. 配置客户端&#xff0c;即物理服务器或者是电脑本机地址 6.添加服务端启动命令startServerFrp.sh 7.添加客户端启动命令startClientFrp.sh 8. 查看服务端启动日志 9.查看客户端启…

Java网络通信—UDP

0.小记 1.udp通信不需要建立socket管道&#xff0c;一边只管发&#xff0c;一边只管收 2.客户端&#xff1a;将数据&#xff08;byte&#xff09;打包成包裹&#xff08;DatagramPacket&#xff09;&#xff0c;写上地址&#xff08;IP端口&#xff09;&#xff0c;通过快递站&…

简站wordpress主题产品多图ACF插件设置方法

此教程仅适用于演示站有产品多图的主题&#xff0c;演示站没有产品多图的主题&#xff0c;就别往下看了&#xff0c;省得浪费时间。 1、给产品添加轮播图 简站wordpress主题有多个产品图的主题&#xff0c;添加产品轮播图的具体方法如下&#xff1a; 1.2、选择产品分类 添加…

【QT Quick】基础语法:文件定义类型与枚举类型

这节课我们讨论的是在 QML 中使用文件定义类型以及枚举类型的相关内容。我们主要关注如何通过 QML 文件创建自定义类型&#xff0c;并将其作为属性变量使用&#xff0c;以及如何使用枚举类型来规范化代码中的一些常量。这些概念对提升 QML 编程的可维护性和灵活性非常有帮助。下…

IDEA服务启动时无法输出日志

起服务时&#xff0c;控制台啥日志也没有 解决方案&#xff1a;选择【启用调试输出】 SQL的日志无法打印 原来安装了一个Mybatis Log Free&#xff0c;用的好好的。 后来换了个项目&#xff0c;SQL执行日志就打印不出来了。 解决方案&#xff1a;换个插件&#xff0c;我换了…

安宝特案例 | 某知名日系汽车制造厂,借助AR实现智慧化转型

案例介绍 在全球制造业加速数字化的背景下&#xff0c;工厂的生产管理与设备维护效率愈发重要。 某知名日系汽车制造厂当前面临着设备的实时监控、故障维护&#xff0c;以及跨地域的管理协作等挑战&#xff0c;由于场地分散和突发状况的不可预知性&#xff0c;传统方式已无法…

M3u8视频由手机拷贝到电脑之后,通过potplayer播放报错找不到文件地址怎么解决?

该文章前面三节主要介绍M3u8视频是什么&#xff0c;视频播放错误(找不到地址)的解决方法在后面 M3U8是一种多媒体播放列表文件格式&#xff0c;主要用于流媒体播放。 一、文件格式特点 1. 文本文件&#xff1a;M3U8是一个采用 UTF-8 编码的文本文件&#xff0c;这意味着它可…

使用Charles进行Mock数据:高效提升前端交互测试效率

在前端开发和测试过程中&#xff0c;我们时常会遇到依赖外部系统HTTP接口的情况。然而&#xff0c;由于外部系统未部署、服务不可用或其他原因&#xff0c;接口无法正常响应&#xff0c;这给我们的测试工作带来了很大的困扰。特别是在QA环境中&#xff0c;这种情况尤为常见。为…

基于ssm的学生社团管理系统 社团分配系统 社团活动调度平台 学生社团管理 信息化社团管理开发项目 社团活动管理 社团预约系统(源码+文档+定制)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…