WPF实现类似网易云音乐的菜单切换

这里是借助三方UI框架实现了，感兴趣的小伙伴可以看一下。

深色模式：

浅色模式：

这里主要使用了以下三个包：

MahApps.Metro：UI库，提供菜单导航和其它控件

实现步骤：1、使用BlurWindow放置一个窗口

 1 <tianxia:BlurWindow x:Class="GameOptimizerTool.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"9         xmlns:tianxia="clr-namespace:TianXiaTech"
10         mc:Ignorable="d"
11         Title="工具箱" Height="650" Width="1100" TitleForeground="{DynamicResource MahApps.Brushes.Text}" Icon="logo.png" Background="{DynamicResource MahApps.Brushes.ThemeBackground}">
12     <Grid>
13     </Grid>
14 </tianxia:BlurWindow>

这里的一些颜色使用了动态资源，以便实现深色和浅色模式的切换。

2、引入 XAML命名空间前缀

1   xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
2   xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
3   xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"

3、放置HamburgerMenu控件

通过设置HamburgerMenu.ItemsSource属性，可以设置菜单项

通过设置HamburgerMenu.OptionsItemsSource属性，可以增加设置项，设置项会显示在左下角

注意：这里我们需要设置控件的控件模板，否则会显示异常

 1  <mah:HamburgerMenu x:Name="HamburgerMenuControl"2                    CompactPaneLength="48"3                    OpenPaneLength="70"4                    HamburgerWidth="48"5                    IsPaneOpen="True"6                    ItemInvoked="HamburgerMenuControl_OnItemInvoked"7                    ItemTemplate="{StaticResource MenuItemTemplate}"8                    OptionsItemTemplate="{StaticResource MenuItemTemplate}"9                    SelectedIndex="0"
10                    Style="{StaticResource MahApps.Styles.HamburgerMenu.Ripple}"
11                    VerticalScrollBarOnLeftSide="False">
12      <!--Items-->  
13      <mah:HamburgerMenu.ItemsSource>
14          <mah:HamburgerMenuItemCollection>
15              <mah:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Home}" Label="首页">
16                  <mah:HamburgerMenuIconItem.Tag>
17                      <local:HomeView />
18                  </mah:HamburgerMenuIconItem.Tag>
19          </mah:HamburgerMenuItemCollection>
20      </mah:HamburgerMenu.ItemsSource>
21 
22      <!--设置-->  
23      <mah:HamburgerMenu.OptionsItemsSource>
24          <mah:HamburgerMenuItemCollection>
25              <mah:HamburgerMenuIconItem Icon="{iconPacks:Material Kind=Cog}" Label="设置">
26                  <mah:HamburgerMenuIconItem.Tag>
27                      <local:OptimizerView />
28                  </mah:HamburgerMenuIconItem.Tag>
29              </mah:HamburgerMenuIconItem>
30          </mah:HamburgerMenuItemCollection>
31      </mah:HamburgerMenu.OptionsItemsSource>
32 
33      <mah:HamburgerMenu.ContentTemplate>
34          <DataTemplate DataType="{x:Type mah:HamburgerMenuIconItem}">
35              <Grid Margin="20 0 10 0">
36                  <Grid.RowDefinitions>
37                      <RowDefinition Height="Auto" />
38                      <RowDefinition Height="*" />
39                  </Grid.RowDefinitions>
40                  <!--标题文本，如果需要大标题显示，取消注释这段代码-->
41                  <TextBlock Grid.Row="0"
42                            Margin="0 15 0 5"
43                            Padding="0"
44                            FontFamily="{DynamicResource MahApps.Fonts.Family.Header}"
45                            FontSize="{DynamicResource MahApps.Font.Size.Header}"
46                            Foreground="{DynamicResource MahApps.Brushes.Text}"
47                            Text="{Binding Label}" />
48                  <ScrollViewer Grid.Row="1"
49                               Focusable="False"
50                               HorizontalScrollBarVisibility="Disabled"
51                               VerticalScrollBarVisibility="Auto">
52                      <ContentControl Content="{Binding Tag}" Focusable="False" />
53                  </ScrollViewer>
54              </Grid>
55          </DataTemplate>
56      </mah:HamburgerMenu.ContentTemplate>
57 
58  </mah:HamburgerMenu>

4、设置HamburgerMenu控件菜单项的样式

