从 WinForm 到 WPF：WrapPanel 带你体验布局新思路

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>

垂直方向排列

XML
<WrapPanel Orientation="Vertical">
    <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>

高级使用示例

统一项目大小

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 ItemWidth="120" ItemHeight="50">
        <!-- 所有子元素将使用相同的大小，无需单独设置Width和Height -->
        <Button Content="按钮1" Margin="5"/>
        <Button Content="按钮2" Margin="5"/>
        <Button Content="按钮3" Margin="5"/>
        <TextBlock Text="文本块" Background="LightGray" Margin="5"/>
        <Rectangle Fill="Blue" Margin="5"/>
    </WrapPanel>
</Window>

结合ItemsControl使用

XML
<Window x:Class="AppWrapPanel.Window1"
        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="Window1" Height="450" Width="800">
    <Grid>
        <ItemsControl ItemsSource="{Binding MyItems}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <!-- 将WrapPanel作为ItemsControl的面板 -->
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding Name}"   
                            Width="100"   
                            Height="40"   
                            Margin="5"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

对应的ViewModel代码：

C#
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AppWrapPanel
{
    public class MainViewModel
    {
        public ObservableCollection<ItemModel> MyItems { get; set; }

        public MainViewModel()
        {
            MyItems = new ObservableCollection<ItemModel>
            {
                new ItemModel { Name = "项目1" },
                new ItemModel { Name = "项目2" },
                new ItemModel { Name = "项目3" },
            };
        }
    }
    public class ItemModel
    {
        public string Name { get; set; }
    }
}

C#
public partial class Window1 : Window
{
    public MainViewModel MyItems;
    public Window1()
    {
        InitializeComponent();
        this.DataContext = MyItems = new MainViewModel();
    }
}

实际应用示例：图片墙

XML
<Window x:Class="AppWrapPanel.Window2"
        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="Window2" Height="450" Width="800">
    <ScrollViewer>
        <WrapPanel>
            <!-- 图片列表 -->
            <Border Width="150" Height="150" Margin="5" BorderBrush="Gray" BorderThickness="1">
                <Image Source="Images/ask.png" Stretch="UniformToFill"/>
            </Border>
            <Border Width="150" Height="150" Margin="5" BorderBrush="Gray" BorderThickness="1">
                <Image Source="Images/task.png" Stretch="UniformToFill"/>
            </Border>
            <!-- 可以动态添加更多图片 -->
        </WrapPanel>
    </ScrollViewer>
</Window>

图片属性检查

在解决方案资源管理器中：

右键点击图片
属性窗口中
"复制到输出目录"设置为"始终复制"或"如果较新则复制"
"生成操作"设置为"资源(Resource)"

代码创建WrapPanel

C#
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // 创建WrapPanel
        WrapPanel wrapPanel = new WrapPanel();
        wrapPanel.Orientation = Orientation.Horizontal;
        
        // 添加子元素
        for (int i = 1; i <= 10; i++)
        {
            Button btn = new Button
            {
                Content = $"按钮{i}",
                Width = 100,
                Height = 40,
                Margin = new Thickness(5)
            };
            wrapPanel.Children.Add(btn);
        }
        
        // 将WrapPanel设置为窗口的内容
        this.Content = wrapPanel;
    }
}

与WinForm的对比

在WinForm中，要实现类似WrapPanel的功能，通常需要：

手动计算控件位置
处理窗口大小改变事件
编写复杂的布局逻辑

而在WPF中，WrapPanel自动处理这些问题：

自动计算位置
自动处理换行
响应式布局
支持各种对齐方式

性能考虑

当WrapPanel中包含大量子元素时，需要注意以下几点：

考虑使用虚拟化：

XML
<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel VirtualizationMode="Recycling"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

避免过度嵌套：

XML
<!-- 推荐 -->
<WrapPanel>
    <Button/>
    <TextBlock/>
</WrapPanel>

<!-- 不推荐 -->
<WrapPanel>
    <Grid>
        <StackPanel>
            <Button/>
        </StackPanel>
    </Grid>
</WrapPanel>

总结

WrapPanel是WPF（Windows Presentation Foundation）中一个功能强大的布局控件，它支持简单易用的流式布局，并允许用户灵活地控制元素排列的方向。此外，WrapPanel还具备自动换行的功能，当一行或一列的空间不足以容纳更多的元素时，会自动将后续元素放置到下一行或下一列。同时，该控件也支持为所有子项设置统一的尺寸，使得界面设计更加整齐划一。这些特性使得WrapPanel成为构建复杂用户界面时非常实用的选择。

目录