C# WPF侧边栏导航菜单（Dropdown Menu）

时间如流水，只能流去不流回！

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

本文 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控件样式

 1 <Application x:Class="DropDownMenu.App"

 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

 5              StartupUri="MainWindow.xaml">

 6     <Application.Resources>

 7         <ResourceDictionary>

 8             <ResourceDictionary.MergedDictionaries>

 9                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>

10                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>

11                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>

12                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/>

13             </ResourceDictionary.MergedDictionaries>

14         </ResourceDictionary>

15     </Application.Resources>

16 </Application>

3.4 主窗体

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

 1 <Window x:Class="DropDownMenu.MainWindow"

 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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

 7         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

 8         mc:Ignorable="d"

 9         Title="下拉菜单" Height="450" Width="800" WindowStartupLocation="CenterScreen" WindowState="Maximized">

10     <Grid>

11         <Grid.RowDefinitions>

12             <RowDefinition Height="Auto"/>

13             <RowDefinition Height="*"/>

14         </Grid.RowDefinitions>

15         <Grid.ColumnDefinitions>

16             <ColumnDefinition Width="250"/>

17             <ColumnDefinition Width="*"/>

18         </Grid.ColumnDefinitions>

19

20         <materialDesign:ColorZone Mode="PrimaryMid" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">

21             <Grid>

22                 <materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" HorizontalAlignment="Right" Margin="10"/>

23             </Grid>

24         </materialDesign:ColorZone>

25         <Grid HorizontalAlignment="Stretch" Grid.Row="1" Background="{StaticResource PrimaryHueMidBrush}">

26             <Grid.RowDefinitions>

27                 <RowDefinition Height="70"/>

28                 <RowDefinition Height="326*"/>

29             </Grid.RowDefinitions>

30             <Grid Grid.Row="0" Background="GhostWhite">

31                 <Image Source="https://img.dotnet9.com/logo.png"/>

32             </Grid>

33             <ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1">

34                 <StackPanel x:Name="Menu" Margin="10"/>

35             </ScrollViewer>

36         </Grid>

37         <StackPanel x:Name="StackPanelMain" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch">

38

39         </StackPanel>

40     </Grid>

41 </Window>

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

 1 using DropDownMenu.ViewModel;

 2 using MaterialDesignThemes.Wpf;

 3 using System;

 4 using System.Collections.Generic;

 5 using System.Linq;

 6 using System.Text;

 7 using System.Threading.Tasks;

 8 using System.Windows;

 9 using System.Windows.Controls;

10 using System.Windows.Data;

11 using System.Windows.Documents;

12 using System.Windows.Input;

13 using System.Windows.Media;

14 using System.Windows.Media.Imaging;

15 using System.Windows.Navigation;

16 using System.Windows.Shapes;

17

18 namespace DropDownMenu

19 {

20     /// <summary>

21     /// Interaction logic for MainWindow.xaml

22     /// </summary>

23     public partial class MainWindow : Window

24     {

25         public MainWindow()

26         {

27             InitializeComponent();

28

29             var menuRegister = new List<SubItem>();

30             menuRegister.Add(new SubItem("客户", new UserControlCustomers()));

31             menuRegister.Add(new SubItem("供应商", new UserControlProviders()));

32             menuRegister.Add(new SubItem("员工"));

33             menuRegister.Add(new SubItem("产品"));

34             var item6 = new ItemMenu("登记", menuRegister, PackIconKind.Register);

35

36             var menuSchedule = new List<SubItem>();

37             menuSchedule.Add(new SubItem("服务"));

38             menuSchedule.Add(new SubItem("会议"));

39             var item1 = new ItemMenu("预约", menuSchedule, PackIconKind.Schedule);

40

41             var menuReports = new List<SubItem>();

42             menuReports.Add(new SubItem("客户"));

43             menuReports.Add(new SubItem("供应商"));

44             menuReports.Add(new SubItem("产品"));

45             menuReports.Add(new SubItem("库存"));

46             menuReports.Add(new SubItem("销售额"));

47             var item2 = new ItemMenu("报告", menuReports, PackIconKind.FileReport);

48

49             var menuExpenses = new List<SubItem>();

50             menuExpenses.Add(new SubItem("固定资产"));

51             menuExpenses.Add(new SubItem("流动资金"));

52             var item3 = new ItemMenu("费用", menuExpenses, PackIconKind.ShoppingBasket);

53

54             var menuFinancial = new List<SubItem>();

55             menuFinancial.Add(new SubItem("现金流"));

56             var item4 = new ItemMenu("财务", menuFinancial, PackIconKind.ScaleBalance);

57

58             Menu.Children.Add(new UserControlMenuItem(item6, this));

59             Menu.Children.Add(new UserControlMenuItem(item1, this));

60             Menu.Children.Add(new UserControlMenuItem(item2, this));

61             Menu.Children.Add(new UserControlMenuItem(item3, this));

62             Menu.Children.Add(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                 StackPanelMain.Children.Clear();

72                 StackPanelMain.Children.Add(screen);

73             }

74         }

75     }

76 }

3.5 导航子菜单用户控件

UserControlMenuItem.xaml

 1 <UserControl x:Class="DropDownMenu.UserControlMenuItem"

 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

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

 7              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

 8              mc:Ignorable="d">

 9     <Grid>

10         <materialDesign:PackIcon Kind="{Binding Icon}" Width="15" Height="15" Margin="10 16" Foreground="White"/>

11         <ListBoxItem x:Name="ListViewItemMenu" Content="{Binding Header}" Padding="37 14" FontSize="15" Foreground="White"/>

