WPF 保姆级教程怎么实现一个树形菜单

news2024/11/17 7:43:05

先看一下效果吧:

    

我们直接通过改造一下原版的TreeView来实现上面这个效果

我们先创建一个普通的TreeView

代码很简单:

<TreeView>
            <TreeViewItem Header="人事部"/>
            <TreeViewItem Header="技术部">
                <TreeViewItem Header="技术部-1"/>
                <TreeViewItem Header="技术部-1"/>
            </TreeViewItem>
            <TreeViewItem Header="财务部"/>
        </TreeView>

实现的效果如下:

如果把这个当成是项目的菜单栏,应该会被领导骂死,一个是不够灵活,数据是写死的;二是样式不好看,只有点文字部分才会展开。

创建一下模板

直接在设计器中右键我们的item,编辑副本,点击确定,我们会得到下面一段代码

里面有一个叫Bd的border,我们把这个border的背景色去掉,然后我们自己去创建两个新的border

<Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
<Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" 
        Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
    <Border.Effect>
        <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
    </Border.Effect>
</Border>
<ToggleButton x:Name="Expander" ClickMode="Press" 
              IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
              Style="{StaticResource ExpandCollapseToggleStyle}"/>
<Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
    <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>

上面红色部分是我们新增的两个border,原本的叫Bd的border,我们只保留紫色部分的属性.

原本的代码里面有两个关于Bd的trigger

我们取名为bd1的border,最开始的Visibility设置的是Hidden,我们替换一下关于Bd的trigger,让它变成当IsSelected是true的情况下,让bd1的Visibility变成Visible.

<Trigger Property="IsSelected" Value="true">
    <Setter Property="Visibility" TargetName="bd1" Value="Visible"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="true"/>
        <Condition Property="IsSelectionActive" Value="false"/>
    </MultiTrigger.Conditions>
    <Setter Property="Visibility" TargetName="bd1" Value="Visible"/>
    <Setter Property="Background" TargetName="bd1" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>

再运行一下,看一下效果

基本上已经算是成功一半了,但是这个时候,我们的菜单只有一个有效果,其他的还是原来的样式,那是因为我们只有一个TreeViewItem使用了我们写的效果

如果我们每一个TreeViewItem都复制一下这句Style="{DynamicResource TreeViewItemStyle1}" ,是不是显得很呆,而且这只是在我们的菜单很少的情况下,如果菜单很多,这个方法就不可行。

所以这里我们用一个TreeView的ItemContainerStyle来操作一下

        <Style x:Key="treeViewStyle1" TargetType="{x:Type TreeView}" BasedOn="{StaticResource {x:Type TreeView}}">
            <Setter Property="ItemContainerStyle" Value="{StaticResource TreeViewItemStyle1}"/>
        </Style>

我们创建一个类型是TreeView的style,把它的ItemContainerStyle设置成我们之前添加的那个style,然后我们把这个style放到我们的TreeView上

这个时候我们再运行就会发现首级菜单的样式都实现我们想要的效果了,但是子集菜单还是原来的样式

我们在代码里面添加下面一个方法

private void ApplyItemContainerStyle(ItemsControl itemsControl)
        {
            foreach (var item in itemsControl.Items)
            {
                var treeViewItem = item as TreeViewItem;
                if (treeViewItem != null)
                {
                    treeViewItem.Style = treeview1.ItemContainerStyle;
                    ApplyItemContainerStyle(treeViewItem);
                }
            }
        }

然后我们在构造函数里面把我们的TreeView当做是参数传进去

这个方法就是把所有的item和item的子项都设置成treeview的ItemContainerStyle;

我们再启动一下项目,就会发现效果是我们想要的效果了

到这里其实大部分效果都实现了,基本上也可以向领导交差了;

但是还缺少一个数据可拓展性和一个图标的功能,我们先看一下数据可拓展性

在平时的项目里面,一般都会有很多个不同的项目,每个项目可能都有好多个菜单,有的项目还想隐藏某一些菜单,我们总不能所有项目都通过visible属性来设置吧

