循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用

循序渐进,介绍,基于,communitytoolkit,mvvm,handycontrol,wpf,应用,开发,列表,treeview,使用 · 浏览次数 : 238

小编点评

内容生成时需要带简单的排版,以下内容的排版方式建议如下: 1. 对标题进行排版,使用“#”符号进行排版。 2. 对描述进行排版,使用“”符号进行排版。 3. 对数据进行排版,使用“,”符号进行排版。 4. 对选项进行排版,使用“”符号进行排版。 5. 对代码进行排版,使用“”符号进行排版。 具体排版建议如下: 1. 标题:使用“#”符号进行排版,例如:#数据展示 2. 描述:使用“”符号进行排版,例如:描述数据 3. 数据:使用“,”符号进行排版,例如:1,2,3 4.选项:使用“”符号进行排版,例如:“选项1,选项2” 5.代码:使用“”符号进行排版,例如:var变量名 = “值”

正文

在我们展示一些参考信息的时候,有所会用树形列表来展示结构信息,如对于有父子关系的多层级部门机构,以及一些常用如字典大类节点,也都可以利用树形列表的方式进行展示,本篇随笔介绍基于WPF的方式,使用TreeView来洗实现结构信息的展示,以及对它的菜单进行的设置、过滤查询等功能的实现逻辑。

1、TreeView树形列表的展示

我们前面随笔介绍到的用户信息的展示,左侧就是一个树形的类表,通过展示多层级的部门机构信息,可以快速的查找对应部门的用户信息,如下界面所示。

我们来看看界面中树形列表部分的Xaml代码如下所示。

<TreeView
    x:Name="deptTree"
    Margin="0,10,10,0"
    FontSize="16"
    ItemsSource="{Binding ViewModel.FilteredTreeItems}"
    SelectedItemChanged="deptTree_SelectedItemChanged">
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True" />
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type core:OuNodeInfo}" ItemsSource="{Binding Path=Children}">
            <StackPanel Orientation="Horizontal">
                <Button
                    hc:IconElement.Geometry="{StaticResource PageModeGeometry}"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" />            
                <Label
                    Padding="-10"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Content="{Binding Path=Name}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

其中的ItemsSource是指定TreeView的数据源的,它是一个ItemsControl,因此它有数据源ItemsSource树形,如其他ListBox也是这样的控件基类。

public class TreeView : ItemsControl

而 SelectedItemChanged 是我们在选择不同节点的时候触发的事件,用于我们对数据进行重新查询的处理,实现的代码如下所示。

    /// <summary>
    /// 树列表选中触发事件
    /// </summary>
    private async void deptTree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        var item = e.NewValue as OuNodeInfo;
        if (item != null)
        {
            this.ViewModel.SelectNode = item;
            await this.ViewModel.GetData();
        }
    }

其中用户列表界面的ViewModel类里面 ,我们定义了一些属性,如下代码所示。

/// <summary>
/// 用户列表-视图模型对象
/// </summary>
public partial class UserListViewModel : BaseListViewModel<UserInfo, int, UserPagedDto>
{
    /// <summary>
    /// 查询过滤内容
    /// </summary>
    [ObservableProperty]
    private string _searchKey = "";

    /// <summary>
    /// 树形数据列表
    /// </summary>
    [ObservableProperty]
    private List<OuNodeInfo>? treeItems;

    /// <summary>
    /// 树形数据列表(过滤列表)
    /// </summary>
    [ObservableProperty]
    private List<OuNodeInfo>? filteredTreeItems;

    /// <summary>
    /// 选中的当前节点
    /// </summary>
    [ObservableProperty]
    private OuNodeInfo selectNode;

刚才我们通过设置选中的节点,然后触发查询GetData就是在UserListViewModel 视图模型类里面,重新构建条件进行处理的,最后还是调用基类BaseListViewModel里面的封装类的实现方法GetData。

    /// <summary>
    /// 设置父类后查询数据
    /// </summary>
    /// <returns></returns>
    public override Task GetData()
    {
        //选中的大类Id
        if (this.SelectNode != null)
        {
            this.PageDto.Dept_ID = this.SelectNode.Id.ToString();
        }

        return base.GetData();
    }

而我们的属性列表的数据源,主要就是通过页面Page的构造函数的时候,触发的数据处理,就是GetTreeCommand的调用。

/// <summary>
/// UserListPage.xaml 交互逻辑
/// </summary>
public partial class UserListPage : INavigableView<UserListViewModel>
{
    /// <summary>
    /// 视图模型对象
    /// </summary>
    public UserListViewModel ViewModel { get; }
    /// <summary>
    /// 构造函数
    /// </summary>
    /// <param name="viewModel">视图模型对象</param>
    public UserListPage(UserListViewModel viewModel)
    {
        ViewModel = viewModel;
        DataContext = this;

        InitializeComponent();

        //展示树列表
        ViewModel.GetTreeCommand.ExecuteAsync(null);
    }

其中GetTree的命令方法如下所示。

