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.mzph.cn/web/57537.shtml

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

相关文章

Python 从入门到实战43（Pandas数据结构）

Python 从入门到实战43（Pandas数据结构）

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;可以熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们学习了NumPy数组操作的相关基础知识。今天学习一下pa…
阅读更多...
电商行业的流程革命：创建SOP的最佳实践

电商行业的流程革命：创建SOP的最佳实践

在电商行业&#xff0c;随着业务规模的扩大和市场环境的快速变化&#xff0c;创建和遵循标准化操作程序&#xff08;SOP&#xff09;变得尤为重要。SOP不仅能够确保业务流程的一致性和高效性&#xff0c;还能帮助企业快速适应市场变化&#xff0c;提高服务质量。本文将探讨电商…
阅读更多...
ruoyi-ui启动运行时，报错Error: error:0308010C:digital envelope routines::unsupported。

ruoyi-ui启动运行时，报错Error: error:0308010C:digital envelope routines::unsupported。

【问题】 ruoyi-ui启动运行时&#xff0c;报错Error: error:0308010C:digital envelope routines::unsupported。【原因】 是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制。【解决方法】 在项目中 package.json 的 scripts …
阅读更多...
易考八股文之SpringBoot的启动流程

易考八股文之SpringBoot的启动流程

SpringBoot的启动流程主要包括以下几个步骤&#xff1a; 1.创建SpringApplication对象&#xff1a; 这个过程包括推断启动类型、设置初始化器、初始化监听器以及推断main方法所在的类。 2.运行SpringApplication的run方法&#xff1a; 这是启动SpringBoot应用的核心入口&am…
阅读更多...
服务器宝塔安装哪吒监控

服务器宝塔安装哪吒监控

哪吒文档地址&#xff1a;https://nezha.wiki/guide/dashboard.html 一、准备工作 OAuth : 我使用的gitee&#xff0c;github偶尔无法访问&#xff0c;不是很方便。第一次用了极狐GitLab&#xff0c;没注意&#xff0c;结果是使用90天&#xff0c;90天后gg了&#xff0c;无法登…
阅读更多...
计算机网络（Ⅶ）Web and HTTP

计算机网络（Ⅶ）Web and HTTP

一些术语&#xff1a; Web页&#xff1a;由一些对象组成 对象可以是HTML文件&#xff0c;JPEG图像&#xff0c;Java小程序&#xff0c;声音剪辑文件等 Web页含有一个基本的HTML文件&#xff0c;该基本HTML文件又包含若干对象的引用&#xff08;链接&#xff09; 通过URL对每个对…
阅读更多...
【ChatGPT】搜索趋势分析

【ChatGPT】搜索趋势分析

【ChatGPT】搜索趋势分析 为了分析 ChatGPT 在过去一年的流行趋势&#xff0c;我们可以查看 Google Trends 的数据 安装依赖pytrends pip install pytrends运行以下 Python 脚本 import pandas as pd import matplotlib.pyplot as plt from pytrends.request import TrendR…
阅读更多...
后端开发中的分层思想，DAO、Service、Controller、Mapper，VO、DTO、DO、PO每层的作用及调用关系

后端开发中的分层思想，DAO、Service、Controller、Mapper，VO、DTO、DO、PO每层的作用及调用关系

在后端开发中&#xff0c;应用通常采用分层架构来组织代码&#xff0c;以实现更好的可维护性和可扩展性。在这个架构中&#xff0c;常见的数据传输对象&#xff08;DTO&#xff09;、数据对象&#xff08;DO&#xff09;、值对象&#xff08;VO&#xff09;、持久化对象&#x…
阅读更多...
「MinIO快速入门」

「MinIO快速入门」

官网&#xff1a;MinIO | S3 Compatible Storage for AI 中文&#xff1a;http://minio.org.cn/ MinIO 开始 MinIO 是一款高性能、开源的对象存储服务器。 一、主要特点 高性能 MinIO 采用了分布式架构&#xff0c;能够高效地处理大量数据的存储和访问请求。它针对多核处理…
阅读更多...
go的反射

go的反射

1.介绍 有时我们需要写一个函数&#xff0c;这个函数有能力统一处理各种值类型&#xff0c;而这些类型可能无法共享同一个接口&#xff0c;也可能布局未知&#xff0c;也有可能这个类型在我们设计函数时还不存在&#xff0c;这个时候我们就可以用到反射。 空接口可以存储任意类…
阅读更多...
C++ | Leetcode C++题解之第516题最长回文子序列

C++ | Leetcode C++题解之第516题最长回文子序列