特别是报表功能可能会有几十个,所以我们需要用到一个东西叫数据模板:HierarchicalDataTemplate;

我们先创建一个类

    public class TreeViewModel
    {
        public string Header { get; set; }
        public ObservableCollection<TreeViewModel> Children { get; set; }
    }

然后回到设计器里面,把我们的代码改成下面的代码

<TreeView Style="{DynamicResource treeViewStyle1}" x:Name="treeview1">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:TreeViewModel}" ItemsSource="{Binding Children}">
            <StackPanel Height="40" Orientation="Horizontal">
                <TextBlock Text="{Binding Header}" VerticalAlignment="Center"/>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

对比一下红色部分的绑定,和类的属性,就能知道这个数据模板怎么用了.

再到构造函数里面去添加数据

public ObservableCollection<TreeViewModel> MenuCollection { get; set; }

public MainWindow()
{
    InitializeComponent();


    MenuCollection = new ObservableCollection<TreeViewModel>()
    {
        new TreeViewModel
        {
            Header = "人事部"
        },
        new TreeViewModel
        {
            Header = "技术部",
            Children = new ObservableCollection<TreeViewModel>
            {
                new TreeViewModel { Header = "技术部-1"},
                new TreeViewModel { Header = "技术部-2"},
            }
        },
        new TreeViewModel
        {
            Header = "财务部",
        },
    };

    treeview1.ItemsSource = MenuCollection;
}

注意这两段标红的代码,我们用一个集合MenuCollection模拟一下我们从数据库或者其他地方查询出来的菜单集合,然后把它做为数据源给treeview就可以了

再运行一下项目,它就差不多实现我们想要的效果了,现在再去找领导交差,领导还会夸你做的不错,只是还差一个图标了,这个就是锦上添花的东西了.

我们百度搜索一下  阿里ICON,去到官网里面,创建一个自己的账号,然后搜索一些自己喜欢的图标

 把自己喜欢的图标添加到自己的项目中去,这里的项目名很重要,我取的是  FatSheep

 在到我的项目里面去把这个资源文件下载到自己的项目中

 下载下来的文件,我们把ttf后缀的文件添加到我们的项目里面去

把它作为资源引入到代码里面

<FontFamily x:Key="FatSheep">pack:application:,,,/自己项目的名字;component/Resources/iconfont.ttf#FatSheep</FontFamily>

记得修改一下自己的项目名字,我取的是TreeViewDemo,改成自己的项目名就好了,最后的结尾,是FatSheep,记得改成自己的ICON项目名称

接着我们在TreeViewModel里面添加一个Icon属性

public class TreeViewModel
    {
        public string Header { get; set; }
        public string Icon { get; set; }
        public ObservableCollection<TreeViewModel> Children { get; set; }
    }

然后我们在数据源里面添加一下数据

MenuCollection = new ObservableCollection<TreeViewModel>()
{
    new TreeViewModel
    {
        Header = "人事部",
        Icon = "\ue71c"
    },
    new TreeViewModel
    {
        Header = "技术部",
        Icon = "\ue71c",
        Children = new ObservableCollection<TreeViewModel>
        {
            new TreeViewModel { Header = "技术部-1", Icon="\ue71c"},
            new TreeViewModel { Header = "技术部-2" , Icon="\ue71c"},
        }
    },
    new TreeViewModel
    {
        Header = "财务部",
        Icon = "\ue71c"
    },
};

设计器里面添加一下显示部分的代码

<TreeView Style="{StaticResource treeViewStyle1}" x:Name="treeView1" BorderThickness="0,0,1,0" Grid.Column="1">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:TreeViewModel}" ItemsSource="{Binding Children}">
            <StackPanel Height="40" Orientation="Horizontal">
                <TextBlock Text="{Binding Icon}" VerticalAlignment="Center" FontFamily="{StaticResource FatSheep}" Margin="0,0,5,0"/>
                <TextBlock Text="{Binding Header}" VerticalAlignment="Center"/>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

再启动项目,功能就完成了

这个笑脸是怎么来的了