    /// <summary>
    /// 触发处理命令
    /// </summary>
    [RelayCommand]
    private async Task GetTree()
    {
        var treeeNodeList = new List<OuNodeInfo>();
        var list = await SecurityHelper.GetMyTopGroup(App.ViewModel!.UserInfo);
        foreach (var groupInfo in list)
        {
            if (groupInfo != null && !groupInfo.IsDeleted)
            {
                var node = new OuNodeInfo(groupInfo);
                var sublist = await BLLFactory<IOuService>.Instance.GetTreeByID(groupInfo.Id);
                node.Children = sublist;
                treeeNodeList.Add(node);
            }
        }
        this.TreeItems = treeeNodeList;
        this.FilteredTreeItems = new List<OuNodeInfo>(this.TreeItems);
    }

我们通过构建一个用户的顶级部门列表(如管理员可以看全部,公司管理员只能看公司节点),然后给它们填充一个子级的部门列表即可。

另外,在Xaml的界面代码里面,我们可以看到下面的代码

 <HierarchicalDataTemplate DataType="{x:Type core:OuNodeInfo}" ItemsSource="{Binding Path=Children}">

这个就是层级树形的内容设置,其中DataType指定对象的类型为OuNodeInfo类,而子节点的的数据源属性名称就是Children属性。

它的内容部分就是我们子节点的呈现界面代码模板了

    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type core:OuNodeInfo}" ItemsSource="{Binding Path=Children}">
            <StackPanel Orientation="Horizontal">
                <Button
                    hc:IconElement.Geometry="{StaticResource PageModeGeometry}"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" />            
                <Label
                    Padding="-10"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Content="{Binding Path=Name}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>

同理,对于字典模块的字典大类的展示,由于它们也是多层级的,因此也可以用TreeView进行展示,界面效果如下所示。

 

2、TreeView树形列表的右键菜单的处理

在上面的字典模块里面,我们左侧的字典大类,还需要一些右键菜单来实现字典大类的新增、编辑、清空数据项等维护功能的,因此给TreeView设置了右键菜单,如下所示效果。

 它的TreeView的Xaml代码如下所示。

<TreeView
    x:Name="dictTypeTree"
    Margin="0,10,10,0"
    ContextMenu="{StaticResource TreeMenu}"
    FontSize="16"
    ItemsSource="{Binding ViewModel.FilteredTreeItems}"

其中 ContextMenu="{StaticResource TreeMenu}" 就是设置树列表右键菜单的。

这个部分定义在页面的资源里面,如下代码所示,指定相关菜单的图片、文本,以及对应的Command方法即可。

    <Page.Resources>
        <ContextMenu x:Key="TreeMenu">
            <MenuItem Command="{Binding EditDictTypeCommand}" Header="添加字典大类">
                <MenuItem.Icon>
                    <Image Source="/Images/Add.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem
                Command="{Binding EditDictTypeCommand}"
                CommandParameter="{Binding ViewModel.SelectDictType}"
                Header="编辑字典大类">
                <MenuItem.Icon>
                    <Image Source="/Images/edit.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Command="{Binding ViewModel.DeleteTypeCommand}" Header="删除字典大类">
                <MenuItem.Icon>
                    <Image Source="/Images/remove.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Command="{Binding ViewModel.GetTreeCommand}" Header="刷新列表">
                <MenuItem.Icon>
                    <Image Source="/Images/refresh.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Command="{Binding ViewModel.ClearDataCommand}" Header="清空字典大类数据">
                <MenuItem.Icon>
                    <Image Source="/Images/clear.png" />
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
    </Page.Resources>

我们来看看后台代码的Comand命令定义,如下是编辑、新增字典大类的处理

