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

最新推荐文章于 2024-05-11 11:02:32 发布
最新推荐文章于 2024-05-11 11:02:32 发布
阅读量8.3k 收藏 53
点赞数 5
分类专栏： C#WPF程序设计 文章标签： wpf 导航菜单 MaterialDesign DropDownMenu
原文链接：https://blog.csdn.net/HenryMoore/article/details/103732086
版权

目录

一、先看效果

二、本文背景YouTube  Design com WPF 大神处习得，菜单导航功能实现，常规的管理系统应该常用，左侧显示菜单条目，点击菜单，右侧切换不同的业务用户控件。

三、代码实现

3.1 添加Nuget库

 3.2 工程结构

3.3 App.xaml引入MD控件样式

3.4 主窗体

3.5 导航子菜单用户控件

3.6 菜单ViewModel类

3.7 两个举例用的用户控件

一、先看效果

 

 

二、本文背景
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控件样式

<Application x:Class="DropDownMenu.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:DropDownMenu"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

3.4 主窗体

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

<Window x:Class="DropDownMenu.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DropDownMenu"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="下拉菜单" Height="450" Width="800" WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
 
        <materialDesign:ColorZone Mode="PrimaryMid" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
            <Grid>
                <materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" HorizontalAlignment="Right" Margin="10"/>
            </Grid>
        </materialDesign:ColorZone>
        <Grid HorizontalAlignment="Stretch" Grid.Row="1" Background="{StaticResource PrimaryHueMidBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="70"/>
                <RowDefinition Height="326*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Background="GhostWhite">
                <Image Source="https://img.dotnet9.com/logo.png"/>
            </Grid>
            <ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1">
                <StackPanel x:Name="Menu" Margin="10"/>
            </ScrollViewer>
        </Grid>
        <StackPanel x:Name="StackPanelMain" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch">
            
        </StackPanel>
    </Grid>
</Window>

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

using DropDownMenu.ViewModel;
using MaterialDesignThemes.Wpf;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace DropDownMenu
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            var menuRegister = new List<SubItem>();
            menuRegister.Add(new SubItem("客户", new UserControlCustomers()));
            menuRegister.Add(new SubItem("供应商", new UserControlProviders()));
            menuRegister.Add(new SubItem("员工"));
            menuRegister.Add(new SubItem("产品"));
            var item6 = new ItemMenu("登记", menuRegister, PackIconKind.Register);
 
            var menuSchedule = new List<SubItem>();
            menuSchedule.Add(new SubItem("服务"));
            menuSchedule.Add(new SubItem("会议"));
            var item1 = new ItemMenu("预约", menuSchedule, PackIconKind.Schedule);
 
            var menuReports = new List<SubItem>();
            menuReports.Add(new SubItem("客户"));
            menuReports.Add(new SubItem("供应商"));
            menuReports.Add(new SubItem("产品"));
            menuReports.Add(new SubItem("库存"));
            menuReports.Add(new SubItem("销售额"));
            var item2 = new ItemMenu("报告", menuReports, PackIconKind.FileReport);
 
            var menuExpenses = new List<SubItem>();
            menuExpenses.Add(new SubItem("固定资产"));
            menuExpenses.Add(new SubItem("流动资金"));
            var item3 = new ItemMenu("费用", menuExpenses, PackIconKind.ShoppingBasket);
 
            var menuFinancial = new List<SubItem>();
            menuFinancial.Add(new SubItem("现金流"));
            var item4 = new ItemMenu("财务", menuFinancial, PackIconKind.ScaleBalance);
 
            Menu.Children.Add(new UserControlMenuItem(item6, this));
            Menu.Children.Add(new UserControlMenuItem(item1, this));
            Menu.Children.Add(new UserControlMenuItem(item2, this));
            Menu.Children.Add(new UserControlMenuItem(item3, this));
            Menu.Children.Add(new UserControlMenuItem(item4, this));
        }
 
        internal void SwitchScreen(object sender)
        {
            var screen = ((UserControl)sender);
 
            if (screen != null)
            {
                StackPanelMain.Children.Clear();
                StackPanelMain.Children.Add(screen);
            }
        }
    }
}

3.5 导航子菜单用户控件

UserControlMenuItem.xaml

<UserControl x:Class="DropDownMenu.UserControlMenuItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DropDownMenu"             
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d">
    <Grid>
        <materialDesign:PackIcon Kind="{Binding Icon}" Width="15" Height="15" Margin="10 16" Foreground="White"/>
        <ListBoxItem x:Name="ListViewItemMenu" Content="{Binding Header}" Padding="37 14" FontSize="15" Foreground="White"/>
        <Expander x:Name="ExpanderMenu" Header="{Binding Header}" IsExpanded="False" Width="210" HorizontalAlignment="Right" Background="{x:Null}" Foreground="White">
            <ListView x:Name="ListViewMenu" ItemsSource="{Binding SubItems}" Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="ListViewMenu_SelectionChanged">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" Padding="20 5"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Expander>
    </Grid>
</UserControl>

