WPF+MVVM案例实战（十五）- 实现一个下拉式菜单（上）

文章目录

  • 1 案例效果
  • 2、图标资源下载
  • 3、功能实现
    • 1.文件创建
    • 2、菜单原理分析
    • 3、一级菜单两种样式实现
      • 1、一级菜单无子项样式实现
      • 2、一级菜单有子项样式实现
  • 4、总结

1 案例效果

`提示在这里插入图片描述

2、图标资源下载

从阿里矢量素材官网下载需要的菜单图片，如下所示：
在这里插入图片描述

3、功能实现

1.文件创建

打开 Wpf_Examples 项目，在Views 文件夹下创建 窗体 DropDownMenuWindow.xaml 文件。这里我们拆解一下菜单结构，如下图所示

在这里插入图片描述
在WPF中菜单控件为 Menu 菜单项为 MenuItem。如果仅从菜单结构描述，那么如下所示即可实现三级结构。
在这里插入图片描述

 <MenuItem Header="一级菜单" Width="80" Height="30"><MenuItem Header="二级菜单名1" Width="80" Height="30"><MenuItem Header="三级菜单" Width="80" Height="30"></MenuItem></MenuItem><MenuItem Header="二级菜单名2" Width="80" Height="30"></MenuItem><MenuItem Header="二级菜单名3" Width="80" Height="30"></MenuItem></MenuItem>

这就是三级菜单的框架了，我们要做的其实就是美化样式和点击效果了。

2、菜单原理分析

看了上面，我们明白了菜单就是 MenuItem 的嵌套，每一层就是 MenuItem 的样式实现，那么这个样式有规律吗，答案是有的。首先观察一级菜单，发现一级菜单的面板是在菜单的正下方出现，而二级菜单是在菜单项的右侧出现。每个菜单分两种情况，有子菜单项和无子菜单项两种情况。到这里我们已经明白了，菜单其实只有四种样式，一级菜单无子项样式、一级菜单有子项样式、二级菜单无子项样式和二级菜单有子项样式。而不管多少级菜单，只要是一级菜单就使用 一级菜单无子项样式或一级菜单有子项样式，二级及以上菜单就使用二级菜单无子项样式和二级菜单有子项样式。明白了以上道理，我们来逐个实现样式。

3、一级菜单两种样式实现

1、一级菜单无子项样式实现

首先样式按照下图分割：
在这里插入图片描述
整个样式 MenuItemStyle 实现如下：

 <Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type MenuItem}"><Border x:Name="border" BorderThickness="0" CornerRadius="5"Background="{TemplateBinding Background}"Height="{TemplateBinding Height}"Width="{TemplateBinding Width}" ><Grid><ContentPresenter ContentSource="Icon" HorizontalAlignment="Left"VerticalAlignment="Center" Height="16"Width="16" Margin="8 0 0 0"/><ContentPresenter ContentSource="Header" HorizontalAlignment="Left"VerticalAlignment="Center" TextBlock.Foreground="{TemplateBinding Foreground}"TextBlock.FontFamily="{TemplateBinding FontFamily}"TextBlock.FontSize="{TemplateBinding FontSize}"Margin="30 0 0 0"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsHighlighted" Value="True"><Setter Property="Background" TargetName="border" Value="#524E4F"/><Setter Property="BorderBrush" TargetName="border" Value="#524E4F"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

结合图示，很容易就能理解每个样式属性的含义，最后加上样式触发效果，IsHighlighted 选中后背景色改变即可。
我们应用样式后效果如下：

 <MenuItem Header="一级菜单" Width="100" Height="30" Style="{StaticResource MenuItemStyle}"><MenuItem.Icon><Image Source="/Assets/Images/bianji.png" /></MenuItem.Icon><MenuItem Header="二级菜单名1" Width="80" Height="30"><MenuItem Header="三级菜单" Width="80" Height="30"></MenuItem></MenuItem><MenuItem Header="二级菜单名2" Width="80" Height="30"></MenuItem><MenuItem Header="二级菜单名3" Width="80" Height="30"></MenuItem></MenuItem>

在这里插入图片描述
是不是有感觉了，由于样式是不带子项的，所以子项菜单在应用无子项菜单样式就没办法看到子项面板了。那么接下来实现有子项菜单的样式。

2、一级菜单有子项样式实现

分析一下有子项的菜单，其实就是在一级菜菜单下方增加一个弹出的面板。然后再弹出的面板上实现样式。粉衣及时不难发现应该和无子项样式差不多，只需要稍微改造一下，增加一个弹出面板。MenuItemStyleDropDown 示意图如下所示：

在这里插入图片描述
按照上述示意图，很容易在一级无子项菜单的样式上改造，改造后的代码如下：

 <Style x:Key="MenuItemStyleDropDown" TargetType="MenuItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type MenuItem}"><Border x:Name="border" Background="{TemplateBinding Background}"BorderThickness="0" Height="{TemplateBinding Height}"Width="{TemplateBinding Width}" CornerRadius="5"><Grid><ContentPresenter ContentSource="Icon" HorizontalAlignment="Left"VerticalAlignment="Center" Height="16"Width="16" Margin="8 0 0 0"/><ContentPresenter ContentSource="Header" HorizontalAlignment="Left"VerticalAlignment="Center" TextBlock.Foreground="{TemplateBinding Foreground}"TextBlock.FontFamily="{TemplateBinding FontFamily}"TextBlock.FontSize="{TemplateBinding FontSize}"Margin="30 0 0 0"/><Image Source="/Assets/Images/small_down.png" Stretch="Uniform" HorizontalAlignment="Right"VerticalAlignment="Center" Margin="0 0 10 0" Width="15" Height="15"/><Popup x:Name="PART_Popup" AllowsTransparency="True" IsOpen="{Binding IsSubmenuOpen,RelativeSource={RelativeSource TemplatedParent}}"Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimation}}"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Background}"><ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden"><Grid><ItemsPresenter x:Name="ItemsPresenter"/></Grid></ScrollViewer></Border></Popup></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsHighlighted" Value="True"><Setter Property="Background" TargetName="border" Value="#524E4F"/><Setter Property="BorderBrush" TargetName="border" Value="#524E4F"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

对比如下所示：

在这里插入图片描述
想要二级菜单显示，我们需要把二级菜单样式写出来才能看到，这里我们和一级菜单逻辑一样，先实现无子项的菜单样式 ChildMenuItemStyle 。同样二级面板和一级的无子项样式类似，复制改造后 ChildMenuItemStyle 样式如下所示：

 <Style x:Key="ChildMenuItemStyle" TargetType="{x:Type MenuItem}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type MenuItem}"><Border x:Name="border" BorderThickness="0"Background="{Binding Path=Background,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Menu}}}"Height="{TemplateBinding Height}"Width="{TemplateBinding Width}" ><Grid><ContentPresenter ContentSource="Icon" HorizontalAlignment="Left"VerticalAlignment="Center" Height="16"Width="16" Margin="8 0 0 0"/><ContentPresenter ContentSource="Header" HorizontalAlignment="Left"VerticalAlignment="Center" TextBlock.Foreground="{TemplateBinding Foreground}"TextBlock.FontFamily="{TemplateBinding FontFamily}"TextBlock.FontSize="{TemplateBinding FontSize}"Margin="30 0 0 0"/><!--菜单选中时左侧增加高亮竖线效果--><Grid x:Name="HeightLine" Height="{TemplateBinding Height}" Width="2" Background="White" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="Collapsed"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsHighlighted" Value="True"><Setter Property="Background" TargetName="border" Value="#524E4F"/><Setter Property="BorderBrush" TargetName="border" Value="#524E4F"/><Setter Property="Visibility" TargetName="HeightLine" Value="Visible"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

然后我们使用有子项菜单样式看看例子效果：

在这里插入图片描述

4、总结

到这，我么其实已经实现了一个二级菜单的全部功能，无非就是 MenuItem 的嵌套。对WPF上位机开发感兴趣的小伙伴可以点击关注和收藏，又想要实现的功能特效欢迎留言，本人不定时按照需求推出更多案例，下一节，将讲完整个下拉菜单的实现。

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【环境搭建】Apache ZooKeeper 3.8.4 Stable

【环境搭建】Apache ZooKeeper 3.8.4 Stable

软件环境 Ubuntu 20.04 、OpenJDK 11 OpenJDK 11&#xff08;如果已经安装&#xff0c;可以跳过这一步&#xff09; 安装OpenJDK 11&#xff1a; $ sudo apt-get update$ sudo apt-get install -y openjdk-11-jdk 设置 JAVA_HOME 环境变量&#xff1a; $ sudo gedit ~/.bash…
阅读更多...
后台管理系统的通用权限解决方案(九)SpringBoot整合jjwt实现登录认证鉴权

后台管理系统的通用权限解决方案(九)SpringBoot整合jjwt实现登录认证鉴权

1&#xff09;创建maven工程jjwt-login-demo&#xff0c;并配置其pom.xml文件如下 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-ins…
阅读更多...
国考报名照片无法使用照片审核工具上传失败的解决办法

国考报名照片无法使用照片审核工具上传失败的解决办法

国考报名过程中&#xff0c;照片审核是至关重要的一步&#xff0c;但许多考生在上传照片时遇到了难题&#xff0c;导致无法继续报名&#xff0c;从而影响抢考场位置&#xff0c;下面就介绍如何快速完成照片处理、审核和上传过审的技巧。 一、国考报名照片基本要求首先&#xff…
阅读更多...
vue中如何为不同功能设置不同的默认打印设置（设置不同的打印机）

vue中如何为不同功能设置不同的默认打印设置（设置不同的打印机）

浏览器自带的window.print 功能较简单&#xff0c;这里使用LODOP露肚皮打印 以下是vue2示例&#xff1a; 从官网中下载Lodop和C-Lodop官网主站安装包并安装到本地电脑可以全局搜索电脑找到安装文件LodopFuncs.js&#xff0c;也可以直接复制我贴出来的文件 //用双端口加载主JS…
阅读更多...
数据库管理系统的ACID都各自是什么？

数据库管理系统的ACID都各自是什么？

本文基于DBMS中ACID属性的概念&#xff0c;这些属性保证了数据库中执行事务时保持数据一致性、完整性和可靠性所。事务是访问并可能修改数据库内容的单一逻辑工作单元。交易使用读写操作访问数据。为了保持数据库的一致性&#xff0c;在事务前后&#xff0c;遵循某些属性。这些…
阅读更多...
ssm基于vue搭建的新闻网站+vue

ssm基于vue搭建的新闻网站+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 [2 系统…
阅读更多...
OB_GINS_day3

OB_GINS_day3

这里写目录标题 实现当前状态初始化实现预积分的初始化由于此时preintegration_options 是3&#xff08;也就是考虑odo以及earth rotation&#xff09;为预积分的容器添加需要积分的IMU积分因子接下来是添加新的IMU到preintegration中 实现当前状态初始化 这个state_curr的主要…
阅读更多...
如何优化kafka和mysql处理百万级消息计算和落库

如何优化kafka和mysql处理百万级消息计算和落库

一.业务场景 最近业务需要&#xff0c;做了性能优化操作。百万级消息在kafka中秒级传输。cpu密集计算分钟级完成&#xff0c;然后在mysql中秒级落库.模型cpu计算提高了1倍&#xff0c;落表速度提高了5倍&#xff0c;2分钟内完成. 如下序列图&#xff1a; 业务系统A发送千级别…
阅读更多...
深度学习基础知识-Batch Normalization（BN）超详细解析

深度学习基础知识-Batch Normalization（BN）超详细解析

一、背景和问题定义 在深层神经网络&#xff08;Deep Neural Networks, DNNs&#xff09;中&#xff0c;层与层之间的输入分布会随着参数更新不断发生变化&#xff0c;这种现象被称为内部协变量偏移&#xff08;Internal Covariate Shift&#xff09;。具体来说&#xff0c;由…
阅读更多...
NLP算法工程师精进之路：顶会论文研读精华

NLP算法工程师精进之路：顶会论文研读精华

1.学术能力培养 全部论文资料下载&#xff1a; 将论文和 GitHub 资源库匹配 papers with code https://paperswithcode.com/OpenGitHub 新项目快报Github pwc&#xff1a;https://github.com/zziz/pwc GitXiv&#xff1a;http://www.gitxiv.com/ 文章撰写 Overleaf [Autho…
阅读更多...
从倍压整流到二极管钳位与限幅

从倍压整流到二极管钳位与限幅

何为倍压整流&#xff1f;这里直接引用“百度百科”解释&#xff0c;如下述。 在一些需用高电压、小电流的地方&#xff0c;常常使用倍压整流电路。倍压整流&#xff0c;可以把较低的交流电压&#xff0c;用耐压较高的整流二极管和电容器&#xff0c;“整”出一个较高的直流电…
阅读更多...
Java项目实战II基于Java+Spring Boot+MySQL的工程教育认证的计算机课程管理平台(源码+数据库+文档)

Java项目实战II基于Java+Spring Boot+MySQL的工程教育认证的计算机课程管理平台(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着工程教…
阅读更多...
uniapp开发小程序【简单的实现点击下拉选择性别功能】

uniapp开发小程序【简单的实现点击下拉选择性别功能】

一、展示效果 二、代码 <template><view><view class="form_box"><view class="item"
阅读更多...
硅谷甄选（9）SKU模块

硅谷甄选（9）SKU模块

SKU模块 8.1 SKU静态 <template><el-card><el-table border style"margin: 10px 0px"><el-table-column type"index" label"序号" width"80px"></el-table-column><el-table-columnlabel"名称…
阅读更多...
Flutter Color 大调整，需适配迁移，颜色不再是 0-255，而是 0-1.0，支持更大色域

Flutter Color 大调整，需适配迁移，颜色不再是 0-255，而是 0-1.0，支持更大色域

在之前的 3.10 里&#xff0c; Flutter 的 Impeller 在 iOS 上支持了 P3 广色域图像渲染&#xff0c;但是当时也仅仅是当具有广色域图像或渐变时&#xff0c;Impeller 才会在 iOS 上显示 P3 的广色域的颜色&#xff0c;而如果你使用的是 Color API&#xff0c;会发现使用的还是…
阅读更多...
动态威胁场景下赋能企业安全，F5推出BIG-IP Next Web应用防火墙

动态威胁场景下赋能企业安全，F5推出BIG-IP Next Web应用防火墙

许多企业正面临由混合和多云环境运营复杂性所引发的危机&#xff0c;它们普遍耗巨资于物理和虚拟设备的持续维护、修补和升级上&#xff0c;而针对不同云环境下的应用部署则需要特有的技能来管理众多繁杂的工具和服务。为助力企业应对上述挑战&#xff0c;F5公司发布了BIG-IP N…
阅读更多...
如何用Python同时抓取多个网页：深入ThreadPoolExecutor

如何用Python同时抓取多个网页：深入ThreadPoolExecutor

背景介绍 在信息化时代&#xff0c;数据的实时性和获取速度是其核心价值所在。对于体育赛事爱好者、数据分析师和投注行业而言&#xff0c;能否快速、稳定地抓取到实时比赛信息显得尤为重要。特别是在五大足球联赛中&#xff0c;能够在比赛进行时获得比分、控球率等实时数据&a…
阅读更多...
（转载）Tools for Learning LLVM TableGen

（转载）Tools for Learning LLVM TableGen

前提 最近在学习有关llvm的东西&#xff0c;其中TableGen占了一部分&#xff0c;所以想特意学习下TableGen相关的语法。这里找到了LLVM官网的一篇介绍TableGen的博客&#xff0c;学习并使用机器翻译为中文。在文章的最后也添加了一些学习TableGen的资源。 原文地址&#xff1…
阅读更多...
LARGE SCALE GAN TRAINING FORHIGH FIDELITY NATURAL IMAGE SYNTHESIS

LARGE SCALE GAN TRAINING FORHIGH FIDELITY NATURAL IMAGE SYNTHESIS

ABSTRACT 尽管最近在生成图像建模方面取得了进展&#xff0c;但成功地从复杂的数据集(如ImageNet)生成高分辨率、多样化的样本仍然是一个难以实现的目标。为此&#xff0c;我们在迄今为止尝试的最大规模上训练生成对抗网络&#xff0c;并研究这种规模特有的不稳定性。我们发现…
阅读更多...
组队学习专用——task05

组队学习专用——task05

目录 一、基本原理 1. 决策树的基本思想 2. 决策树划分过程中可能遇到的特殊情况 (1) 单一类别终止&#xff1a; (2) 属性用尽&#xff1a; (3) 样本空缺&#xff1a; 3. 决策树的结构 二、信息量、信息熵 1. 信息量 2. 信息熵 三、决策树 1. ID3 决策树&#xff08…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023