题目&#xff1a; 题解&#xff1a; class Solution { public:int longestPalindromeSubseq(string s) {int n s.length();vector<vector<int>> dp(n, vector<int>(n));for (int i n - 1; i > 0; i--) {dp[i][i] 1;char c1 s[i];for (int j i 1; j…
阅读更多...
2024年，Rust开发语言，现在怎么样了?

2024年，Rust开发语言，现在怎么样了?

Rust开发语言有着一些其他语言明显的优势&#xff0c;但也充满着争议&#xff0c;难上手、学习陡峭等。 Rust 是由 Mozilla 主导开发的通用、编译型编程语言&#xff0c;2010年首次公开。 在 Stack Overflow 的年度开发者调查报告中&#xff0c;Rust 连续多年被评为“最受喜爱…
阅读更多...
【C/C++】模拟实现strlen

【C/C++】模拟实现strlen

学习目标&#xff1a; 使用代码模拟实现strlen。 逻辑&#xff1a; strlen 需要输入一个字符串数组类型的变量&#xff0c;并且返回一个整型类型的数据。strlen 需要计算字符串数组有多少个元素。 代码1&#xff1a;使用计数器 #define _CRT_SECURE_NO_WARNINGS 1 #include&…
阅读更多...
LLM | 论文精读 | 地学视觉语言大模型：Towards Vision-Language Geo-Foundation Model: A Survey

LLM | 论文精读 | 地学视觉语言大模型：Towards Vision-Language Geo-Foundation Model: A Survey

论文标题&#xff1a;Towards Vision-Language Geo-Foundation Model: A Survey 作者&#xff1a;Yue Zhou, Litong Feng, Yiping Ke, Xue Jiang, Junchi Yan, Xue Yang, Wayne Zhang 期刊&#xff1a;未提供 DOI&#xff1a;https://arxiv.org/abs/2406.09385 email&#x…
阅读更多...
Spring JdbcTemplate详解

Spring JdbcTemplate详解

文章目录 Spring JdbcTemplate详解一、引言二、配置JdbcTemplate1、引入依赖2、配置数据库连接池3、配置JdbcTemplate 三、使用JdbcTemplate操作数据库1、添加数据2、查询数据查询某个值根据条件查询返回某个对象查询对象集合 四、总结 Spring JdbcTemplate详解 一、引言 在J…
阅读更多...
【GO学习笔记 go基础】访问控制

【GO学习笔记 go基础】访问控制

Go 没有显式的 private、public 关键字&#xff0c;通过首字母大小写进行访问控制标识。在 Go 中&#xff0c;名称首字母大写表示这个名称&#xff08;变量、函数、结构体等&#xff09;是 导出的&#xff0c;可以在包外部被访问和使用。 1. 导出函数 package examplefunc Set…
阅读更多...
【单片机】深入剖析USART与UART的区别

【单片机】深入剖析USART与UART的区别

在嵌入式系统和微控制器开发中&#xff0c;串行通信是一个非常关键的概念&#xff0c;涉及到不同设备之间的数据传输。常见的串行通信协议包括UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;和USART&#xff08;Universal Synchronous/Asynchronous…
阅读更多...
LC：贪心题解

LC：贪心题解

文章目录 376. 摆动序列 376. 摆动序列 题目链接&#xff1a;https://leetcode.cn/problems/wiggle-subsequence/description/ 这个题目自己首先想到的是动态规划解题&#xff0c;贪心解法真的非常妙&#xff0c;参考下面题解&#xff1a;https://leetcode.cn/problems/wiggle…
阅读更多...
淘宝商品评价API的获取与应用

淘宝商品评价API的获取与应用

在当今数字化时代&#xff0c;电商平台如淘宝已成为消费者购物的重要渠道。对于商家和开发者而言&#xff0c;如何高效地获取并利用商品评价数据&#xff0c;成为了提升产品竞争力和优化用户体验的关键。本文将详细介绍如何使用淘宝开放平台提供的商品评论API来获取这些宝贵的数…
阅读更多...
Android 9.0 修改WLAN热点名称为MAC地址后四位

Android 9.0 修改WLAN热点名称为MAC地址后四位

这个需求主要是读取mac地址,mac地址一般是用写号工具写入到NVRAM,所以需要从NVRAM读取准确的地址。 导入nvram操作用到的库&#xff1a; frameworks/opt/net/wifi/service/Android.mk LOCAL_STATIC_JAVA_LIBRARIES : \vendor.mediatek.hardware.nvram-V1.0-java读取wifi mac…
阅读更多...
最新文章

Copyright @ 2022~2023