UserControlMenuItem.xaml.cs

using DropDownMenu.ViewModel;
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace DropDownMenu
{
    /// <summary>
    /// UserControlMenuItem.xaml 的交互逻辑
    /// </summary>
    public partial class UserControlMenuItem : UserControl
    {
        MainWindow _context;
        public UserControlMenuItem(ItemMenu itemMenu, MainWindow context)
        {
            InitializeComponent();
 
            _context = context;
 
            ExpanderMenu.Visibility = itemMenu.SubItems == null ? Visibility.Collapsed : Visibility.Visible;
            ListViewItemMenu.Visibility = itemMenu.SubItems == null ? Visibility.Visible : Visibility.Collapsed;
 
            this.DataContext = itemMenu;
        }
 
        private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            _context.SwitchScreen(((SubItem)((ListView)sender).SelectedItem).Screen);
        }
    }
}

3.6 菜单ViewModel类

ItemMenu.cs

using MaterialDesignThemes.Wpf;
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
 
namespace DropDownMenu.ViewModel
{
    public class ItemMenu
    {
        public ItemMenu(string header, List<SubItem> subItems, PackIconKind icon)
        {
            Header = header;
            SubItems = subItems;
            Icon = icon;
        }
 
        public string Header { get; private set; }
        public PackIconKind Icon { get; private set; }
        public List<SubItem> SubItems { get; private set; }
        public UserControl Screen { get; private set; }
    }
}

SubItem.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
 
namespace DropDownMenu.ViewModel
{
    public class SubItem
    {
        public SubItem(string name, UserControl screen = null)
        {
            Name = name;
            Screen = screen;
        }
        public string Name { get; private set; }
        public UserControl Screen { get; private set; }
    }
}

3.7 两个举例用的用户控件

UserControlCustomers.xaml

<UserControl x:Class="DropDownMenu.UserControlCustomers"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DropDownMenu"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Margin="5" Grid.Column="0" Background="#FFC5C5C5" VerticalAlignment="Stretch" CornerRadius="12"/>
        <Border Margin="5" Grid.Column="1" Background="#FF7C54A0" VerticalAlignment="Stretch" CornerRadius="12"/>
        <Border Margin="5" Grid.Column="2" Background="#FF83CD80" VerticalAlignment="Stretch" CornerRadius="12"/>
        <Border Margin="5" Grid.Column="3" Background="#FFEE9246" VerticalAlignment="Stretch" CornerRadius="12"/>
    </Grid>
</UserControl>

UserControlProviders.xaml

<UserControl x:Class="DropDownMenu.UserControlProviders"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DropDownMenu"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Margin="5" Grid.Column="0" Background="#FFD4E436" VerticalAlignment="Stretch" CornerRadius="12"/>
        <Border Margin="5" Grid.Column="1" Background="#FF81F9FF" VerticalAlignment="Stretch" CornerRadius="12"/>
        <Border Margin="5" Grid.Column="2" Background="#FF144BC3" VerticalAlignment="Stretch" CornerRadius="12"/>
        <Border Margin="5" Grid.Column="3" Background="#FFD34EBA" VerticalAlignment="Stretch" CornerRadius="12"/>
    </Grid>
</UserControl>