    /// <summary>
    /// 新增、编辑字典大类
    /// </summary>
    [RelayCommand]
    private async Task EditDictType(DictTypeNodeDto info)
    {
        //获取新增、编辑页面接口
        var page = App.GetService<DictTypeEditPage>();
        page!.ViewModel.DictType = this.ViewModel.SelectDictType;

        if (info != null)
        {
            //编辑则接受传入对象
            page!.ViewModel.Item = info;
            page!.ViewModel.IsEdit = true;
        }
        else
        {
            //新增则初始化
            var pid = "-1";
            if(this.ViewModel.SelectDictType != null)
            {
                pid = this.ViewModel.SelectDictType.Id;
            }

            //前后顺序不能变化,否则无法检测属性变化
            page!.ViewModel.Item = new DictTypeInfo() { Id=Guid.NewGuid().ToString(), PID = pid, Seq = "001" };
            page!.ViewModel.IsEdit = false;
        }

        //导航到指定页面
        ViewModel.Navigate(typeof(DictTypeEditPage));
    }

同样就是获得 选中节点,如果新增作为父节点、如果是编辑,则获得当前节点的信息进行编辑即可。

这个界面里面,需要指定下拉列表的数据源作为父节点,主要就是获取当前所有字典大类即可。这里的下拉列表是ComboBox的控件,控件代码如下所示。

<ComboBox
    x:Name="txtPID"
    Grid.Column="0"
    Margin="5"
    HorizontalAlignment="Left"
    hc:InfoElement.TitlePlacement="Left"
    hc:TitleElement.Title="父项名称"
    DisplayMemberPath="Text"
    IsReadOnly="{Binding ViewModel.IsReadOnly, Mode=OneWay}"
    ItemsSource="{Binding ViewModel.ParentTypeList}"
    SelectedValue="{Binding ViewModel.Item.PID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    SelectedValuePath="Value"
    SelectionChanged="txtPID_SelectionChanged"
    Style="{StaticResource ComboBoxExtend}" />

在视图模型里面,初始化的时候,把它进行加载即可。

/// <summary>
/// 初始化处理字典大类
/// </summary>
private async void Init()
{       
    //获取字典大类列表
    var dictItems = await BLLFactory<IDictTypeService>.Instance.GetAllType(null);    
    var listItem = new List<CListItem>();
    foreach (var item in dictItems)
    {
        listItem.Add(new CListItem(item.Key, item.Value));
    }
    listItem.Insert(0, new CListItem("顶级目录项", "-1"));

    this.ParentTypeList = listItem;
    this._isInitialized = true;
}

 

3、TreeView树形列表的过滤处理

我们在构建树形列表的时候,绑定的是一个过滤的列表对象,需要根据实际情况进行改变即可。

    /// <summary>
    /// 触发处理命令
    /// </summary>
    [RelayCommand]
    private async Task GetTree()
    {
        var treeeNodeList = new List<OuNodeInfo>();
        var list = await SecurityHelper.GetMyTopGroup(App.ViewModel!.UserInfo);
        foreach (var groupInfo in list)
        {
            if (groupInfo != null && !groupInfo.IsDeleted)
            {
                var node = new OuNodeInfo(groupInfo);
                var sublist = await BLLFactory<IOuService>.Instance.GetTreeByID(groupInfo.Id);
                node.Children = sublist;
                treeeNodeList.Add(node);
            }
        }

        this.TreeItems = treeeNodeList;
        this.FilteredTreeItems = new List<OuNodeInfo>(this.TreeItems);
    }

界面的Xaml代码如下所示。

<hc:SearchBar
    Margin="0,10,10,0"
    hc:InfoElement.Placeholder="输入内容过滤"
    hc:InfoElement.ShowClearButton="True"
    IsRealTime="True"
    SearchStarted="SearchBar_OnSearchStarted"
    Style="{StaticResource SearchBarPlus}" />

如果在查询框里面输入内容,可以进行树列表的过滤,如下效果所示。

在输入内容的时候,我们触发一个事件SearchBar_OnSearchStarted 进行查询处理,根据查询的内容进行匹配处理。

