ScrollViewer 是WPF中的一个重要容器控件，它为内容提供滚动功能。与WinForm中的Panel.AutoScroll不同，ScrollViewer提供了更丰富的滚动特性和更好的可定制性。

基本特性

• 支持水平和垂直滚动
• 可自定义滚动条样式
• 支持触摸滚动
• 提供丰富的滚动事件

基础用法

简单示例

XML
<ScrollViewer Height="200" Width="300">
    <!-- 内容区域 -->
    <StackPanel>
        <TextBlock Text="这是一段很长的内容..." TextWrapping="Wrap"/>
        <Button Content="按钮1"/>
        <Button Content="按钮2"/>
        <!-- 更多内容 -->
    </StackPanel>
</ScrollViewer>

在WPF应用开发中，布局容器的选择对于界面设计至关重要。今天，我们将深入探讨最基础却非常实用的布局容器之一：Canvas。

Canvas布局的核心优势

Canvas是WPF中最简单直观的布局容器，它提供了一种类似传统WinForm的绝对定位方式。对于从WinForm迁移到WPF的开发者来说，这种布局方式无疑是最容易上手的。

💡开发者提示：Canvas特别适合需要精确控制元素位置的场景，如图形编辑器、游戏界面等。

核心定位机制

在Canvas中，我们可以通过四个关键的附加属性来精确控制子元素的位置：

• Canvas.Left- 控制元素左侧距离画布左边缘的距离
• Canvas.Top- 控制元素顶部距离画布上边缘的距离
• Canvas.Right- 控制元素右侧距离画布右边缘的距离
• Canvas.Bottom- 控制元素底部距离画布下边缘的距离

主要特点：

• 完全的绝对定位控制
• 子元素位置不会随窗口大小改变而改变
• 适合固定大小的界面设计
• 类似于WinForm的控件布局方式

Canvas的基本用法

基础示例

XML
<Window x:Class="AppCanvas.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AppCanvas"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Canvas>
        <!-- 在左上角放置一个按钮 -->
        <Button Canvas.Left="20" Canvas.Top="20" Content="按钮1" Width="100" Height="30"/>

        <!-- 在右上角放置一个文本框 -->
        <TextBox Canvas.Right="20" Canvas.Top="20" Width="150" Height="30" Text="示例文本"/>

        <!-- 在中间放置一个标签 -->
        <Label Canvas.Left="350" Canvas.Top="200" Content="这是一个标签"/>
    </Canvas>
</Window>

WrapPanel是WPF中一个非常实用的布局控件，它能够按照水平或垂直方向依次排列子元素，当一行或一列放不下时会自动换行或换列。这种布局方式类似于HTML中的流式布局，在WinForm中没有直接对应的控件。

主要特点：

• 支持水平和垂直两种排列方向
• 自动换行/换列功能
• 可以设置统一的项目大小
• 灵活的对齐方式

WrapPanel的基本属性

C#
// WrapPanel的主要属性
public class WrapPanel : Panel
{
    // 排列方向，默认为Horizontal
    public Orientation Orientation { get; set; }
    
    // 子元素的统一宽度
    public double ItemWidth { get; set; }
    
    // 子元素的统一高度
    public double ItemHeight { get; set; }
}

基础使用示例

水平方向排列（默认）

XML
<Window x:Class="AppWrapPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AppWrapPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <WrapPanel>
        <!-- 添加一系列按钮，当空间不足时会自动换行 -->
        <Button Content="按钮1" Margin="5" Width="100" Height="40"/>
        <Button Content="按钮2" Margin="5" Width="100" Height="40"/>
        <Button Content="按钮3" Margin="5" Width="100" Height="40"/>
        <Button Content="按钮4" Margin="5" Width="100" Height="40"/>
        <Button Content="按钮5" Margin="5" Width="100" Height="40"/>
    </WrapPanel>
</Window>

DockPanel是WPF中最常用的布局控件之一，它允许子元素沿着面板的边缘停靠。与WinForm中的Dock属性类似，但功能更加强大和灵活。DockPanel可以让子元素依次停靠在上、下、左、右四个方向，最后一个子元素默认会填充剩余空间。

DockPanel的主要特点

1. 可以设置子元素停靠在面板的任意边缘（上、下、左、右）
2. 通过LastChildFill属性控制最后一个子元素是否填充剩余空间
3. 支持多个子元素在同一边进行停靠
4. 停靠顺序由XAML中元素的声明顺序决定

基本用法示例

简单的DockPanel布局

XML
<Window x:Class="AppDockPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AppDockPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <!-- 顶部按钮 -->
        <Button DockPanel.Dock="Top" Height="30">顶部按钮</Button>
        <!-- 底部状态栏 -->
        <Button DockPanel.Dock="Bottom" Height="30">底部按钮</Button>
        <!-- 左侧导航栏 -->
        <Button DockPanel.Dock="Left" Width="100">左侧按钮</Button>
        <!-- 右侧工具栏 -->
        <Button DockPanel.Dock="Right" Width="100">右侧按钮</Button>
        <!-- 中间内容区域（最后一个元素会自动填充剩余空间） -->
        <Button>中间内容</Button>
    </DockPanel>
</Window>

StackPanel是WPF中最简单和常用的布局控件之一，它可以将子元素按照水平或垂直方向依次排列。对于从WinForm转型到WPF的开发者来说，理解StackPanel的使用对掌握WPF布局系统至关重要。

StackPanel的主要特点

• 可以设置水平或垂直方向的堆叠
• 子元素按照添加顺序依次排列
• 默认情况下会拉伸子元素以填充交叉轴方向的空间
• 支持边距（Margin）和内边距（Padding）设置
• 可以嵌套使用，实现复杂布局

基本用法示例

垂直方向排列（默认）

XML
<Window x:Class="AppStackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AppStackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <!-- 垂直方向的StackPanel -->
    <StackPanel Margin="10">
        <Button Content="按钮1" Height="30" Margin="0,0,0,5"/>
        <Button Content="按钮2" Height="30" Margin="0,0,0,5"/>
        <Button Content="按钮3" Height="30"/>
    </StackPanel>
</Window>