WPF常见容器全方位介绍

在这里插入图片描述

Windows Presentation Foundation (WPF) 是微软的一种用于构建Windows桌面应用程序的UI框架。WPF的布局系统基于容器，帮助开发者以灵活、响应的方式组织用户界面 (UI) 元素。本篇文章将详细介绍WPF中几种常见的容器，包括Grid、StackPanel、WrapPanel、DockPanel、Canvas和UniformGrid，并结合代码举例进行说明。

1. WPF布局基础

在这里插入图片描述

WPF布局系统通过安排子元素来进行尺寸调整和排列。布局由两个步骤组成：

测量阶段：确定子元素的所需尺寸。
排列阶段：确定每个子元素的位置和实际呈现尺寸。

了解WPF的布局过程对于高效使用容器和优化性能至关重要。

2. Grid

在这里插入图片描述

Grid是WPF中最强大的布局容器之一。它允许布局通过行和列进行结构化划分，类似于HTML中的表格。

特点

支持行和列的定义。
可以通过RowSpan和ColumnSpan属性跨行跨列。

示例

<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="0" Grid.Column="1" Content="Button 2"/><Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Content="Button 3"/>
</Grid>

在这个例子中，网格有两个行和两列，第三个按钮在两列上跨越。

3. StackPanel

StackPanel是一个简单的面板，它将子元素按照单一方向（水平或垂直）排列。
在这里插入图片描述

特点

子元素的方向可以是水平或垂直。
子元素在指定方向上按顺序排列。

示例

<StackPanel Orientation="Vertical"><TextBlock Text="First line" /><TextBlock Text="Second line" /><TextBlock Text="Third line" />
</StackPanel>

此示例中，文本块被竖直堆叠。

4. WrapPanel

在这里插入图片描述

WrapPanel类似于StackPanel，但它的子元素如果在一行中排列不下就会自动换行。

特点

自动换行。
可以指定方向（水平或垂直）。

示例

<WrapPanel Orientation="Horizontal"><Button Content="Button 1" Width="100" /><Button Content="Button 2" Width="100" /><Button Content="Button 3" Width="100" /><Button Content="Button 4" Width="100" /><Button Content="Button 5" Width="100" />
</WrapPanel>

在这里，按钮水平排列，当窗体宽度不足时会换到下一行。

5. DockPanel

DockPanel允许将子元素“停靠”到面板的边缘，未标记Dock的元素将占据剩余的空间。
在这里插入图片描述

特点

可以设置Dock属性（如Left、Right、Top、Bottom）。
最后一个子元素默认会填充剩余空间。

示例

<DockPanel><TextBlock DockPanel.Dock="Top" Text="Header" /><Button DockPanel.Dock="Bottom" Content="Footer" /><TextBlock Text="Main Content" />
</DockPanel>

文本块和按钮停靠在顶部和底部，中间的文本块填满剩余空间。

6. Canvas

在这里插入图片描述

Canvas是WPF中最简单但灵活性极高的容器，它允许绝对定位子元素。

特点

允许直接设置每个元素的坐标。
不会自动调整子元素的尺寸和位置。

示例

<Canvas><Button Canvas.Left="50" Canvas.Top="20" Content="Absolute Positioned" />
</Canvas>

此例中，按钮被放置在距左50、距上20的位置。

7. UniformGrid

UniformGrid类似于Grid，但它将所有单元格的大小设置为相同。

特点

所有单元格大小相同。
根据设置的行和列自动排列子元素。

示例

<UniformGrid Rows="2" Columns="2"><Button Content="1" /><Button Content="2" /><Button Content="3" /><Button Content="4" />
</UniformGrid>

此示例创建一个2x2的网格，每个单元格大小相同。

8. 综合实例

下面是一个更复杂的结合多种容器的示例：

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><DockPanel Grid.Row="0"><TextBlock DockPanel.Dock="Left" Text="Menu" Margin="5" /><TextBlock Text="Title" Margin="5" HorizontalAlignment="Center"/></DockPanel><WrapPanel Grid.Row="1" Margin="10"><Button Content="Home" Width="100" /><Button Content="Profile" Width="100" /><Button Content="Settings" Width="100" /></WrapPanel><StatusBar Grid.Row="2"><StatusBarItem Content="Ready" /><StatusBarItem Content="{Binding CurrentTime, UpdateSourceTrigger=PropertyChanged}" /></StatusBar>
</Grid>