前面三篇有关WPF的基础介绍,分别介绍了wpf与winform的异同,wpf的事件生成和使用以及数据绑定。但我们还缺乏一副好的"皮囊",所以从这篇开始我们来开始学习wpf的UI相关的内容,首当其冲的就是布局容器。
其实我们知道,无论是winform还是wfp,布局容器都是属于控件的一种,只不过说布局容器是一种"装控件的控件"。这里我们来梳理一下他们的关系,并且详细介绍他们的使用及注意事项。
文章目录
- 一、关系图
- 二、常用的6种panel布局容器
-
- [1. Grid(网格布局)](#1. Grid(网格布局))
- [2. StackPanel(堆叠面板)](#2. StackPanel(堆叠面板))
- [3. WrapPanel(换行面板)](#3. WrapPanel(换行面板))
- [4. DockPanel(停靠面板)](#4. DockPanel(停靠面板))
- [5. Canvas(画布)](#5. Canvas(画布))
- [6. UniformGrid(均匀网格)](#6. UniformGrid(均匀网格))
- [7. VirtualizingStackPanel(虚拟化堆叠面板)](#7. VirtualizingStackPanel(虚拟化堆叠面板))
- [三、两种装饰类 decorator类布局容器](#三、两种装饰类 decorator类布局容器)
- [四、关于ItemsControl 与VirtualizingStackPanel](#四、关于ItemsControl 与VirtualizingStackPanel)
文章出处: https://blog.csdn.net/haigear/article/details/142616866
一、关系图
先直接上图,结果一目了然,后面我们再解释。
puml
├── 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 | 将空间划分为行和列的网格布局,可以灵活地放置和调整子元素的位置和大小。通过定义RowDefinitions 和ColumnDefinitions 来确定行数和列数。 |
StackPanel | 按垂直或水平方向依次排列子元素。可以通过设置Orientation 属性为Horizontal (水平)或Vertical (垂直)来确定排列方向。 |
WrapPanel | 按顺序将子元素换行排列,当一行排满后,自动换到下一行继续排列。 |
DockPanel | 允许将子元素停靠在特定位置,如顶部、底部、左侧、右侧。可以使用Dock 属性来设置子元素的停靠位置。 |
UniformGrid | 将子元素排列在一个均匀的网格中,所有单元格大小相同。通常通过设置Rows 和Columns 属性来确定网格的行数和列数。 |
Canvas | 使用绝对坐标定位子元素,可以通过设置子元素的Left 、Top 、Right 、Bottom 属性来确定其在Canvas 中的位置。 |
VirtualizingStackPanel | 类似于StackPanel ,但在处理大量子元素时具有虚拟化功能,可以提高性能。当子元素数量很多时,只加载可见部分的子元素,而不是一次性加载所有子元素。 |
Panel 类本身不直接用于布局,而是作为其他布局容器的基类。 |
1. Grid(网格布局)
使用方法:通过定义行和列来创建一个网格,然后将控件放置在特定的单元格中。
应用场景:适用于需要精确控制布局位置和大小的复杂界面设计。
常用配合:GridSplitter 用于动态调整行或列的大小。
性能优化:尽量减少行和列的数量,避免不必要的嵌套。
代码示例:
xml
<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(堆叠面板)
使用方法:控件按顺序垂直或水平堆叠排列。
应用场景:适用于简单的线性布局,如工具栏或表单控件的排列。
常用配合:无特别配合,但可以嵌套使用以实现更复杂的布局。
性能优化:避免在滚动视图中使用,因为滚动时会重新布局所有子元素。
代码示例:
xml
<StackPanel Orientation="Vertical">
<Button Content="Button 1" />
<Button Content="Button 2" />
</StackPanel>
3. WrapPanel(换行面板)
使用方法:控件按顺序排列,当到达边界时自动换行。
应用场景:适用于需要自动换行的列表,如选项按钮组。
常用配合:无特别配合,但可以嵌套使用以实现更复杂的布局。
性能优化:由于不支持虚拟化,大量元素时性能可能下降。
代码示例:
xml
<WrapPanel>
<Button Content="Wrap 1" />
<Button Content="Wrap 2" />
<!-- 更多按钮 -->
</WrapPanel>
4. DockPanel(停靠面板)
使用方法:控件可以停靠在面板的边缘(上、下、左、右),剩余空间可由中心控件填充。
应用场景:适用于工具窗口或停靠侧边栏的布局。
常用配合:LastChildFill 属性设置最后一个子元素填充剩余空间。
性能优化:避免在停靠的子元素中使用复杂的布局。
代码示例:
xml
<DockPanel LastChildFill="True">
<Button DockPanel.Dock="Top" Content="Top" />
<Button DockPanel.Dock="Left" Content="Left" />
<!-- 其他控件 -->
</DockPanel>
5. Canvas(画布)
使用方法:控件通过绝对坐标定位,可以自由放置在画布的任何位置。
应用场景:适用于需要精确控制控件位置的复杂绘图或自定义布局。
常用配合:无特别配合,但可以使用 ZIndex 属性控制控件的堆叠顺序。
性能优化:由于不涉及自动布局计算,性能较好,但需要手动管理控件位置。
代码示例:
xml
<Canvas>
<Button Canvas.Left="10" Canvas.Top="20" Content="Button" />
<!-- 其他控件 -->
</Canvas>
6. UniformGrid(均匀网格)
使用方法:控件均匀分布在行或列中,自动处理行数或列数。
应用场景:适用于需要均匀分布的简单布局,如网格视图。
常用配合:通常不需要配合其他布局容器使用,因为 UniformGrid 已经提供了均匀分布的功能。
性能优化:由于 UniformGrid 会自动计算行数或列数,所以当子元素数量变化时,性能可能会受到影响。
代码示例:
xml
<UniformGrid Rows="2">
<Button Content="1" />
<Button Content="2" />
<!-- 更多按钮 -->
</UniformGrid>
7. VirtualizingStackPanel(虚拟化堆叠面板)
使用方法:VirtualizingStackPanel 是 StackPanel 的一个特殊模式,它通过虚拟化技术只渲染视口内的元素,从而提高性能。
应用场景:适用于需要堆叠排列大量元素的场景,如列表或长数据集合。
常用配合:通常与 ItemsControl 结合使用,通过设置 ItemsControl 的 ItemsPanel 属性为 VirtualizingStackPanel,在本篇博文的最后会详细介绍。
性能优化:使用虚拟化可以显著提高性能,特别是在处理大量数据时。
代码示例:
xml
<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 类本身不涉及复杂的布局计算,因此性能影响不大。
代码示例:
xml
<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 的列表。
xml
<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 定义了如何显示每个数据项,在这个例子中,每个数据项被表示为一个按钮。
后端代码
在你的窗口或用户控件的代码后面,你需要定义数据源:
csharp
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