当前位置：首页 > article >正文

【WPF】WPF 项目实战：用ObservableCollection构建一个可增删、排序的管理界面（含源码）

article 2025/8/19 5:31:30

💡WPF 项目实战：构建一个可增删、排序的光源类型管理界面（含源码）

在实际的图像处理项目中，我们经常需要对“光源类型”进行筛选或管理。今天我们来一步步构建一个实用的 WPF 界面，实现以下功能：

✅ 添加新的光源类型
❌ 删除已有光源类型
🔼🔽 调整光源类型显示顺序
🧠 使用标准的 MVVM 模式 + Prism 命令绑定

🏗️ 第一步：定义模型类

我们为每个光源项定义一个类 LightSourceFilterItem，它包含两个属性：光源名称、是否勾选。

public class LightSourceFilterItem : BindableBase
{public string Name { get; }private bool _isChecked;public bool IsChecked{get => _isChecked;set => SetProperty(ref _isChecked, value);}public LightSourceFilterItem(string name){Name = name;IsChecked = true;}
}

🧠 第二步：ViewModel 实现逻辑

ViewModel 是整个逻辑核心，包括添加、删除、排序命令。

public class LightTypeViewModel : BindableBase
{public ObservableCollection<LightSourceFilterItem> LightSourceItems { get; } = new();private string _newLightSourceName;public string NewLightSourceName{get => _newLightSourceName;set => SetProperty(ref _newLightSourceName, value);}public DelegateCommand AddLightSourceCommand { get; }public DelegateCommand<LightSourceFilterItem> RemoveLightSourceCommand { get; }public DelegateCommand<LightSourceFilterItem> MoveUpCommand { get; }public DelegateCommand<LightSourceFilterItem> MoveDownCommand { get; }public LightTypeViewModel(){AddLightSourceCommand = new DelegateCommand(AddLightSource);RemoveLightSourceCommand = new DelegateCommand<LightSourceFilterItem>(RemoveLightSource);MoveUpCommand = new DelegateCommand<LightSourceFilterItem>(MoveUp);MoveDownCommand = new DelegateCommand<LightSourceFilterItem>(MoveDown);}private void AddLightSource(){if (string.IsNullOrWhiteSpace(NewLightSourceName)) return;if (LightSourceItems.Any(x => x.Name == NewLightSourceName)) return;LightSourceItems.Add(new LightSourceFilterItem(NewLightSourceName));NewLightSourceName = string.Empty;}private void RemoveLightSource(LightSourceFilterItem item){if (item != null)LightSourceItems.Remove(item);}private void MoveUp(LightSourceFilterItem item){var index = LightSourceItems.IndexOf(item);if (index > 0)LightSourceItems.Move(index, index - 1);}private void MoveDown(LightSourceFilterItem item){var index = LightSourceItems.IndexOf(item);if (index < LightSourceItems.Count - 1)LightSourceItems.Move(index, index + 1);}
}

💡 温馨提示
使用 ObservableCollection.Move() 可以高效地重排项，UI 会自动更新。

如果你未来打算支持拖动排序，也可以换成 ListBox + drag-and-drop 实现。

🎨 第三步：编写 XAML 界面

<UserControl x:Class="MainPro.Views.LightTypeView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Background="AliceBlue"><StackPanel Margin="20"><!-- 添加区域 --><StackPanel Orientation="Horizontal" Margin="0,0,0,10"><TextBox Width="150"Text="{Binding NewLightSourceName, UpdateSourceTrigger=PropertyChanged}" /><Button Content="添加光源类型" Command="{Binding AddLightSourceCommand}" Margin="10,0,0,0" /></StackPanel><!-- 光源列表 --><ItemsControl ItemsSource="{Binding LightSourceItems}"><ItemsControl.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal" Margin="5"><CheckBox Content="{Binding Name}"IsChecked="{Binding IsChecked, Mode=TwoWay}" /><Button Content="☝" Margin="10,0,0,0"Command="{Binding DataContext.MoveUpCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"CommandParameter="{Binding}" /><Button Content="👇" Margin="5,0,0,0"Command="{Binding DataContext.MoveDownCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"CommandParameter="{Binding}" /><Button Content="❌" Foreground="Red" Margin="5,0,0,0"Command="{Binding DataContext.RemoveLightSourceCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"CommandParameter="{Binding}" /></StackPanel></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></StackPanel>
</UserControl>