💡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>
🔍 第四步：效果展示
? 添加新項后立即出現在下方
? 刪除指定項
🔼🔽 可調整順序，數據集合自動更新 UI
📝 總結
這個小型項目展示了：
- 如何結合
ObservableCollection和ItemsControl構建交互式列表 - 如何用 Prism 的
DelegateCommand<T>實現項級操作 - 使用 MVVM 保持代碼整潔、解耦、易維護
這種思路不僅適用于光源類型管理，也適合于任何需要用戶自定義數據項列表的場景。
📎 如需源碼或進一步擴展功能（如拖拽排序、持久化到配置文件等），歡迎留言！如果這篇文章對你有幫助，歡迎收藏+轉發 ??