未来无限
关注
  • 5
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
订阅专栏
WPF实战项目四：左侧菜单导航
yigu4011的博客
07-12 2955
9、在点击首页、待办事项、备忘录、设置按钮时，菜单栏不会自动收缩进去，需要添加一下代码，设置ListBox的名字：x:Name="drawerHost"8、在ListBox下面添加导航，通过添加行为Microsoft.Xaml.Behaviors.Wpf来实现。6、在MainViewModel.cs中初始化导航 ，声明前进后退功能方法。5、在右侧空白注册一个区域，区域注册用上面单独的类来控制。
WPF实战学习笔记04-菜单导航
xinzhiya001的博客
07-24 1037
/定义Nanme变量。
WPF漂亮的导航菜单
11-05
WPF开发的漂亮酷炫的导航菜单实例程序，导航菜单实例注释讲解十分详细。
WPF之工具栏菜单栏功能区。
最新发布
lingxiao16888的博客
05-11 754
1.1，Menu中可添加菜单分隔条<Separator></Separator>作为分割线，使用Separator可以通过改变其template来自定义，Separator是无焦点的，如果简单的在MenuItem中添加一个textBlock它是可以有焦点的。1.4，ToolBarTray.Band：确定工具栏放在哪一栏中（最顶部的一栏索引为0），BandIndex属性明确设置一栏中什么位置放置工具栏.2.1，使用功能区需要添加程序集System.Windows.Controls.Ribbon。
WPF左侧导航菜单效果实现（使用MaterialDesign样式）
雨中深巷的油纸伞
01-12 1462
这是一个主题库，引用后默认到所有控件样式，如果某个控件不想用，可以这样写：style={x:null}UserControlMenuItem为单个菜单用户控件，由 Expander+ListView的组合形式实现。App.xaml：只引入MD控件样式。MainWindow.展示导航菜单及控制菜单对应的用户控件切换。五、导航子菜单用户控件，UserControlMenuItem.xaml；ViewModel中定义的两个菜单相关的类，将菜单及业务用户控件关联。七、两个举例用的用户控件；
WPF 导航界面悬浮两行之间的卡片 漂亮的卡片导航界面 WPF漂亮渐变颜色 WPF漂亮导航头界面 UniformGrid漂亮展现
weijia3624的专栏
01-08 892
其次，优秀的导航设计有助于简化复杂的操作流程。首先，引人入胜的首页界面是用户与软件交互的第一触点，它如同一本好书的封面，能够迅速吸引用户的注意力并激发其进一步探索的兴趣。精心设计的WPF导航界面采用丰富的图形元素、流畅的动画效果和响应式布局，营造出专业且友好的氛围，从而给用户留下深刻而积极的第一印象。最后，支持触摸友好和无障碍访问的漂亮导航界面意味着更广泛的用户群体覆盖，无论是桌面环境还是触摸屏设备，无论是普通用户还是具有特殊需求的用户，都能够舒适地进行交互操作。
WPF中在MVVM模式下实现导航功能
博客
10-17 2341
WPF中在MVVM模式下实现导航功能
WPF上位机通用通用框架实战
02-17
课程基于WPF开发，从上位机应用基础架构出发，全程代码实战，项目整体以MVVM思想模式设计开发，代码功能使用分层结构，逻辑与View解耦。通过此课程可以让大家了解到基本的串口通信方式，以及如何利用WPF的特性开发上位机应用，对WPF配合上位机开发有更深入的了解与认识，为WPF技术平台下的上位机应用开发打下坚实基础
界面组件Telerik UI for WPF R1 2023——让导航栏变得更智能！
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
02-10 850
界面组件Telerik UI for WPF全新发布了2023年第一个重大版本，本文将详细新版本中的导航组件，欢迎下载使用！
WPF的页面导航
xinlmain的博客
10-25 2282
工作中之前接触过的WPF程序一直是使用TabControl作不同页面间的切换，每个Tab负责独立的功能，清晰简捷，所以一直就没有动力研究WPF自带的页面导航。（虽然接触过使用页面导航的WPF项目，也并没有去了解，而是似懂非懂地过去了。） 直到最近做的一个项目，用的还是TabControl，但在某个Tab里面，做的任务有些复杂，导致UI在操作前后会有很大的变化。很自然的想法就是在这个Tab中使用两
WPF 侧边菜单的实现
hisxiwu的博客
08-31 762
WPF 侧边菜单的实现
wpf菜单MenuItem样式经典
12-02
wpf菜单MenuItem样式经典源代码,绝对经典，
WPF左侧漂亮的导航菜单.rar
03-26
WPF左侧导航菜单，项目可直接运行，进行有力参考
一个极度简单的类似侧边栏效果的Demo
09-06
这是一个很简单的示例，刚开始学习IOS不久，突然需要一个这种功能，看了网上的，都太过强大，本身看不太明白，也不太会维护，最后就自己简单处理了下手势，弄出了这个，发布上来供我们新手一起探讨。
WPF 侧边导航 UI框架
09-11
侧边导航c# WPF UI框架
WPF漂亮的菜单实例.zip
06-04
WPF开发的导航菜单实例程序，导航菜单实例注释讲解十分详细。 适合学习开发使用
wpf 侧边栏
12-19
在Windows Presentation Foundation (WPF) 中，侧边栏是一种常见的用户界面元素，它通常用于放置导航菜单、工具栏或者设置选项。"wpf 侧边栏" 的实现可以通过多种方式，但根据描述中的 "使用ExpandPanel"，我们将...
C# WPF MaterialDesignInXAML样式库和控件集 源码
11-28
MaterialDesignInXamlToolkit是一个流行的开源库，它为Windows Presentation Foundation（WPF）应用程序提供了丰富的Material Design风格的控件和样式。这个库使得C#开发者能够轻松地在WPF应用中实现Google的...
WPF MaterialDesign开源免费UI组件的简单使用
08-20
Material Design是一个很好用的WPF样式库和控件集，对于稍微有点WPF基础的开发者非常友好。简单好用是我的第一感：直接使用NuGet就可以获取到资源包，通过其官方的DemoApp(MaterialDesignDemo)很容易使用控件和样式...
wpf materialdesign 侧边栏不响应
05-11
可能是由于以下原因导致侧边栏不响应： 1. 控件没有正确绑定命令。请确保你的侧边栏控件的命令绑定到正确的 ViewModel 命令上。 2. 控件被其他控件遮挡。请检查侧边栏是否被其他控件（如弹出窗口）遮挡了。 3. 控件被禁用。请检查侧边栏是否被禁用了，如果是，请启用它。 4. 控件的事件处理程序没有正确实现。请检查侧边栏的事件处理程序是否正确实现。 如果以上方法都不能解决问题，你可以尝试在控件的属性中设置 Focusable="False"，这可能会解决侧边栏不响应的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值