12         <Expander x:Name="ExpanderMenu" Header="{Binding Header}" IsExpanded="False" Width="210" HorizontalAlignment="Right" Background="{x:Null}" Foreground="White">

13             <ListView x:Name="ListViewMenu" ItemsSource="{Binding SubItems}" Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="ListViewMenu_SelectionChanged">

14                 <ListView.ItemTemplate>

15                     <DataTemplate>

16                         <TextBlock Text="{Binding Name}" Padding="20 5"/>

17                     </DataTemplate>

18                 </ListView.ItemTemplate>

19             </ListView>

20         </Expander>

21     </Grid>

22 </UserControl>

UserControlMenuItem.xaml.cs

 1 using DropDownMenu.ViewModel;

 2 using System;

 3 using System.Collections.Generic;

 4 using System.Text;

 5 using System.Windows;

 6 using System.Windows.Controls;

 7 using System.Windows.Data;

 8 using System.Windows.Documents;

 9 using System.Windows.Input;

10 using System.Windows.Media;

11 using System.Windows.Media.Imaging;

12 using System.Windows.Navigation;

13 using System.Windows.Shapes;

14

15 namespace DropDownMenu

16 {

17     /// <summary>

18     /// UserControlMenuItem.xaml 的交互逻辑

19     /// </summary>

20     public partial class UserControlMenuItem : UserControl

21     {

22         MainWindow _context;

23         public UserControlMenuItem(ItemMenu itemMenu, MainWindow context)

24         {

25             InitializeComponent();

26

27             _context = context;

28

29             ExpanderMenu.Visibility = itemMenu.SubItems == null ? Visibility.Collapsed : Visibility.Visible;

30             ListViewItemMenu.Visibility = itemMenu.SubItems == null ? Visibility.Visible : Visibility.Collapsed;

31

32             this.DataContext = itemMenu;

33         }

34

35         private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)

36         {

37             _context.SwitchScreen(((SubItem)((ListView)sender).SelectedItem).Screen);

38         }

39     }

40 }

3.6 菜单ViewModel类

ItemMenu.cs

 1 using MaterialDesignThemes.Wpf;

 2 using System;

 3 using System.Collections.Generic;

 4 using System.Text;

 5 using System.Windows.Controls;

 6

 7 namespace DropDownMenu.ViewModel

 8 {

 9     public class ItemMenu

10     {

11         public ItemMenu(string header, List<SubItem> 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<SubItem> SubItems { get; private set; }

21         public UserControl Screen { get; private set; }

22     }

23 }

SubItem.cs

 1 using System;

 2 using System.Collections.Generic;

 3 using System.Text;

 4 using System.Windows.Controls;

 5

 6 namespace DropDownMenu.ViewModel

 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 两个举例用的用户控件

UserControlCustomers.xaml

 1 <UserControl x:Class="DropDownMenu.UserControlCustomers"

 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

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

 7              mc:Ignorable="d"

 8              d:DesignHeight="450" d:DesignWidth="800">

 9     <Grid>

10         <Grid.ColumnDefinitions>

11             <ColumnDefinition Width="*"/>

12             <ColumnDefinition Width="*"/>

13             <ColumnDefinition Width="*"/>

14             <ColumnDefinition Width="*"/>

15         </Grid.ColumnDefinitions>

16         <Grid.RowDefinitions>

17             <RowDefinition Height="150"/>

18             <RowDefinition Height="*"/>

19         </Grid.RowDefinitions>

20         <Border Margin="5" Grid.Column="0" Background="#FFC5C5C5" VerticalAlignment="Stretch" CornerRadius="12"/>

21         <Border Margin="5" Grid.Column="1" Background="#FF7C54A0" VerticalAlignment="Stretch" CornerRadius="12"/>

22         <Border Margin="5" Grid.Column="2" Background="#FF83CD80" VerticalAlignment="Stretch" CornerRadius="12"/>

23         <Border Margin="5" Grid.Column="3" Background="#FFEE9246" VerticalAlignment="Stretch" CornerRadius="12"/>

24     </Grid>

25 </UserControl>

UserControlProviders.xaml

 1 <UserControl x:Class="DropDownMenu.UserControlProviders"

 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

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

 7              mc:Ignorable="d"

 8              d:DesignHeight="450" d:DesignWidth="800">

 9     <Grid>

10         <Grid.ColumnDefinitions>

11             <ColumnDefinition Width="*"/>

12             <ColumnDefinition Width="*"/>

13             <ColumnDefinition Width="*"/>

14             <ColumnDefinition Width="*"/>

15         </Grid.ColumnDefinitions>

16         <Grid.RowDefinitions>

17             <RowDefinition Height="150"/>

18             <RowDefinition Height="*"/>

19         </Grid.RowDefinitions>

20         <Border Margin="5" Grid.Column="0" Background="#FFD4E436" VerticalAlignment="Stretch" CornerRadius="12"/>

21         <Border Margin="5" Grid.Column="1" Background="#FF81F9FF" VerticalAlignment="Stretch" CornerRadius="12"/>

22         <Border Margin="5" Grid.Column="2" Background="#FF144BC3" VerticalAlignment="Stretch" CornerRadius="12"/>

23         <Border Margin="5" Grid.Column="3" Background="#FFD34EBA" VerticalAlignment="Stretch" CornerRadius="12"/>

24     </Grid>

25 </UserControl>

四、文章参考

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

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

五、代码下载

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

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

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

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：

如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持。