WFP实现侧边栏导航菜单
创始人
2024-02-03 12:08:35
0

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

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

需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors,本程序是使用该控件库实现的,非常强大

文件说明:

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

App.xaml引入MD控件样式


主窗体

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


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

using 侧边栏导航菜单_Dropdown_Menu_.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 侧边栏导航菜单_Dropdown_Menu_
{/// /// 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);}}}
}

导航子菜单用户控件

UserControlMenuItem.xaml


UserControlMenuItem.xaml.cs,后台代码实现

using 侧边栏导航菜单_Dropdown_Menu_.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 侧边栏导航菜单_Dropdown_Menu_
{/// /// 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);}}
}

菜单ViewModel类

ItemMenu.cs

using MaterialDesignThemes.Wpf;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;namespace 侧边栏导航菜单_Dropdown_Menu_.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 侧边栏导航菜单_Dropdown_Menu_.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; }}
}

两个举例用的用户控件

UserControlCustomers.xaml


UserControlProviders.xaml


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

效果如下:

 

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...