经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » unity » 查看文章
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
来源：cnblogs　　作者：伍华聪　　时间：2023/10/23 9:01:20　　对本文有异议

在我们开发的前端项目中，往往为了方便，都需对一些控件进行自定义的处理，以便实现快速的数据绑定以及便捷的使用，本篇随笔介绍通过抽取常见字典列表，实现通用的字典类型绑定；以及通过自定义控件的属性处理，实现系统字典内容的快捷绑定的操作。

1、下拉列表的数据绑定

在我们创建下拉列表的时候，我们一般处理方式，是在对应的数据模型中添加对应的下拉列表的集合对象，然后在控件绑定对应的ItemSource，如下所示是视图模型，我们增加一个性别的列表参考。

  1. /// <summary>
  2. /// 用户列表-视图模型对象
  3. /// </summary>
  4. public partial class UserListViewModel : BaseListViewModel<UserInfo, int, UserPagedDto>
  5. {
  6.     /// <summary>
  7.     /// 性别
  8.     /// </summary>
  9.     [ObservableProperty]
  10.     private List<CListItem> genderItems;
  12.     /// <summary>
  13.     /// 构造函数
  14.     /// </summary>
  15.     /// <param name="service">业务服务接口</param>
  16.     public UserListViewModel(IUserService service) : base(service)
  17.     {
  18.         //初始化性别的列表
  19.         this.GenderItems = new List<CListItem>()
  20.         {
  21.             new CListItem("男"),
  22.             new CListItem("女")
  23.         };
  24.     }

然后初始化后，就可以在界面上进行数据的绑定了，如下是对应控件的界面代码。

  1. <hc:ComboBox
  2.     Margin="5"
  3.     hc:TitleElement.Title="性别"
  4.     hc:TitleElement.TitlePlacement="Left"
  5.     DisplayMemberPath="Text"
  6.     ItemsSource="{Binding ViewModel.GenderItems}"
  7.     SelectedValue="{Binding ViewModel.PageDto.Gender, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
  8.     SelectedValuePath="Value"
  9.     ShowClearButton="True" />

 这种方式可能是经常用到的方式，随着不同界面代码的编写，我们发现很多这样下拉列表，如机构可能有一些类别（来自枚举对象）需要处理，其他页面也有类似的需求。

  1. /// <summary>
  2. /// 机构（部门）信息 列表-视图模型对象
  3. /// </summary>
  4. public partial class OuListViewModel : BaseListViewModel<OuInfo, int, OuPagedDto>
  5. {
  6.     /// <summary>
  7.     /// 机构分类
  8.     /// </summary>
  9.     [ObservableProperty]
  10.     private List<CListItem> categoryItems = new();
  12.     /// <summary>
  13.     /// 构造函数
  14.     /// </summary>
  15.     /// <param name="service">业务服务接口</param>
  16.     public OuListViewModel(IOuService service) : base(service)
  17.     {  
  18.         //机构分类
  19.         string[] enumNames = EnumHelper.GetMemberNames<OUCategoryEnum>();
  20.         this.CategoryItems.Clear();
  21.         this.CategoryItems.AddRange(enumNames.Select(s => new CListItem(s)));
  22.     }

如果每次都需要在对应的视图模型上创建这些列表，则显得累赘、臃肿。因为这些下拉列表的内容，是界面中常用到的列表，我们是否可以把它作为一个公用的对象模型来使用呢。

为了方便，我们来创建一个对象DictItemsModel ，用来初始化系统用到的所有参考列表对象，如下代码所示。

  1. /// <summary>
  2. /// 定义一些系统常用的字典项目，供页面参考引用
  3. /// </summary>
  4. public partial class DictItemsModel : ObservableObject
  5. {
  6.     /// <summary>
  7.     /// 性别
  8.     /// </summary>
  9.     [ObservableProperty]
  10.     private  List<CListItem> genderItems = new();
  12.     /// <summary>
  13.     /// 机构分类
  14.     /// </summary>
  15.     [ObservableProperty]
  16.     private List<CListItem> ouCategoryItems = new();
  18.     //******更多列表处理**********
  19.  
  20.     /// <summary>
  21.     /// 构造函数
  22.     /// </summary>
  23.     public DictItemsModel()
  24.     {
  25.         InitDictItem(); // 初始化字典
  26.     }
  28.     /// <summary>
  29.     /// 初始化字典
  30.     /// </summary>
  31.     /// <returns></returns>
  32.     public async Task InitDictItem()
  33.     {
  34.         //初始化性别的列表
  35.         this.GenderItems = new List<CListItem>()
  36.         {
  37.             new(""),
  38.             new("男"),
  39.             new("女")
  40.         };
  42.         //机构分类
  43.         this.OuCategoryItems = EnumHelper.GetMemberNames<OUCategoryEnum>().Select(s => new CListItem(s)).ToList();
  44.         this.OuCategoryItems.Insert(0, new CListItem(""));
  46.         //*********************
  47.     }
  48. }

然后，我们在应用程序的XAML代码中，引入对应的静态资源，相当于每次使用这些的时候，是使用该对象的实例。

  1. <Application
  2.     x:Class="WHC.SugarProject.WpfUI.App"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:helpers="clr-namespace:WHC.SugarProject.WpfUI.Helpers"
  6.     xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
  7.     DispatcherUnhandledException="OnDispatcherUnhandledException"
  8.     Exit="OnExit"
  9.     Startup="OnStartup">
  10.     <Application.Resources>
  11.         <ResourceDictionary>
  12.             <!--  整合所有用到的转义辅助类，减少页面中添加的处理代码  -->
  13.             <helpers:IntToBooleanConverter x:Key="IntToBooleanConverter" />
  14.             
  15.             <helpers:DictItemsModel x:Key="DictItemsModel" />
  16.             
  17.         </ResourceDictionary>
  18.     </Application.Resources>
  19. </Application>
  20.

有了这些定义，我们的下拉列表的数据源ItemSource的属性改动一下就可以实现一致的效果了，相当于抽取了字典列表到独立的类中处理了。

  1. <!--  ItemsSource="{Binding ViewModel.GenderItems}"  -->
  2. <hc:ComboBox
  3.     Margin="5"
  4.     hc:TitleElement.Title="性别"
  5.     hc:TitleElement.TitlePlacement="Left"
  6.     DisplayMemberPath="Text"
  7.     ItemsSource="{Binding Path=GenderItems, Source={StaticResource DictItemsModel}}"
  8.     SelectedValue="{Binding ViewModel.PageDto.Gender, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
  9.     SelectedValuePath="Value"
  10.     ShowClearButton="True" />
  1. <!--  ItemsSource="{Binding ViewModel.CategoryItems}"  -->
  2. <hc:ComboBox
  3.     Margin="5"
  4.     hc:TitleElement.Title="机构分类"
  5.     hc:TitleElement.TitlePlacement="Left"
  6.     DisplayMemberPath="Text"
  7.     ItemsSource="{Binding Path=OuCategoryItems, Source={StaticResource DictItemsModel}}"
  8.     SelectedValue="{Binding ViewModel.PageDto.Category, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
  9.     SelectedValuePath="Value"
  10.     ShowClearButton="True" />

上面代码中，我们通过Source={StaticResource DictItemsModel}来指定数据源的位置来自静态资源即可。如机构列表，通过枚举进行解析到的集合如下所示，当然其他数据也可以通过相应的处理实现。

  

通过这种把常见的字典类别集中到一个类中进行维护，除了统一处理列表的初始化外，也方便我们在界面代码中的统一使用。

2、自定义系统字典列表控件

我们框架一般都维护一个通用的字典类型和字典项目的信息，通过维护这些常见的系统字典信息，可以为我们的界面的一些下拉类列表提供数据支持，是指实现通用、统一的字典处理。

以前在Winform中绑定字典列表的时候，一般通过扩展函数BindDictItems就可以实现类型绑定了，有兴趣可以了解下随笔《在Winform开发框架中下拉列表绑定字典以及使用缓存提高界面显示速度》、《使用扩展函数方式，在Winform界面中快捷的绑定树形列表TreeList控件和TreeListLookUpEdit控件》、《在Winform开发中，我们使用的几种下拉列表展示字典数据的方式》、《在各种开发项目中使用公用类库的扩展方法，通过上下文方式快速调用处理函数》。

对WPF来说，我们需要改变下思路，和Vue3的BS的控件的处理方式类似，我们通过给他指定一个字典类型的名称，让它自己取得对应列表，进行绑定处理即可，因此我们自定义字典列表控件即可。

  1.     /// <summary>
  2.     /// 自定义下拉列表，方便绑定字典类型
  3.     /// </summary>
  4.     public class ComboBox : HandyControl.Controls.ComboBox

创建一个继承自所需下拉列表控件，可以使用原生控件继承，不过我这里偏向于UI更好的HandyControl的ComboBox。

然后给它指定对应的字典类型属性，对应我们系统的字典大类名称。

  1.     /// <summary>
  2.     /// 自定义下拉列表，方便绑定字典类型
  3.     /// </summary>
  4.     public class ComboBox : HandyControl.Controls.ComboBox
  5.     {
  6.         /// <summary>
  7.         /// 字典类型名称
  8.         /// </summary>
  9.         public string? DictTypeName
  10.         {
  11.             get { return (string?)GetValue(DictTypeNameProperty); }
  12.             set { SetValue(DictTypeNameProperty, value); }
  13.         }
  15.         public static readonly DependencyProperty DictTypeNameProperty = DependencyProperty.Register(
  16.             nameof(DictTypeName), typeof(string), typeof(ComboBox),
  17.             new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnDictTypeNamePropertyChanged)));

封装过自定义的WPF控件的话，我们知道，增加一个自定义属性，就需要同时增加一个自定义属性+Property的 DependencyProperty 属性对象，如上代码所示。

通过PropertyChangedCallback的回调处理，实现设置字典类型值后触发控件内部数据的处理逻辑，也就是需要从字典服务中获取下拉类别数据，变为控件的ItemSource集合即可。

一般情况下，我们实现下面的代码逻辑，获得数据源就差不过可以了。

  1. private static async void OnDictTypeNamePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  2. {
  3.     if (d is not ComboBox control)
  4.         return;
  6.     if (control != null)
  7.     {
  8.         var oldValue = (string?)e.OldValue;  // 旧的值
  9.         var newValue = (string?)e.NewValue; // 更新的新的值
  11.         //更新下拉列表的数据源
  12.         if(!newValue.IsNullOrEmpty() && !control.IsInDesignMode())
  13.         {
  14.             var itemList = await BLLFactory<IDictDataService>.Instance.GetListItemByDictType(newValue);
  15.             if (itemList != null)
  16.             {
  17.                 itemList.Insert(0, new CListItem(""));//CListItem具有Text、Value两个属性
  18.                 control.ItemsSource = itemList;
  19.                 control.ShowClearButton = true;
  20.                 control.SelectedValuePath = control.SelectedValuePath.IsNullOrEmpty() ? "Value" : control.SelectedValuePath;
  21.             }
  22.         }
  23.     }
  24. }

同理，我们按照同样的处理方式，做一个复选框的下拉列表CheckComboBox。

  1. /// <summary>
  2. /// 自定义下拉列表，方便绑定字典类型
  3. /// </summary>
  4. public class CheckComboBox : HandyControl.Controls.CheckComboBox
  5. {
  6.     /// <summary>
  7.     /// 字典类型名称
  8.     /// </summary>
  9.     public string? DictTypeName
  10.     {
  11.         get { return (string?)GetValue(DictTypeNameProperty); }
  12.         set { SetValue(DictTypeNameProperty, value); }
  13.     }
  15.     public static readonly DependencyProperty DictTypeNameProperty = DependencyProperty.Register(
  16.         nameof(DictTypeName), typeof(string), typeof(CheckComboBox),
  17.         new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnDictTypeNamePropertyChanged)));

