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

何小豆儿在此  金牌会员 | 2024-9-6 14:47:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 853|帖子 853|积分 2559

先看一下结果吧:
    
我们直接通过改造一下原版的TreeView来实现上面这个结果
我们先创建一个普通的TreeView
代码很简单:
  1.         <TreeView>
  2.             <TreeViewItem Header="人事部"/>
  3.             <TreeViewItem Header="技术部">
  4.                 <TreeViewItem Header="技术部-1"/>
  5.                 <TreeViewItem Header="技术部-1"/>
  6.             </TreeViewItem>
  7.             <TreeViewItem Header="财务部"/>
  8.         </TreeView>
复制代码
实现的结果如下:

如果把这个当成是项目标菜单栏，应该会被领导骂死，一个是不敷灵活，数据是写死的；二是样式欠悦目，只有点笔墨部分才会展开。
创建一下模板

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

里面有一个叫Bd的border，我们把这个border的背景色去掉,然后我们自己去创建两个新的border
  1. <Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  2. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  3.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  4.     <Border.Effect>
  5.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  6.     </Border.Effect>
  7. </Border>
  8. <ToggleButton x:Name="Expander" ClickMode="Press"
  9.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  10.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  11. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  12.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  13. </Border>
复制代码
上面红色部分是我们新增的两个border，原本的叫Bd的border，我们只保留紫色部分的属性.
原本的代码里面有两个关于Bd的trigger

我们取名为bd1的border，最开始的Visibility设置的是Hidden,我们更换一下关于Bd的trigger，让它变成当IsSelected是true的情况下，让bd1的Visibility变成Visible.
  1. <Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  2. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  3.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  4.     <Border.Effect>
  5.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  6.     </Border.Effect>
  7. </Border>
  8. <ToggleButton x:Name="Expander" ClickMode="Press"
  9.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  10.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  11. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  12.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  13. </Border><Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  14. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  15.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  16.     <Border.Effect>
  17.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  18.     </Border.Effect>
  19. </Border>
  20. <ToggleButton x:Name="Expander" ClickMode="Press"
  21.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  22.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  23. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  24.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  25. </Border>   
复制代码
再运行一下，看一下结果

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

如果我们每一个TreeViewItem都复制一下这句 ,是不是显得很呆，而且这只是在我们的菜单很少的情况下，如果菜单很多，这个方法就不可行。
所以这里我们用一个TreeView的ItemContainerStyle来操作一下
  1.         
复制代码
我们创建一个类型是TreeView的style，把它的ItemContainerStyle设置成我们之前添加的谁人style，然后我们把这个style放到我们的TreeView上

这个时候我们再运行就会发现首级菜单的样式都实现我们想要的结果了,但是子集菜单还是原来的样式
我们在代码里面添加下面一个方法
  1.         private void ApplyItemContainerStyle(ItemsControl itemsControl)        {            foreach (var item in itemsControl.Items)            {                var treeViewItem = item as TreeViewItem;                if (treeViewItem != null)                {<Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  2. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  3.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  4.     <Border.Effect>
  5.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  6.     </Border.Effect>
  7. </Border>
  8. <ToggleButton x:Name="Expander" ClickMode="Press"
  9.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  10.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  11. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  12.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  13. </Border>treeViewItem.Style = treeview1.ItemContainerStyle;<Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  14. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  15.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  16.     <Border.Effect>
  17.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  18.     </Border.Effect>
  19. </Border>
  20. <ToggleButton x:Name="Expander" ClickMode="Press"
  21.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  22.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  23. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  24.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  25. </Border>ApplyItemContainerStyle(treeViewItem);                }            }        }
复制代码
然后我们在构造函数里面把我们的TreeView当做是参数传进去
这个方法就是把全部的item和item的子项都设置成treeview的ItemContainerStyle;

我们再启动一下项目，就会发现结果是我们想要的结果了
到这里实在大部分结果都实现了,基本上也可以向领导交差了;
但是还缺少一个数据可拓展性和一个图标的功能,我们先看一下数据可拓展性
在平时的项目里面，一般都会有很多个不同的项目，每个项目可能都有好多个菜单，有的项目还想隐藏某一些菜单，我们总不能全部项目都通过visible属性来设置吧
特别是报表功能可能会有几十个，所以我们需要用到一个东西叫数据模板:HierarchicalDataTemplate;
我们先创建一个类
  1.     public class TreeViewModel
  2.     {
  3.         public string Header { get; set; }
  4.         public ObservableCollection<TreeViewModel> Children { get; set; }
  5.     }
复制代码
然后回到设计器里面，把我们的代码改成下面的代码
  1. <Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  2. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  3.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  4.     <Border.Effect>
  5.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  6.     </Border.Effect>
  7. </Border>
  8. <ToggleButton x:Name="Expander" ClickMode="Press"
  9.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  10.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  11. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  12.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  13. </Border><Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  14. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  15.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  16.     <Border.Effect>
  17.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  18.     </Border.Effect>
  19. </Border>
  20. <ToggleButton x:Name="Expander" ClickMode="Press"
  21.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  22.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  23. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  24.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  25. </Border><Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  26. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  27.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  28.     <Border.Effect>
  29.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  30.     </Border.Effect>
  31. </Border>
  32. <ToggleButton x:Name="Expander" ClickMode="Press"
  33.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  34.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  35. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  36.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  37. </Border>   