    /// <summary>
    /// 过滤查询事件
    /// </summary>
    private void SearchBar_OnSearchStarted(object sender, HandyControl.Data.FunctionEventArgs<string> e)
    {
        this.ViewModel.SearchKey = e.Info;
        if (e.Info.IsNullOrEmpty())
        {
            this.ViewModel.FilteredTreeItems = this.ViewModel.TreeItems;
        }
        else
        {
            this.ViewModel.FilteredTreeItems = FindNodes(this.ViewModel.TreeItems!, e.Info);
        }
    }
    /// <summary>
    /// 递归查询嵌套节点的内容,根据规则进行匹配
    /// </summary>
    /// <typeparam name="T">数据类型</typeparam>
    /// <param name="nodes">节点集合</param>
    /// <param name="name">节点名称</param>
    /// <returns></returns>
    public List<T> FindNodes<T>(IEnumerable<T> nodes, string name) where T : OuNodeInfo
    {
        var result = new List<T>();
        foreach (var node in nodes)
        {
            if (node.Name.Contains(name, StringComparison.OrdinalIgnoreCase))
            {
                result.Add(node);
            }
            foreach (var childCategory in FindNodes(node.Children, name))
            {
                result.Add((T)childCategory);
            }
        }
        return result;
    }

这样就可以实现数据的查询过滤,实际规则可以自己根据需要进行调整。

 

与循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用相似的内容:

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(8) -- 使用Converter类实现内容的转义处理

在我们WPF应用端的时候,和WInform开发或者Vue前端开发一样,有时候也需要对内容进行转义处理,如把一些0,1数值转换为具体含义的文本信息,或者把一些布尔变量转换为是否等,都是常见的转换处理,本篇随笔介绍在WPF应用端对内容使用Converter类实现内容的转义处理的操作。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理

我们在WPF应用端的界面中,使用lepoco/wpfui 来做主要的入口框架,这个项目它的菜单内置了不少图标,我们需要在动态菜单的配置中,使用它作为图标的展示处理,本篇随笔介绍如何基于图标枚举集合进行图标的展示和选择处理。并扩展到Font-Awesome-WPF的处理进行展示和选择。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(1)

在我们的SqlSugar的开发框架中,整合了Winform端、Vue3+ElementPlus的前端、以及基于UniApp+Vue+ThorUI的移动前端几个前端处理,基本上覆盖了我们日常的应用模式了,本篇随笔进一步介绍前端应用的领域,研究集成WPF的应用端,循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(2)

在前面随笔《循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(1)》中介绍了Mvvm 的开发,以及一些界面效果,本篇随笔继续深入探讨基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发,介绍如何整合SqlSugar框架的基础接口,通过基类继承的方式,简化实际项目的开发代码处理。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件

在我们创建界面元素的时候,不管在Vue3+ElementPlus的前端上,还是Winform桌面端上,都是会利用自定义用户控件来快速重用一些自定义的界面内容,对自定义用户控件的封装处理,也是我们开发WPF应用需要熟悉的一环。本篇随笔继续深入介绍介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发,主要针对自定义用户控件的封装和使用做一些介绍。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(4) -- 实现DataGrid数据的导入和导出操作

在我们设计软件的很多地方,都看到需要对表格数据进行导入和导出的操作,主要是方便客户进行快速的数据处理和分享的功能,本篇随笔介绍基于WPF实现DataGrid数据的导入和导出操作。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用

在我们展示一些参考信息的时候,有所会用树形列表来展示结构信息,如对于有父子关系的多层级部门机构,以及一些常用如字典大类节点,也都可以利用树形列表的方式进行展示,本篇随笔介绍基于WPF的方式,使用TreeView来洗实现结构信息的展示,以及对它的菜单进行的设置、过滤查询等功能的实现逻辑。

循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(6) -- 窗口控件脏数据状态IsDirty的跟踪处理

在我们窗口新增、编辑状态下的时候,我们往往会根据是否修改过的痕迹-也就是脏数据状态进行跟踪,如果用户发生了数据修改,我们在用户退出窗口的时候,提供用户是否丢弃修改还是继续编辑,这样在一些重要录入时的时候,可以避免用户不小心关掉窗口,导致窗口的数据要重新录入的尴尬场景。本篇随笔介绍基于WPF开发中,窗...

基于SqlSugar的开发框架循序渐进介绍(29)-- 快速构建系统参数管理界面-Vue3+ElementPlus

在随笔《基于SqlSugar的开发框架循序渐进介绍(28)-- 快速构建系统参数管理界面》中介绍了基于SqlSugar开发框架,构建系统参数管理的后端API部分,以及WInform界面部分内容,本篇随笔介绍基于Vue3+ElementPlus的前端界面开发过程。

基于SqlSugar的开发框架循序渐进介绍(17)-- 基于CSRedis实现缓存的处理

在一个应用系统的开发框架中,往往很多地方需要用到缓存的处理,有些地方是为了便于记录用户的数据,有些地方是为了提高系统的响应速度,如有时候我们在发送一个短信验证码的时候,可以在缓存中设置几分钟的过期时间,这样验证短信验证码的时候,就会自动判断是否过期了。本篇随笔结合CSRedis的使用,介绍如何实现缓存的初始化及使用的处理。