当前位置：首页 > news >正文

WPF侧边栏导航菜单（使用MaterialDesign样式）

news 2026/3/26 23:39:49

添加Nuget库
需要添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors，上图的效果是使用该控件库实现的，非常强大。
MaterialDesignThemes和MaterialDesignColors都是 5.3.0版本

大致是使用ScrollViewer+Menu实现的

App.xaml引入MD控件样式

 1 <Application x:Class="WpfApp2.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:WpfApp2"
 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/Recommended/Secondary/MaterialDesignTheme.Defaults.xaml" />-->
11                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
12                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
13                 <!--<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml" />-->
14                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Secondary/MaterialDesignColor.LightBlue.xaml"/>
15             </ResourceDictionary.MergedDictionaries>
16         </ResourceDictionary>
17     </Application.Resources>
18 </Application>

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

 1 <Window x:Class="WpfApp2.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:WpfApp2" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="450" Width="800">
 9    
10     <Grid>
11      
12         <Grid.ColumnDefinitions>
13             <ColumnDefinition Width="auto"/>
14             <ColumnDefinition Width="*"/>
15         </Grid.ColumnDefinitions>
16         <Grid Grid.Column="0" Background="#01579b"  >
17          
18             <!--<Grid Grid.Row="0" Background="GhostWhite">-->
19                 
20             <!--<Image Source="Assets/logo.png"/>-->
21             <ScrollViewer  HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1" Background="#01579b" >
22                 <StackPanel x:Name="Menu" Margin="10"  Background="#01579b"/>
23             </ScrollViewer>
24         </Grid>
25         <Grid Grid.Column="1" Background="AliceBlue"/>
26     </Grid>
27 </Window>

其中重要一点的是

1    <Grid.ColumnDefinitions>
2        <ColumnDefinition Width="auto"/>
3        <ColumnDefinition Width="*"/>
4    </Grid.ColumnDefinitions>

第一列 (Width=“auto”)
自适应内容：列宽自动调整以适应其内部子控件的所需宽度，宽度由该列中最“宽”的子控件（例如最长的文本、尺寸最大的按钮）决定
第二列（Width=“*”）
按比例填充：占据所有剩余的可用空间，无论窗口如何缩放，它都会填满第一列分配后剩下的所有空间

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

 1 using MaterialDesignThemes.Wpf;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Threading.Tasks;
 7 using System.Windows;
 8 using System.Windows.Controls;
 9 using System.Windows.Data;
10 using System.Windows.Documents;
11 using System.Windows.Input;
12 using System.Windows.Media;
13 using System.Windows.Media.Imaging;
14 using System.Windows.Navigation;
15 using System.Windows.Shapes;
16 using WpfApp2.ViewModel;
17 
18 namespace WpfApp2
19 {
20     /// <summary>
21     /// MainWindow.xaml 的交互逻辑
22     /// </summary>
23     public partial class MainWindow : Window
24     {
25         public MainWindow()
26         {
27             InitializeComponent();
28             var menuRegister = new List<SubItem>();
29             menuRegister.Add(new SubItem("Customer"));
30             menuRegister.Add(new SubItem("Providers"));
31             menuRegister.Add(new SubItem("Employees"));
32             menuRegister.Add(new SubItem("Products"));
33             var item6 = new ItemMenu("Register", menuRegister, PackIconKind.Register);
34 
35             var menuSchedule = new List<SubItem>();
36             menuSchedule.Add(new SubItem("Services"));
37             menuSchedule.Add(new SubItem("Meetings"));
38             var item1 = new ItemMenu("Appointments", menuSchedule, PackIconKind.Schedule);
39 
40             var menuReports = new List<SubItem>();
41             menuReports.Add(new SubItem("Customers"));
42             menuReports.Add(new SubItem("Providers"));
43             menuReports.Add(new SubItem("Products"));
44             menuReports.Add(new SubItem("Stock"));
45             menuReports.Add(new SubItem("Sales"));
46             var item2 = new ItemMenu("Reports", menuReports, PackIconKind.FileReport);
47 
48             var menuExpenses = new List<SubItem>();
49             menuExpenses.Add(new SubItem("Fixed"));
50             menuExpenses.Add(new SubItem("Variable"));
51             var item3 = new ItemMenu("Expenses", menuExpenses, PackIconKind.ShoppingBasket);
52 
53             var menuFinancial = new List<SubItem>();
54             menuFinancial.Add(new SubItem("Cash flow"));
55             var item4 = new ItemMenu("Financial", menuFinancial, PackIconKind.ScaleBalance);
56 
57             var item0 = new ItemMenu("Dashboard", new UserControl(), PackIconKind.ViewDashboard);
58 
59             Menu.Children.Add(new UserControlMenuItem(item0));
60             Menu.Children.Add(new UserControlMenuItem(item6));
61             Menu.Children.Add(new UserControlMenuItem(item1));
62             Menu.Children.Add(new UserControlMenuItem(item2));
63             Menu.Children.Add(new UserControlMenuItem(item3));
64             Menu.Children.Add(new UserControlMenuItem(item4));
65         }
66     }
67 }