复制代码
对比一下红色部分的绑定，和类的属性，就能知道这个数据模板怎么用了.
再到构造函数里面去添加数据
  1. public ObservableCollection<TreeViewModel> MenuCollection { get; set; }
  3. public MainWindow()
  4. {
  5.     InitializeComponent();
  8.     MenuCollection = new ObservableCollection<TreeViewModel>()
  9.     {
  10.         new TreeViewModel
  11.         {
  12.             Header = "人事部"
  13.         },
  14.         new TreeViewModel
  15.         {
  16.             Header = "技术部",
  17.             Children = new ObservableCollection<TreeViewModel>
  18.             {
  19.                 new TreeViewModel { Header = "技术部-1"},
  20.                 new TreeViewModel { Header = "技术部-2"},
  21.             }
  22.         },
  23.         new TreeViewModel
  24.         {
  25.             Header = "财务部",
  26.         },
  27.     };
  29.     treeview1.ItemsSource = MenuCollection;
  30. }
复制代码
注意这两段标红的代码，我们用一个聚集MenuCollection模仿一下我们从数据库或者其他地方查询出来的菜单聚集，然后把它做为数据源给treeview就可以了
再运行一下项目，它就差不多实现我们想要的结果了,现在再去找领导交差，领导还会夸你做的不错，只是还差一个图标了，这个就是锦上添花的东西了.
我们百度搜索一下  阿里ICON，去到官网里面，创建一个自己的账号，然后搜索一些自己喜欢的图标

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



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

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

把它作为资源引入到代码里面
  1. <FontFamily x:Key="FatSheep">pack:application:,,,/自己项目的名字;component/Resources/iconfont.ttf#FatSheep</FontFamily>
复制代码
记得修改一下自己的项目名字，我取的是TreeViewDemo，改成自己的项目名就好了，最后的结尾，是FatSheep，记得改成自己的ICON项目名称
接着我们在TreeViewModel里面添加一个Icon属性
  1.     public class TreeViewModel
  2.     {
  3.         public string Header { get; set; }
  4.         public string Icon { get; set; }
  5.         public ObservableCollection<TreeViewModel> Children { get; set; }
  6.     }
复制代码
然后我们在数据源里面添加一下数据
  1. MenuCollection = new ObservableCollection<TreeViewModel>()
  2. {
  3.     new TreeViewModel
  4.     {
  5.         Header = "人事部",
  6.         Icon = "\ue71c"
  7.     },
  8.     new TreeViewModel
  9.     {
  10.         Header = "技术部",
  11.         Icon = "\ue71c",
  12.         Children = new ObservableCollection<TreeViewModel>
  13.         {
  14.             new TreeViewModel { Header = "技术部-1", Icon="\ue71c"},
  15.             new TreeViewModel { Header = "技术部-2" , Icon="\ue71c"},
  16.         }
  17.     },
  18.     new TreeViewModel
  19.     {
  20.         Header = "财务部",
  21.         Icon = "\ue71c"
  22.     },
  23. };
复制代码
设计器里面添加一下体现部分的代码
  1. <Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  2. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  3.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  4.     <Border.Effect>
  5.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  6.     </Border.Effect>
  7. </Border>
  8. <ToggleButton x:Name="Expander" ClickMode="Press"
  9.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  10.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  11. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  12.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  13. </Border><Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  14. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  15.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  16.     <Border.Effect>
  17.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  18.     </Border.Effect>
  19. </Border>
  20. <ToggleButton x:Name="Expander" ClickMode="Press"
  21.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  22.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  23. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  24.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  25. </Border><Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  26. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  27.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  28.     <Border.Effect>
  29.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  30.     </Border.Effect>
  31. </Border>
  32. <ToggleButton x:Name="Expander" ClickMode="Press"
  33.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  34.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  35. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  36.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  37. </Border><Border Background="Transparent" Margin="-200,0,-200,0" Grid.ColumnSpan="4"/>
  38. <Border x:Name="bd1" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  39.         Margin="-200,0,-200,0" Visibility="Hidden" Grid.ColumnSpan="4">
  40.     <Border.Effect>
  41.         <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
  42.     </Border.Effect>
  43. </Border>
  44. <ToggleButton x:Name="Expander" ClickMode="Press"
  45.               IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  46.               Style="{StaticResource ExpandCollapseToggleStyle}"/>
  47. <Border x:Name="Bd" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
  48.     <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  49. </Border>
复制代码
再启动项目，功能就完成了

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

我们复制一下这个代码,     我们把它改成 \ue71c,这是一个转义字符，就如许我们就能添加如何自己喜欢的图标了。
 
 
项目github地址：bearhanQ/WPFFramework: Share some experience (github.com)
QQ技术交流群：332035933；
欢迎进群讨论问题，不论是winform，还是wpf，还是.net core的，还有很多萌妹.
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

何小豆儿在此

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表