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

news2024/9/29 7:16:10

前面三篇有关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.coloradmin.cn/o/2176130.html

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

相关文章

一次 Spring 扫描 @Component 注解修饰的类坑

问题现象 之前遇到过一个问题&#xff0c;在一个微服务的目录下有相同功能 jar 包的两个不同的版本&#xff0c;其中一个版本里面的类有 Component 注解&#xff0c;另外一个版本的类里面没有 Component 注解&#xff0c;且按照加载的顺序&#xff0c;没有 Component 注解的 j…

maven安装教程(图文结合,最简洁易懂)

前提 所有的Maven都需要Java环境&#xff0c;所以首先需要安装JDK,本教程默认已安装JDK1.8 未安装JDK可看JDK安装教程&#xff1a;JDK1.8安装教程 主要分为两个大步骤&#xff1a;安装、配置 一、下载和安装Maven 1、将maven解压后的文件夹复制到D盘根目录 &#xff08;最好…

fmql之Linux内核定时器

内容依然来自于正点原子。 Linux内核时间管理 内容包括&#xff1a; 系统频率设置节拍率&#xff1a;高节拍率的优缺点全局变量jiffies绕回的概念&#xff08;溢出&#xff09;API函数&#xff08;处理绕回&#xff09; HZ为每秒的节拍数 Linux内核定时器 内容包括&#xf…

3-1.Android Fragment 之创建 Fragment

Fragment Fragment 可以视为 Activity 的一个片段&#xff0c;它具有自己的生命周期和接收事件的能力&#xff0c;它有以下特点 Fragment 依赖于 Activity&#xff0c;不能独立存在&#xff0c;Fragment 的生命周期受 Activity 的生命周期影响 Fragment 将 Activity 的 UI 和…

BUUCTF蜘蛛侠呀

解压后发现是流量包&#xff0c;好多icmp包 发现icmp包尾部有$$STRAT打头16进制的字符串&#xff0c;好多重复得。我们只需要提取尾部这些字符串是当icmp的type0时上图标识为褐色的字符串&#xff0c;还需要把16进制的字符串转为对应的字符串&#xff08;bytes 类型&#xff09…

YOLOv8改进 | 融合篇,YOLOv8主干网络替换为MobileNetV3+CA注意机制+添加小目标检测层(全网独家首发,实现极限涨点)

原始 YOLOv8 训练结果: YOLOv8 + MobileNetV3改进后训练结果: YOLOv8 + MobileNetV3 + CA 注意机制 + 添加小目标检测层改进后训练结果(极限涨点): 摘要 小目标检测难点众多,导致很多算法对小目标的检测效果远不如大中型目标。影响算法性能的主要原因如下:第一,小目…

Windows暂停更新

目录 前言注册表设定参考 前言 不想Windows自动更新&#xff0c;同时不想造成Windows商店不可用&#xff0c;可以采用暂停更新的方案。 但是通过这里设定的时间太短了&#xff0c;所以我们去注册表设定。 注册表设定 win r 输入 regedit进入注册表 HKEY_LOCAL_MACHINE\SOFT…

python 02 List

Python 1-14 列表 第一课 1437. 是否所有 1 都至少相隔 k 个元素 class Solution:def kLengthApart(self, nums: List[int], k: int) -> bool:cnt k # 处理第一个 1for i, x in enumerate(nums):if x 1:if cnt < k: return Falsecnt 0 # 遇到 1 从新记数else: cnt …

解决银河麒麟V10中/data目录执行权限问题

解决银河麒麟V10中/data目录执行权限问题 1、问题描述2、解决方案步骤一&#xff1a;编辑fstab文件步骤二&#xff1a;重启系统步骤三&#xff1a;验证更改 3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在使用银河麒麟桌面操作系…

【零散技术】Odoo PDF 打印问题问题合集

序言:时间是我们最宝贵的财富,珍惜手上的每个时分 Odoo PDF打印 是一个必备功能&#xff0c;但是总会遇到一些奇奇怪怪的问题&#xff0c;此帖仅做记录&#xff0c;方便查阅。 目录 1、样式丢失 2、部分结构丢失 3、没有中文字体 1、样式丢失 这种情况一般是由于 …