我们直接放到窗口资源里

  1  <tianxia:BlurWindow.Resources>2      <ResourceDictionary>3          <!--左侧菜单的样式-->4          <DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type mah:HamburgerMenuIconItem}">5              <Grid Height="40">6                  <Grid.ColumnDefinitions>7                      <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:HamburgerMenu}}, Path=CompactPaneLength}" />8                      <ColumnDefinition />9                  </Grid.ColumnDefinitions>10                  <ContentControl Grid.Column="0"11                               HorizontalAlignment="Center"12                               VerticalAlignment="Center"13                               Content="{Binding Icon}"14                               Focusable="False"15                               IsTabStop="False" />16                  <TextBlock Grid.Column="1"17                          VerticalAlignment="Center"18                          FontSize="13"19                          Text="{Binding Label}" />20              </Grid>21          </DataTemplate>22 23          <ObjectDataProvider x:Key="DisplayModeEnumValues"24                           MethodName="GetValues"25                           ObjectType="{x:Type mah:SplitViewDisplayMode}">26              <ObjectDataProvider.MethodParameters>27                  <x:Type TypeName="mah:SplitViewDisplayMode" />28              </ObjectDataProvider.MethodParameters>29          </ObjectDataProvider>30 31          <ObjectDataProvider x:Key="VisibilityEnumValues"32                           MethodName="GetValues"33                           ObjectType="{x:Type Visibility}">34              <ObjectDataProvider.MethodParameters>35                  <x:Type TypeName="Visibility" />36              </ObjectDataProvider.MethodParameters>37          </ObjectDataProvider>38 39          <Style x:Key="MahApps.Styles.ListBoxItem.HamburgerMenuItem.Ripple"40              BasedOn="{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem}"41              TargetType="{x:Type ListBoxItem}">42              <Setter Property="Template">43                  <Setter.Value>44                      <ControlTemplate TargetType="{x:Type ListBoxItem}">45                          <Grid x:Name="RootGrid"46                             Background="Transparent"47                             RenderOptions.ClearTypeHint="{TemplateBinding RenderOptions.ClearTypeHint}">48                              <Border x:Name="Border"49                                   Background="{TemplateBinding Background}"50                                   BorderBrush="{TemplateBinding BorderBrush}"51                                   BorderThickness="{TemplateBinding BorderThickness}"52                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />53                              <Grid Margin="{TemplateBinding BorderThickness}">54                                  <Grid HorizontalAlignment="Left"55                                     VerticalAlignment="Center"56                                     Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type mah:HamburgerMenu}}, Path=ShowSelectionIndicator, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}">57                                      <Rectangle x:Name="SelectionIndicator"58                                              Width="{DynamicResource HamburgerMenuSelectionIndicatorThemeWidth}"59                                              Height="{DynamicResource HamburgerMenuSelectionIndicatorThemeHeight}"60                                              Fill="{TemplateBinding Foreground}"61                                              Focusable="False"62                                              Opacity="0.0" />63                                  </Grid>64                                  <materialDesign:Ripple x:Name="ContentPresenter"65                                                      Padding="{TemplateBinding Padding}"66                                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"67                                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"68                                                      Content="{TemplateBinding Content}"69                                                      ContentTemplate="{TemplateBinding ContentTemplate}"70                                                      ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"71                                                      Feedback="{DynamicResource MahApps.Brushes.Gray.MouseOver}"72                                                      Focusable="False"73                                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />74                              </Grid>75                          </Grid>76                          <ControlTemplate.Triggers>77                              <Trigger Property="IsSelected" Value="True">78                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.SelectedBackgroundBrush), Mode=OneWay}" />79                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.SelectedForegroundBrush), Mode=OneWay}" />80                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.SelectedForegroundBrush), Mode=OneWay}" />81                                  <Setter TargetName="SelectionIndicator" Property="Opacity" Value="1.0" />82                              </Trigger>83                              <MultiTrigger>84                                  <MultiTrigger.Conditions>85                                      <Condition Property="IsSelected" Value="True" />86                                      <Condition Property="Selector.IsSelectionActive" Value="True" />87                                  </MultiTrigger.Conditions>88                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.ActiveSelectionBackgroundBrush), Mode=OneWay}" />89                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.ActiveSelectionForegroundBrush), Mode=OneWay}" />90                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.ActiveSelectionForegroundBrush), Mode=OneWay}" />91                              </MultiTrigger>92 93                              <MultiTrigger>94                                  <MultiTrigger.Conditions>95                                      <Condition Property="IsMouseOver" Value="True" />96                                      <Condition Property="IsSelected" Value="True" />97                                  </MultiTrigger.Conditions>98                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.HoverSelectedBackgroundBrush), Mode=OneWay}" />99                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.HoverSelectedForegroundBrush), Mode=OneWay}" />
