2023年7月19日发(作者：)

C#WPF侧边栏导航菜单（DropdownMenu）阅读导航：⼀、先看效果⼆、本⽂背景三、代码实现四、⽂章参考五、代码下载⼀、先看效果⼆、本⽂背景YouTube Design com ⼤神处习得，菜单导航功能实现，常规的管理系统应该常⽤，左侧显⽰菜单条⽬，点击菜单，右侧切换不同的业务⽤户控件。常⽤菜单可以采⽤TreeView树形控件+特定样式实现 ，本⽂介绍的是使⽤Expander+ListView的组合形式实现的导航菜单，两种各有各的好处，本⽂不做优劣评价。三、代码实现3.1 添加Nuget库站长使⽤.Net Core 3.1创建的WPF⼯程，创建“DropDownMenu”解决⽅案后，需要添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors，上图的效果是使⽤该控件库实现的，⾮常强⼤。3.2 ⼯程结构⽂件说明：：只引⼊MD控件样式。MainWindow.展⽰导航菜单及控制菜单对应的⽤户控件切换。UserControlMenuItem为单个菜单⽤户控件，由 Expander+ListView的组合形式实现 。UserControlCustomers和UserControlProviders作为两个举例⽤的业务⽤户控件。ViewModel中定义的两个菜单相关的类，将菜单及业务⽤户控件关联。3.3 引⼊MD控件样式 1 6 7 8 9 10

Source="pack://application:,,,/;component/Themes/"/>11

Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/"/>12

Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/"/>13 14 15 16

3.4 主窗体，整体布局，看上图加上下⾯的界⾯代码，添加界⾯左上⾓logo图标、左侧导航菜单、右侧业务控件显⽰容器等。 1 10 11 12 13 14 15 16 17 18 19

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

39 40 41

，主窗体后台代码，没啥好说的，初始化菜单绑定数据、切换菜单显⽰⽤户控件。 1 using del; 2 using ; 3 using System; 4 using c; 5 using ; 6 using ; 7 using ; 8 using s; 9 using ls;10 using ;11 using nts;12 using ;13 using ;14 using g;15 using tion;15 using tion;16 using ;17

18 namespace DropDownMenu19 {20 ///

21 /// Interaction logic for 22 ///

23 public partial class MainWindow : Window24 {25 public MainWindow()26 {27 InitializeComponent();28

29 var menuRegister = new List();30 (new SubItem("客户", new UserControlCustomers()));31 (new SubItem("供应商", new UserControlProviders()));32 (new SubItem("员⼯"));33 (new SubItem("产品"));34 var item6 = new ItemMenu("登记", menuRegister, er);35

36 var menuSchedule = new List();37 (new SubItem("服务"));38 (new SubItem("会议"));39 var item1 = new ItemMenu("预约", menuSchedule, le);40

41 var menuReports = new List();42 (new SubItem("客户"));43 (new SubItem("供应商"));44 (new SubItem("产品"));45 (new SubItem("库存"));46 (new SubItem("销售额"));47 var item2 = new ItemMenu("报告", menuReports, port);48

49 var menuExpenses = new List();50 (new SubItem("固定资产"));51 (new SubItem("流动资⾦"));52 var item3 = new ItemMenu("费⽤", menuExpenses, ngBasket);53

54 var menuFinancial = new List();55 (new SubItem("现⾦流"));56 var item4 = new ItemMenu("财务", menuFinancial, alance);57

58 (new UserControlMenuItem(item6, this));59 (new UserControlMenuItem(item1, this));60 (new UserControlMenuItem(item2, this));61 (new UserControlMenuItem(item3, this));62 (new UserControlMenuItem(item4, this));63 }64

65 internal void SwitchScreen(object sender)66 {67 var screen = ((UserControl)sender);68

69 if (screen != null)70 {71 ();72 (screen);73 }74 }75 }76 } 3.5 导航⼦菜单⽤户控件 1

5 xmlns:d="/expression/blend/2008"

6 xmlns:local="clr-namespace:DropDownMenu"

7 xmlns:materialDesign="/winfx/xaml/themes" 8 mc:Ignorable="d"> 9 10 11 12 13

ntalScrollBarVisibility="Disabled" SelectionChanged="ListViewMenu_SelectionChanged">14 15 16 17 18 19 20 21 22

1 using del; 2 using System; 3 using c; 4 using ; 5 using s; 6 using ls; 7 using ; 8 using nts; 9 using ;10 using ;11 using g;12 using tion;13 using ;14

15 namespace DropDownMenu16 {17 ///

18 /// 的交互逻辑19 ///

20 public partial class UserControlMenuItem : UserControl21 {22 MainWindow _context;23 public UserControlMenuItem(ItemMenu itemMenu, MainWindow context)24 {25 InitializeComponent();26

27 _context = context;28

29 lity = ms == null ? sed : e;30 lity = ms == null ? e : sed;31

32 ntext = itemMenu;33 }34

35 private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)36 {37 _Screen(((SubItem)((ListView)sender).SelectedItem).Screen);38 }39 }40 }

3.6 菜单ViewModel类 1 using ; 2 using System; 3 using c; 4 using ; 5 using ls; 6

7 namespace del 8 { 9 public class ItemMenu10 {11 public ItemMenu(string header, List subItems, PackIconKind icon)12 {13 Header = header;14 SubItems = subItems;15 Icon = icon;16 }17

18 public string Header { get; private set; }19 public PackIconKind Icon { get; private set; }20 public List SubItems { get; private set; }21 public UserControl Screen { get; private set; }22 }23 }

1 using System; 2 using c; 3 using ; 4 using ls; 5

6 namespace del 7 { 8 public class SubItem 9 {10 public SubItem(string name, UserControl screen = null)11 {12 Name = name;13 Screen = screen;14 }15 public string Name { get; private set; }16 public UserControl Screen { get; private set; }17 }18 }

3.7 两个举例⽤的⽤户控件 1

5 xmlns:d="/expression/blend/2008"

6 xmlns:local="clr-namespace:DropDownMenu" 7 mc:Ignorable="d"

8 d:DesignHeight="450" d:DesignWidth="800"> 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

1

5 xmlns:d="/expression/blend/2008"

6 xmlns:local="clr-namespace:DropDownMenu" 7 mc:Ignorable="d"

8 d:DesignHeight="450" d:DesignWidth="800"> 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 四、⽂章参考