YOLOv8 Windows c++推理

#添加一个**yolov8\_。onx **和/或**yolov5\_。Onnx **模型(s)到ultralytics文件夹。 #编辑**main.cpp**来改变**projectBasePath**来匹配你的用户。#请注意&#xff0c;默认情况下&#xff0c;CMake文件将尝试导入CUDA库以与opencv dnn (cuDNN) GPU推理一起使用。 #如果你的Op…

【Power Query】三大容器及元素提取

三大容器 Table; List; Record 表 &#xff08;Table&#xff09;&#xff1a; Table一般是从外部导入的 如果非要手动生成&#xff0c;可以这样&#xff1a; #table({"学号","姓名","平时分"},{{1,"Alice",99},{2,"Beige&quo…

Nacos 是阿里巴巴开源的一款动态服务发现、配置管理和服务管理平台,旨在帮助开发者更轻松地构建、部署和管理微服务应用。

Nacos 是阿里巴巴开源的一款动态服务发现、配置管理和服务管理平台&#xff0c;旨在帮助开发者更轻松地构建、部署和管理微服务应用。Nacos 提供了一系列的功能来支持服务注册与发现、配置管理、服务元数据管理、流量管理、服务健康检查等&#xff0c;是构建云原生应用和服务网…

【C++】— 类和对象(2)

文章目录 &#x1f49e;1.类的默认成员函数&#x1f49e;2.构造函数&#x1f49e;3.析构函数&#x1f49e;4.拷贝构造函数&#x1f49e;5.赋值运算符重载&#x1f49e;5.1 运算符重载&#x1f49e;5.2 赋值运算符重载 &#x1f49e;6.取地址运算符重载&#x1f49e;6.1const成员…

中国算力大会启幕,联想发布异构智算产业创新成果

9月27日&#xff0c;2024中国算力大会在河南郑州拉开帷幕。作为全球领先的算力基础设施和服务提供商&#xff0c;联想集团参会参展并携手异构智算产业联盟承办2024异构智算产业生态联盟技术论坛。 据「TMT星球」了解&#xff0c;论坛发布了新一代AI服务器、AI应用部署解决方案…

如何用AI完成毕业论文

一、利用 AI 辅助资料收集 AI 可以帮助你快速搜索大量与毕业论文相关的资料&#xff0c;节省时间和精力。 writehelp智能写作辅导&#xff1a;http://www.writehelp.vip/?sid17&#xff0c;限时免费提供开题报告、任务书和答辩PPT。 二、借助 AI 生成提纲 它能根据你的研究主…

【C++】继承,菱形继承,虚拟继承,组合详解

目录 1. 继承概念与定义 1.1 概念 1.2 定义 2. 父类与子类的赋值规则 3. 继承的作用域 4. 子类的默认成员函数 5. 继承与友元 6. 继承与静态成员 7. 菱形继承 7.1 继承关系 7.2 菱形继承的问题 7.3 虚拟继承 8. 继承与组合 1. 继承概念与定义 1.1 概念 1. 继承&a…

基于SpringCloud的微服务架构下安全开发运维准则

为什么要进行安全设计 微服务架构进行安全设计的原因主要包括以下几点&#xff1a; 提高数据保护&#xff1a;微服务架构中&#xff0c;服务间通信频繁&#xff0c;涉及到大量敏感数据的交换。安全设计可以确保数据在传输和存储过程中的安全性&#xff0c;防止数据泄露和篡改。…

物联网迎来下半场,国产 IoTOS 打造企业级智能硬件云服务平台

如有需求&#xff0c;文末联系小编 氦氪云 IoTOS 是一套先进的企业级物联网解决方案平台&#xff0c;为万物互联提供可靠安全稳定的终端接入、协议适配、消息路由、数据存储和分析、应用使能等核心功能。面向物联网领域中的终端设备商、系统集成商、应用服务商、能力提供商等&a…