WPF MVVM绑定：将ObservableCollection<Item>的Name属性分三列展示

嘿，这个需求其实挺容易实现的，用WPF的ItemsControl搭配UniformGrid就能搞定固定三列的布局，而且只展示Name属性。我给你一步步拆解：

1. 准备数据模型和ViewModel（MVVM最佳实践） #

首先确保你的Item类和ViewModel配置正确，ViewModel里要包含你的ObservableCollection<Item>，并且实现INotifyPropertyChanged来支持数据绑定的动态更新：

// Item实体类
public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

// ViewModel类，实现属性变更通知
public class ItemsViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Item> _items;
    public ObservableCollection<Item> Items
    {
        get => _items;
        set
        {
            _items = value;
            OnPropertyChanged();
        }
    }

    // 实现INotifyPropertyChanged接口的核心方法
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // 构造函数初始化测试数据（你可以替换成自己的业务数据源）
    public ItemsViewModel()
    {
        Items = new ObservableCollection<Item>
        {
            new Item { Id = 1, Name = "项目A", Description = "这是项目A的描述" },
            new Item { Id = 2, Name = "项目B", Description = "这是项目B的描述" },
            new Item { Id = 3, Name = "项目C", Description = "这是项目C的描述" },
            new Item { Id = 4, Name = "项目D", Description = "这是项目D的描述" },
            new Item { Id = 5, Name = "项目E", Description = "这是项目E的描述" }
        };
    }
}

2. 编写UserControl的XAML布局（核心实现） #

这部分是关键，我们用ItemsControl绑定集合，通过ItemsPanel指定UniformGrid作为布局容器，设置Columns="3"就能强制分成三列。ItemTemplate里只绑定Name属性即可：

<UserControl x:Class="YourProjectNamespace.ThreeColumnItemsControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:YourProjectNamespace"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <!-- 绑定Items集合的ItemsControl -->
        <ItemsControl ItemsSource="{Binding Items}">
            <!-- 指定三列均分的UniformGrid作为布局面板 -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3" HorizontalAlignment="Stretch" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <!-- 每个项的显示模板，只展示Name属性 -->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <!-- 加个边框让布局更美观，你可以根据需求调整样式 -->
                    <Border Margin="6" Padding="10" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4">
                        <TextBlock Text="{Binding Name}" 
                                   HorizontalAlignment="Center" 
                                   VerticalAlignment="Center"
                                   FontSize="14"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

3. 设置UserControl的DataContext #

最后给UserControl绑定ViewModel，最简单的方式是在构造函数里直接设置：

public ThreeColumnItemsControl()
{
    InitializeComponent();
    // 绑定ViewModel作为数据上下文
    DataContext = new ItemsViewModel();
}

如果你的UserControl是在父窗口中使用，也可以在父窗口的XAML里将ViewModel作为DataContext传递过来，这样复用性更强。

额外小提示 #

• 如果你需要支持选中项功能，可以把ItemsControl换成ListView，其他代码基本不变，只需调整选中样式即可。
• 要是想让列宽自适应内容而非均分，可以把UniformGrid换成WrapPanel并设置Orientation="Horizontal"，不过这样列数会根据控件宽度自动调整，不是固定三列。
• 如需复杂交互（比如hover高亮效果），可以在DataTemplate里添加Trigger实现。

内容的提问来源于stack exchange，提问作者Steven_BDawg