完成上面的自定义控件编写，我们需要在UI上放置控件，指定它的指定类型就可以了。

  1. <control:ComboBox
  2.     Width="250"
  3.     Height="32"
  4.     VerticalAlignment="Center"
  5.     hc:InfoElement.Title="客户类型"
  6.     hc:InfoElement.TitlePlacement="Left"
  7.     DictTypeName="客户类型"
  8.     SelectedValue="{Binding ViewModel.PageDto.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
  9.     ShowClearButton="True"
  10.     Style="{StaticResource ComboBoxPlusBaseStyle}" />
  11. <control:CheckComboBox
  12.     Width="500"
  13.     Height="32"
  14.     VerticalAlignment="Center"
  15.     hc:InfoElement.Title="客户类型"
  16.     hc:InfoElement.TitlePlacement="Left"
  17.     DictTypeName="客户类型"
  18.     SelectedValue="{Binding ViewModel.PageDto.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
  19.     SelectedValuePath="Value"
  20.     ShowClearButton="True"
  21.     ShowSelectAllButton="True"
  22.     Style="{StaticResource CheckComboBoxPlus}" />

完成后，我们测试下自定义控件的处理效果。

    

效果符合实际的期望。而且代码和普通WPF控件的使用类似，只需要增加一个 DictTypeName="客户类型" 的类似写法即可。可以极大的减轻我们绑定常见系统字典的下拉列表的复杂度。

界面效果如下所示。

 

原文链接：https://www.cnblogs.com/wuhuacong/p/17778978.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

unity热门文章

  • Unity3D 计时器的实现代码(三种写法总结)
  • unity AudioSource播放完声音后要执行的函数或条件操作
  • Unity 实现给物体替换材质球
  • unity中camera摄像头控制详解
  • 欧拉角的万向节死锁问题
  • 原生实现C#与Lua相互调用方法(Unity3D可用)
  • unity 实现摄像机绕某点旋转一周
  • Unity Shader实现模糊效果
  • 基于Unity实现2D边缘检测
  • C#使用Unity实现IOC

    • unity推荐文章

  • [Unity] Dreamteck Splines实现沿路径移动功能
  • [Unity] 实现AssetBundle资源加载管理器
  • 扩展实现Unity协程的完整栈跟踪
  • iOS使用Unity容器动态加载3D模型
  • 【Unity3D】Unity与Android交互
  • Unity学习笔记--数据持久化之PlayerPrefs的使用
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
  • 【Unity3D】UI Toolkit样式选择器
  • 【Unity3D】UI Toolkit容器

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号