那是因为我自己的项目里面添加了一个笑脸

我们复制一下这个代码,   &#xe71c;  我们把它改成 \ue71c,这是一个转义字符,就这样我们就能添加如何自己喜欢的图标了。

文章转载自:BearHan

原文链接:https://www.cnblogs.com/lvpp13/p/18400310

体验地址:引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2119842.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

低代码平台:助力企业数字化转型的利器

正文&#xff1a; 在数字化时代的浪潮中&#xff0c;企业需要快速适应市场变化和技术进步。传统的软件开发方法往往由于开发周期长、成本高和对技术人员的依赖程度高&#xff0c;难以满足企业的快速响应需求。此时&#xff0c;低代码平台&#xff08;Low-Code Platform&#x…

干货分享|分享一款微软出品的工作效率神器 PowerToys

工具介绍&#xff1a;Microsoft PowerToys 是一组实用工具&#xff0c;可帮助高级用户调整和简化其 Windows 体验&#xff0c;从而提高工作效率。 安装步骤&#xff1a;直接打开微软商店安装即可&#xff0c;并且可以保证下载到最新版本。 功能介绍&#xff1a; 高级粘贴 高级…

js react 笔记 2

起因&#xff0c; 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块 const { randomUUID } require(crypto);const uuid randomUUID(); console.log(uuid); // 输出类似 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d 2. 使用 props, 传递参数…

[uniapp/wx小程序] 关于cover-view滚动/点击穿透问题的解决方案/cover-view 的坑

情况&#xff1a;如果在原生组件上&#xff0c;搞了一些弹窗、覆盖层、操作栏等等的东西&#xff0c;有层级的情况&#xff0c;就会出现事件穿透的问题 问题&#xff1a;自然会想到官方给出的解决方案&#xff1a;使用cover-view。但有时穿透问题虽然解决了&#xff0c;但会出…

【NanoEdgeAIStudio】初次体验

本文前言 NanoEdge ai Studio是ST提供的免费软件&#xff0c;可以轻松地将ai添加到任何Arm Cortex-M MCU上运行的任何嵌入式项目中。官网首页&#xff1a;NanoEdge AI Studio&#xff0c;官方文档&#xff1a;AI:NanoEdge AI Studio。官方文档写的很详细&#xff0c;建议观看。…

Python 从入门到实战12(流程控制-跳出循环语句)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们通过举例学习了流程控制语句中的循环语句。今天继续讨…

【数据结构】顺序表和链表——链表(包含大量经典链表算法题)

文章目录 1. 单链表1.1 概念与结构1.1.1 结点1.1.2 链表的性质1.1.3 链表的打印 1.2 实现单链表1.3 链表的分类1.4 单链表算法题1.4.1 移除链表元素1.4.2 反转链表1.4.3 链表的中间结点1.4.4 合并两个有序链表1.4.5 链表分割1.4.6 链表的回文结构1.4.7 相交链表1.4.8 环形链表1…

【运维监控】influxdb 2.0+grafana 监控java 虚拟机以及方法耗时情况(完整版)

关于java应用的监控本系列有文章如下&#xff1a; 【运维监控】influxdb 2.0telegraf 监控tomcat 8.5运行情况 【运维监控】influxdb 2.0grafana 监控java 虚拟机以及方法耗时情况 【运维监控】Prometheusgrafana监控tomcat运行情况 【运维监控】Prometheusgrafana监控spring b…

软考科目傻傻分不清?一次搞懂各科目考核内容!小白不再纠结!

2024年下半年软考报名已经逐步进入尾声了&#xff0c;大部分考生都已完成报名&#xff0c;但有不少小白因为是第一次报考&#xff0c;对各科目傻傻分不清&#xff0c;导致报错了科目…… 这种情况很可能会影响考试&#xff0c;浪费了一次报考机会。而为了尽量避免这一情况再发生…

个人简历 (自己设计的)

欢迎大家来观看。 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" co…

国产“小钢炮”MiniCPM3-4B:小参数,大能量!