100                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.HoverSelectedForegroundBrush), Mode=OneWay}" />
101                              </MultiTrigger>
102                              <MultiTrigger>
103                                  <MultiTrigger.Conditions>
104                                      <Condition Property="IsMouseOver" Value="True" />
105                                      <Condition Property="IsSelected" Value="False" />
106                                  </MultiTrigger.Conditions>
107                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.HoverBackgroundBrush), Mode=OneWay}" />
108                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.HoverForegroundBrush), Mode=OneWay}" />
109                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.HoverForegroundBrush), Mode=OneWay}" />
110                              </MultiTrigger>
111 
112                              <Trigger Property="mah:ItemHelper.IsMouseLeftButtonPressed" Value="True">
113                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.MouseLeftButtonPressedBackgroundBrush), Mode=OneWay}" />
114                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.MouseLeftButtonPressedForegroundBrush), Mode=OneWay}" />
115                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.MouseLeftButtonPressedForegroundBrush), Mode=OneWay}" />
116                              </Trigger>
117                              <Trigger Property="mah:ItemHelper.IsMouseRightButtonPressed" Value="True">
118                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.MouseRightButtonPressedBackgroundBrush), Mode=OneWay}" />
119                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.MouseRightButtonPressedForegroundBrush), Mode=OneWay}" />
120                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.MouseRightButtonPressedForegroundBrush), Mode=OneWay}" />
121                              </Trigger>
122 
123                              <Trigger Property="IsEnabled" Value="False">
124                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.DisabledBackgroundBrush), Mode=OneWay}" />
125                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.DisabledForegroundBrush), Mode=OneWay}" />
126                                  <Setter TargetName="RootGrid" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background, Mode=OneWay}" />
127                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.DisabledForegroundBrush), Mode=OneWay}" />
128                              </Trigger>
129                              <MultiTrigger>
130                                  <MultiTrigger.Conditions>
131                                      <Condition Property="IsEnabled" Value="False" />
132                                      <Condition Property="IsSelected" Value="True" />
133                                  </MultiTrigger.Conditions>
134                                  <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.DisabledSelectedBackgroundBrush), Mode=OneWay}" />
135                                  <Setter TargetName="ContentPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.DisabledSelectedForegroundBrush), Mode=OneWay}" />
136                                  <Setter TargetName="SelectionIndicator" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ItemHelper.DisabledSelectedForegroundBrush), Mode=OneWay}" />
137                              </MultiTrigger>
138                          </ControlTemplate.Triggers>
139                      </ControlTemplate>
140                  </Setter.Value>
141              </Setter>
142              <Setter Property="mah:ItemHelper.ActiveSelectionBackgroundBrush" Value="Transparent" />
143              <Setter Property="mah:ItemHelper.ActiveSelectionForegroundBrush" Value="{DynamicResource MahApps.Brushes.AccentBase}" />
144              <Setter Property="mah:ItemHelper.DisabledForegroundBrush" Value="{DynamicResource MahApps.Brushes.Gray}" />
145              <Setter Property="mah:ItemHelper.DisabledSelectedBackgroundBrush" Value="Transparent" />
146              <Setter Property="mah:ItemHelper.DisabledSelectedForegroundBrush" Value="{DynamicResource MahApps.Brushes.Gray}" />
147              <Setter Property="mah:ItemHelper.HoverBackgroundBrush" Value="{DynamicResource MahApps.Brushes.Gray.SemiTransparent}" />
148              <Setter Property="mah:ItemHelper.HoverSelectedBackgroundBrush" Value="{DynamicResource MahApps.Brushes.Gray.SemiTransparent}" />
149              <Setter Property="mah:ItemHelper.HoverSelectedForegroundBrush" Value="{DynamicResource MahApps.Brushes.AccentBase}" />
150              <Setter Property="mah:ItemHelper.SelectedBackgroundBrush" Value="Transparent" />
151              <Setter Property="mah:ItemHelper.SelectedForegroundBrush" Value="{DynamicResource MahApps.Brushes.AccentBase}" />
152          </Style>
153 
154          <Style x:Key="MahApps.Styles.HamburgerMenu.Ripple"
155              BasedOn="{StaticResource MahApps.Styles.HamburgerMenu}"
156              TargetType="{x:Type mah:HamburgerMenu}">
157              <Setter Property="ItemContainerStyle" Value="{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem.Ripple}" />
158              <Setter Property="OptionsItemContainerStyle" Value="{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem.Ripple}" />
159              <Setter Property="PaneBackground" Value="{DynamicResource MahApps.Brushes.ThemeBackground}" />
160              <Setter Property="PaneForeground" Value="{DynamicResource MahApps.Brushes.Text}" />
161              <Setter Property="ShowSelectionIndicator" Value="True" />
162          </Style>
163 
164      </ResourceDictionary>
165  </tianxia:BlurWindow.Resources>

5、增加菜单项切换时的事件处理程序

在放置HamburgerMenu控件时，设置了ItemInvoked事件

1 ItemInvoked="HamburgerMenuControl_OnItemInvoked"

事件处理程序如下：

1   private void HamburgerMenuControl_OnItemInvoked(object sender, MahApps.Metro.Controls.HamburgerMenuItemInvokedEventArgs args)
2   {
3       HamburgerMenuControl.Content = args.InvokedItem;
4   }

6、切换深色模式

MahApps.Metro提供了模式切换的功能，直接调用以下代码即可

1 private void Window_Loaded(object sender, RoutedEventArgs e)
2 {
3     ThemeManager.Current.ChangeThemeBaseColor(Application.Current, "Dark");
4 }

HamburgerMenu控件是如何实现的

这里内部其实是使用的ListBox，ListBox自身已经具备了切换事件和选中事件，所以在ListBox的基础上，加以封装，就能实现HamburgerMenu。

这里不做详细介绍，可以参考MahApps.Metro源码里的Themes\HamburgerMenuTemplate.xaml和Controls\HamburgerMenu里的文件。

项目地址：GitHub - MahApps/MahApps.Metro: A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

最终效果