android menu菜单 实现点击后不消失_C# WPF侧边栏导航菜单(Dropdown Menu)

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。

阅读导航:

  • 一、先看效果
  • 二、本文背景
  • 三、代码实现
  • 四、文章参考
  • 五、代码下载

一、先看效果

2573769ec6704f54be3b79b727d5a2b8

二、本文背景

YouTube Design com WPF 大神处习得,菜单导航功能实现,常规的管理系统应该常用,左侧显示菜单条目,点击菜单,右侧切换不同的业务用户控件。

常用菜单可以采用TreeView树形控件+特定样式实现 ,本文介绍的是使用Expander+ListView的组合形式实现的导航菜单,两种各有各的好处,本文不做优劣评价。

三、代码实现

3.1 添加Nuget库

站长使用.Net Core 3.1创建的WPF工程,创建“DropDownMenu”解决方案后,需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors,上图的效果是使用该控件库实现的,非常强大。

60b77fddc02049488a1b1a1d969a4239

3.2 工程结构

a12a118aa3ee4ae5ae2f1c17a326b636

文件说明:

  • App.xaml:只引入MD控件样式。
  • MainWindow.展示导航菜单及控制菜单对应的用户控件切换。
  • UserControlMenuItem为单个菜单用户控件,由 Expander+ListView的组合形式实现 。
  • UserControlCustomers和UserControlProviders作为两个举例用的业务用户控件。
  • ViewModel中定义的两个菜单相关的类,将菜单及业务用户控件关联。

3.3 App.xaml引入MD控件样式

            

3.4 主窗体

MainWindow.xaml,整体布局,看上图加上下面的界面代码,添加界面左上角logo图标、左侧导航菜单、右侧业务控件显示容器等。

MainWindow.xaml.cs,主窗体后台代码,没啥好说的,初始化菜单绑定数据、切换菜单显示用户控件。

using DropDownMenu.ViewModel;using MaterialDesignThemes.Wpf;using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace DropDownMenu{    ///     /// Interaction logic for MainWindow.xaml    ///     public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();            var menuRegister = new List();            menuRegister.Add(new SubItem("客户", new UserControlCustomers()));            menuRegister.Add(new SubItem("供应商", new UserControlProviders()));            menuRegister.Add(new SubItem("员工"));            menuRegister.Add(new SubItem("产品"));            var item6 = new ItemMenu("登记", menuRegister, PackIconKind.Register);            var menuSchedule = new List();            menuSchedule.Add(new SubItem("服务"));            menuSchedule.Add(new SubItem("会议"));            var item1 = new ItemMenu("预约", menuSchedule, PackIconKind.Schedule);            var menuReports = new List();            menuReports.Add(new SubItem("客户"));            menuReports.Add(new SubItem("供应商"));            menuReports.Add(new SubItem("产品"));            menuReports.Add(new SubItem("库存"));            menuReports.Add(new SubItem("销售额"));            var item2 = new ItemMenu("报告", menuReports, PackIconKind.FileReport);            var menuExpenses = new List();            menuExpenses.Add(new SubItem("固定资产"));            menuExpenses.Add(new SubItem("流动资金"));            var item3 = new ItemMenu("费用", menuExpenses, PackIconKind.ShoppingBasket);            var menuFinancial = new List();            menuFinancial.Add(new SubItem("现金流"));            var item4 = new ItemMenu("财务", menuFinancial, PackIconKind.ScaleBalance);            Menu.Children.Add(new UserControlMenuItem(item6, this));            Menu.Children.Add(new UserControlMenuItem(item1, this));            Menu.Children.Add(new UserControlMenuItem(item2, this));            Menu.Children.Add(new UserControlMenuItem(item3, this));            Menu.Children.Add(new UserControlMenuItem(item4, this));        }        internal void SwitchScreen(object sender)        {            var screen = ((UserControl)sender);            if (screen != null)            {                StackPanelMain.Children.Clear();                StackPanelMain.Children.Add(screen);            }        }    }}

3.5 导航子菜单用户控件

UserControlMenuItem.xaml

UserControlMenuItem.xaml.cs

using DropDownMenu.ViewModel;using System;using System.Collections.Generic;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace DropDownMenu{    ///     /// UserControlMenuItem.xaml 的交互逻辑    ///     public partial class UserControlMenuItem : UserControl    {        MainWindow _context;        public UserControlMenuItem(ItemMenu itemMenu, MainWindow context)        {            InitializeComponent();            _context = context;            ExpanderMenu.Visibility = itemMenu.SubItems == null ? Visibility.Collapsed : Visibility.Visible;            ListViewItemMenu.Visibility = itemMenu.SubItems == null ? Visibility.Visible : Visibility.Collapsed;            this.DataContext = itemMenu;        }        private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)        {            _context.SwitchScreen(((SubItem)((ListView)sender).SelectedItem).Screen);        }    }}

3.6 菜单ViewModel类

ItemMenu.cs

using MaterialDesignThemes.Wpf;using System;using System.Collections.Generic;using System.Text;using System.Windows.Controls;namespace DropDownMenu.ViewModel{    public class ItemMenu    {        public ItemMenu(string header, List subItems, PackIconKind icon)        {            Header = header;            SubItems = subItems;            Icon = icon;        }        public string Header { get; private set; }        public PackIconKind Icon { get; private set; }        public List SubItems { get; private set; }        public UserControl Screen { get; private set; }    }}

SubItem.cs

using System;using System.Collections.Generic;using System.Text;using System.Windows.Controls;namespace DropDownMenu.ViewModel{    public class SubItem    {        public SubItem(string name, UserControl screen = null)        {            Name = name;            Screen = screen;        }        public string Name { get; private set; }        public UserControl Screen { get; private set; }    }}

3.7 两个举例用的用户控件

UserControlCustomers.xaml

UserControlProviders.xaml

四、文章参考

建议直接打开大神视频学习,他的YouTube上还有很多代码视频哦,参考:
参考视频: Design com WPF: https://www.youtube.com/watch?v=-JZJh7D0E5E

源码Github地址: https://github.com/Abel13/DropdownMenu

五、代码下载

文章中代码几乎已经全部贴出,就是这么多。

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明本文地址:https://dotnet9.com/6716.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值