时间如流水,只能流去不流回!
点赞再看,养成习惯,这是您给我创作的动力!
本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。
阅读导航:
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果
二、本文背景
YouTube Design com WPF 大神处习得,菜单导航功能实现,常规的管理系统应该常用,左侧显示菜单条目,点击菜单,右侧切换不同的业务用户控件。
常用菜单可以采用TreeView树形控件+特定样式实现 ,本文介绍的是使用Expander+ListView的组合形式实现的导航菜单,两种各有各的好处,本文不做优劣评价。
三、代码实现
3.1 添加Nuget库
站长使用.Net Core 3.1创建的WPF工程,创建“DropDownMenu”解决方案后,需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors,上图的效果是使用该控件库实现的,非常强大。
3.2 工程结构
文件说明:
- 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