• WFP实现侧边栏导航菜单

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

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

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

    文件说明：

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

    App.xaml引入MD控件样式

    1. <Application x:Class="侧边栏导航菜单_Dropdown_Menu_.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:侧边栏导航菜单_Dropdown_Menu_"
    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>

    主窗体

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

    1. <Window x:Class="侧边栏导航菜单_Dropdown_Menu_.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:侧边栏导航菜单_Dropdown_Menu_"
    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="Assets/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 侧边栏导航菜单_Dropdown_Menu_.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 侧边栏导航菜单_Dropdown_Menu_
    19. {
    20.     /// <summary>
    21.     /// 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. }

    导航子菜单用户控件

    UserControlMenuItem.xaml

    1. <UserControl x:Class="侧边栏导航菜单_Dropdown_Menu_.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:侧边栏导航菜单_Dropdown_Menu_"
    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 侧边栏导航菜单_Dropdown_Menu_.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 侧边栏导航菜单_Dropdown_Menu_
    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. }

    菜单ViewModel类

    ItemMenu.cs

    1. using MaterialDesignThemes.Wpf;
    2. using System.Collections.Generic;
    3. using System.Text;
    4. using System.Windows.Controls;
    5.  
    6. namespace 侧边栏导航菜单_Dropdown_Menu_.ViewModel
    7. {
    8.     public class ItemMenu
    9.     {
    10.         public ItemMenu(string header, List<SubItem> subItems, PackIconKind icon)
    11.         {
    12.             Header = header;
    13.             SubItems = subItems;
    14.             Icon = icon;
    15.         }
    16.  
    17.         public string Header { get; private set; }
    18.         public PackIconKind Icon { get; private set; }
    19.         public List<SubItem> SubItems { get; private set; }
    20.         public UserControl Screen { get; private set; }
    21.     }
    22. }

    SubItem.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Text;
    4. using System.Windows.Controls;
    5.  
    6. namespace 侧边栏导航菜单_Dropdown_Menu_.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. }

    两个举例用的用户控件

    UserControlCustomers.xaml

    1. <UserControl x:Class="侧边栏导航菜单_Dropdown_Menu_.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:侧边栏导航菜单_Dropdown_Menu_"
    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="侧边栏导航菜单_Dropdown_Menu_.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:侧边栏导航菜单_Dropdown_Menu_"
    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>

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

    效果如下：

     

  • 相关阅读:
    青海特色美食制作工艺数字化保护平台
    Curve 块存储应用实践 -- iSCSI
    Mybase使用教程-不古出品
    可扩展易配置，快来揭秘新一代自监督学习开源框架
    应用商店优化之关键词优化指南1
    Python+requests编写的自动化测试项目
    Java学习Day021(类和对象)
    OpenCV实战——使用YOLO进行目标检测
    【无标题】
    2023-09-14 C语言泛型选择编程
  • 原文地址：https://blog.csdn.net/lwf3115841/article/details/127949457