网站建设代理哪个好,灯饰网站开发,传奇发布网新开服,中英文网站建设报价#x1f4a1;WPF 项目实战#xff1a;构建一个可增删、排序的光源类型管理界面#xff08;含源码#xff09;
在实际的图像处理项目中#xff0c;我们经常需要对“光源类型”进行筛选或管理。今天我们来一步步构建一个实用的 WPF 界面#xff0c;实现以下功能#xff1…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 ObservableCollectionLightSourceFilterItem LightSourceItems { get; } new();private string _newLightSourceName;public string NewLightSourceName{get _newLightSourceName;set SetProperty(ref _newLightSourceName, value);}public DelegateCommand AddLightSourceCommand { get; }public DelegateCommandLightSourceFilterItem RemoveLightSourceCommand { get; }public DelegateCommandLightSourceFilterItem MoveUpCommand { get; }public DelegateCommandLightSourceFilterItem MoveDownCommand { get; }public LightTypeViewModel(){AddLightSourceCommand new DelegateCommand(AddLightSource);RemoveLightSourceCommand new DelegateCommandLightSourceFilterItem(RemoveLightSource);MoveUpCommand new DelegateCommandLightSourceFilterItem(MoveUp);MoveDownCommand new DelegateCommandLightSourceFilterItem(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:ClassMainPro.Views.LightTypeViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:prismhttp://prismlibrary.com/prism:ViewModelLocator.AutoWireViewModelTrueBackgroundAliceBlueStackPanel Margin20!-- 添加区域 --StackPanel OrientationHorizontal Margin0,0,0,10TextBox Width150Text{Binding NewLightSourceName, UpdateSourceTriggerPropertyChanged} /Button Content添加光源类型 Command{Binding AddLightSourceCommand} Margin10,0,0,0 //StackPanel!-- 光源列表 --ItemsControl ItemsSource{Binding LightSourceItems}ItemsControl.ItemTemplateDataTemplateStackPanel OrientationHorizontal Margin5CheckBox Content{Binding Name}IsChecked{Binding IsChecked, ModeTwoWay} /Button Content☝ Margin10,0,0,0Command{Binding DataContext.MoveUpCommand, RelativeSource{RelativeSource AncestorTypeUserControl}}CommandParameter{Binding} /Button Content Margin5,0,0,0Command{Binding DataContext.MoveDownCommand, RelativeSource{RelativeSource AncestorTypeUserControl}}CommandParameter{Binding} /Button Content❌ ForegroundRed Margin5,0,0,0Command{Binding DataContext.RemoveLightSourceCommand, RelativeSource{RelativeSource AncestorTypeUserControl}}CommandParameter{Binding} //StackPanel/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/StackPanel
/UserControl第四步效果展示
✅ 添加新项后立即出现在下方 ❌ 删除指定项 可调整顺序数据集合自动更新 UI 总结
这个小型项目展示了
如何结合 ObservableCollection 和 ItemsControl 构建交互式列表如何用 Prism 的 DelegateCommandT 实现项级操作使用 MVVM 保持代码整洁、解耦、易维护
这种思路不仅适用于光源类型管理也适合于任何需要用户自定义数据项列表的场景。 如需源码或进一步扩展功能如拖拽排序、持久化到配置文件等欢迎留言如果这篇文章对你有帮助欢迎收藏转发 ❤️