前沿科技速递&#x1f680; 在 AI 大模型浪潮中&#xff0c;国内厂商面壁智能再次突破&#xff0c;推出了其最新的“小钢炮”系列——MiniCPM 3.0。这款全新模型不仅实现了在移动设备上运行 GPT-3.5 级别的能力&#xff0c;而且具备超强的推理、检索与代码解释功能。MiniCPM 3.…

Python必知必会:程序员必须知道的22个Python单行代码!

今天给大家分享24个每个Python程序员都必须知道的单行代码&#xff0c;帮你写出更简洁、更优雅、更高效的代码。 1. 列表推导式 列表推导式&#xff08;List Comprehensions&#xff09;可以提供一种简洁的方式创建列表。相较于传统的循环&#xff0c;列表推导式更高效、可读…

240909-ChuanhuChatGPT集成Ollama的环境配置

A. 最终效果 B. 需求文件 requirements.txt (至少需要安装这个&#xff0c;具体参见官网)requirements_advanced.txt &#xff08;如果安装了Ollama&#xff0c;并且可以进行对话&#xff0c;可以不需要安装&#xff0c;具体参见官网&#xff09;requirements_succcess.txt&am…

Qt5.4.1连接odbc驱动操作达梦数据库

Qt5.4.1连接odbc驱动操作达梦数据库 1 环境介绍2 Qt5.4.1 安装2.1 图形化界面安装Qt5.4.12.2 配置Qt5.4.1 环境变量2.3 Qt5.4.1 生成 libqsqlodbc.so 并配置2.3.1 生成Makefile2.3.2 查看 libqsqlodbc.so 文件并配置 3 配置Qt测试用例4 达梦数据库学习使用列表 1 环境介绍 CPU…

SAP加密解密功能设计

SAP加密解密功能设计 【场景】与外围系统对接时&#xff0c;出于信息安全等因素&#xff0c;经常需要对传输的信息做加密解密控制。 1. 公用类zcl_aes_utility *----------------------------------------------------------------------* * CLASS ZCL_AES_UTILITY DEFI…

Ubuntu 22.04 安装增强功能失败

安装的时候&#xff0c;总是失败&#xff0c;然后根据提示查看 log 猜测可能需要安装g12 ubuntu22.04.2 目前(until 23.6.25) gcc 的默认版本是 11.3.0, 有些 c 的特性无法享用.Launchpad toolchain test buildsLanchpad toolchain build 将 Lanchpad 上的 PPA 加入到 apt 搜…

用Python包加速你的视频剪辑:Tailor工具全解析

Tailor是一款视频智能裁剪、视频生成和视频优化的视频剪辑工具。目前的目标是通过人工智能技术减少视频剪辑的繁琐操作&#xff0c;让普通人也能简单实现专业剪辑人的水准&#xff01;长远目标是让视频剪辑实现真正的AIGC&#xff01; 当然&#xff0c;这是一份Python包的列表…

分组注解和自定义注解及分页查询

自定义注解的使用步骤 案例&#xff1a; 此时state需要进行的校验使用普通方式无法满足&#xff0c;需要我们根据需求进行自定义注解 创建一个注解 Documented//元注解 Retention(RetentionPolicy.RUNTIME)//元注解 Constraint(validatedBy {StateValidation.class}//指定提供…

DPDK基础入门(七):网卡性能优化

DPDK的轮询模式 运行在操作系统内核态的网卡驱动程序基本都是基于异步中断处理模式&#xff0c;而DPDK采用了轮询或者轮询混杂中断的模式来进行收包和发包。 任何包进入到网卡&#xff0c;网卡硬件会进行必要的检查、计算、解析和过滤等&#xff0c;最终包会进入物理端口的某…

最高1000万 各地模型和算法备案补贴政策一览

最高1000万 各地模型和算法备案补贴政策一览 2024年7月31日&#xff0c;成都市的人工智能产业再度引起关注。通过国家大模型备案的三家企业——海艺互娱、晓多科技和明途科技&#xff0c;获得了成都市经信局市新经济委的百万奖励。这一奖励源自成都发布的《成都市进一步促进人工…