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

大家好，欢迎来到IT知识分享网。

文章出处： WPF之UI进阶–完整了解wpf的控件和布局容器及应用

一、关系图

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

├── 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类的。这里我们详细介绍一下布局空容器。

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> 

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

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

常用子类：

代码示例：

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

四、关于ItemsControl 与VirtualizingStackPanel

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

<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> 

在上面的代码中：

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 可以高效地展示大量数据，同时保持良好的性能和响应速度。