导航子菜单用户控件 UserControlMenuItem.xaml

 1 <UserControl x:Class="WpfApp2.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:WpfApp2"
 7              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
 8              mc:Ignorable="d" 
 9              d:DesignHeight="450" d:DesignWidth="800">
10     <Grid>
11        <!--<materialDesign:PackIcon Kind="{Binding Path=Icon}" Width="15" Height="15" Margin="10 16" Foreground="White"/>-->
12         <ListBoxItem x:Name="ListViewItemMenu" Content="{Binding Path=Header}" Padding="37 14" FontSize="15" Foreground="White"/>
13         <Expander x:Name="ExpanderMenu" Header="{Binding Path=Header}" IsExpanded="False" Width="210" HorizontalAlignment="Right" Background="{x:Null}" Foreground="White">
14             <ListView x:Name="ListViewMenu" ItemsSource="{Binding Path=SubItems}" Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
15                 <ListView.ItemTemplate>
16                     <DataTemplate>
17                         <TextBlock Text="{Binding Path=Name}" Padding="20 5"/>
18                     </DataTemplate>
19                 </ListView.ItemTemplate>
20             </ListView>
21         </Expander>
22     </Grid>
23 </UserControl>

UserControlMenuItem.xaml.cs

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15 using WpfApp2.ViewModel;
16 
17 namespace WpfApp2
18 {
19     /// <summary>
20     /// UserControlMenuItem.xaml 的交互逻辑
21     /// </summary>
22     public partial class UserControlMenuItem : UserControl
23     {
24         public UserControlMenuItem()
25         {
26             InitializeComponent();
27         }
28         public UserControlMenuItem(ItemMenu itemMenu)
29         {
30             InitializeComponent();
31 
32             ExpanderMenu.Visibility = itemMenu.SubItems == null ? Visibility.Collapsed : Visibility.Visible;
33             ListViewItemMenu.Visibility = itemMenu.SubItems == null ? Visibility.Visible : Visibility.Collapsed;
34 
35             this.DataContext = itemMenu;
36         }
37     }
38 }
39 
40 ``
41 
42 ## 实体类
43 
44 ```csharp
45   public class ItemMenu
46   {
47       public ItemMenu(string header, List<SubItem> subItems, PackIconKind icon)
48       {
49           Header = header;
50           SubItems = subItems;
51           Icon = icon;
52       }
53 
54       public ItemMenu(string header, UserControl screen, PackIconKind icon)
55       {
56           Header = header;
57           Screen = screen;
58           Icon = icon;
59       }
60 
61       public string Header { get; private set; }
62       public PackIconKind Icon { get; private set; }
63       public List<SubItem> SubItems { get; private set; }
64       public UserControl Screen { get; private set; }
65   }
66   public class SubItem
67   {
68       public SubItem(string name, UserControl screen = null)
69       {
70           Name = name;
71           Screen = screen;
72       }
73       public string Name { get; private set; }
74       public UserControl Screen { get; private set; }
75   }