国外网站app,外贸站外推广,动态Js文件 做网站标题,软环境建设办公室网站阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 WPF中垂直导航菜单大家应该都常用#xff0c;本文介绍使用MVVM的方式怎么绑定菜单#xff0c;真的很简单。 2. 代码实现 使用 .Net Core 3.1 创建名为 “MenuMVVM” 的WPF模板项目#xff0c;添加两个Nuget库… 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 WPF中垂直导航菜单大家应该都常用本文介绍使用MVVM的方式怎么绑定菜单真的很简单。 2. 代码实现 使用 .Net Core 3.1 创建名为 “MenuMVVM” 的WPF模板项目添加两个Nuget库MaterialDesignThemes和MaterialDesignColors。 MaterialDesign控件库 解决方案目录结构 MenuMVVM        Views       MainView.xaml       MainView.xaml.cs ViewModels    MainViewModel.cs Modles     ItemCount.cs     MenuItem.cs App.xaml 2.1 引入MD控件样式 文件【App.xaml】在StartupUri中设置启动的视图【Views/MainView.xaml】并在【Application.Resources】节点增加MD控件4个样式文件 x:ClassMenuMVVM.App             xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation             xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml             StartupUriViews/MainView.xaml                                         Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml /                 Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml /                 Sourcepack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml /                 Sourcepack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml /                           2.2 Models 两个简单的菜单实体类 2.2.1 菜单新文件信息 文件【ItemCount.cs】定义菜单项右侧的新文件显示个数及显示背景色 using System.Windows.Media;   namespace MenuMVVM.Models {    public class ItemCount    {        public Brush Color { get; private set; }        public int Value { get; private set; }          public ItemCount(Brush color, int value)        {            Color color;            Value value;        }    } } 2.2.2 菜单项信息 文件【MenuItem.cs】定义菜单项展示的名称、图片、新文件信息 using MaterialDesignThemes.Wpf; using System;   namespace MenuMVVM.Models {    public class MenuItem    {        public String Name { get; private set; }        public PackIconKind Icon { get; private set; }        public ItemCount Count { get; private set; }          public MenuItem(String name, PackIconKind icon, ItemCount count)        {            Name name;            Icon icon;            Count count;        }    } } 其中菜单项图标使用MD控件自带的字体图标库通过枚举【PackIconKind】可以很方便的使用该库提供的字体图标非常丰富目前有4836个枚举值有7883个 下面是最后几个 // // 摘要: //     List of available icons for use with MaterialDesignThemes.Wpf.PackIcon. // // 言论 //     All icons sourced from Material Design Icons Font - https://materialdesignicons.com/ //     - in accordance of https://github.com/Templarian/MaterialDesign/blob/master/license.txt. public enum PackIconKind {    .    .    .    ZodiacPisces 4832,    HoroscopePisces 4832,    ZodiacSagittarius 4833,    HoroscopeSagittarius 4833,    ZodiacScorpio 4834,    HoroscopeScorpio 4834,    ZodiacTaurus 4835,    HoroscopeTaurus 4835,    ZodiacVirgo 4836,    HoroscopeVirgo 4836 } 2.3 ViewModels 文件【MainViewModel.cs】只定义了简单的几个属性窗体展示Logo、菜单绑定列表。属性定义比较简单因为视图MainView.xaml展示内容不多 using MaterialDesignThemes.Wpf; using MenuMVVM.Models; using System.Collections.Generic; using System.Windows.Media;   namespace MenuMVVM.ViewModels {    public class MainViewModel    {        public string Logo { get; set; }        public List LeftMenus { get; set; }        public MainViewModel()        {            Logo https://img.dotnet9.com/logo-foot.png;              LeftMenus new List();            LeftMenus.Add(new MenuItem(图片, PackIconKind.Image, new ItemCount(Brushes.Black, 2)));            LeftMenus.Add(new MenuItem(音乐, PackIconKind.Music, new ItemCount(Brushes.DarkBlue, 4)));            LeftMenus.Add(new MenuItem(视频, PackIconKind.Video, new ItemCount(Brushes.DarkGreen, 7)));            LeftMenus.Add(new MenuItem(文档, PackIconKind.Folder, new ItemCount(Brushes.DarkOrange, 9)));        }    } } 2.4 Views 文件【MainView.xaml】作为唯一的视图只有31行布局代码显示了一个Logo、菜单列表 x:ClassMenuMVVM.Views.MainView        xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation        xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themes        xmlns:dhttp://schemas.microsoft.com/expression/blend/2008        xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml        xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006        mc:Ignorabled        TitleDotnet9 Height600 Width1080 Background#FF36235F MouseLeftButtonDownWindow_MouseLeftButtonDown        WindowStyleNone ResizeModeNoResize WindowStartupLocationCenterScreen             Width200 HorizontalAlignmentLeft Background#FF472076             Height150 BackgroundWhite                 Source{Binding Logo}/                         ItemsSource{Binding LeftMenus}                                                             OrientationHorizontal Height30                             Kind{Binding PathIcon} Width20 Height20 VerticalAlignmentCenter/                             Text{Binding PathName} Margin20 0 FontSize15 VerticalAlignmentCenter/                             VerticalAlignmentCenter                                 Width30 Height15 RadiusY7.15 RadiusX7.15 Fill{Binding PathCount.Color} StrokeWhite StrokeThickness0.7/                                 Text{Binding PathCount.Value} HorizontalAlignmentCenter VerticalAlignmentCenter FontSize9/                                                                                                                   文件【MainView.xaml.cs】作为视图【MainView.xaml】的后台绑定ViewModel,并实现鼠标左键拖动窗体功能 using MenuMVVM.ViewModels; using System.Windows;   namespace MenuMVVM.Views {   ///     /// 演示主窗体只用于简单的绑定ListView控件   ///    public partial class MainView : Window    {        public MainView()        {            this.DataContext new MainViewModel();            InitializeComponent();        }          private void Window_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)        {            DragMove();        }    } } 3.本文参考 视频一C# WPF Design UI: Navigation Drawer Model View View Mode配套源码MenuMVVM。 4.源码 文中代码已经全部给出图片使用站长网站外链可直接Copy代码按解决方案目录组织代码文件即可运行另附原作者视频及源码见【3.本文参考】。