微信公众号：dotnet9，网站：dotnet9，问题或建议：，
如果对您有所帮助：。
.net core(c#) wpf简单菜单mvvm绑定
阅读导航
- 本文背景
- 代码实现
- 本文参考
- 源码
1. 本文背景
wpf中垂直导航菜单大家应该都常用，本文介绍使用mvvm的方式怎么绑定菜单，真的很简单。
2. 代码实现
使用 .net core 3.1 创建名为 “menumvvm” 的wpf模板项目，添加两个nuget库：materialdesignthemes和materialdesigncolors。
解决方案目录结构：
- menumvvm
- models
- itemcount.cs
- menuitem.cs
- viewmodels
- mainviewmodel.cs
- views
- mainview.xaml
- mainview.xaml.cs
- mainview.xaml
- app.xaml
- models
2.1 引入md控件样式
文件【app.xaml】，在startupuri中设置启动的视图【views/mainview.xaml】，并在【application.resources】节点增加md控件4个样式文件
<application x:class="menumvvm.app"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
startupuri="views/mainview.xaml">
<application.resources>
<resourcedictionary>
<resourcedictionary.mergeddictionaries>
<resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.dark.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.lightblue.xaml" />
</resourcedictionary.mergeddictionaries>
</resourcedictionary>
</application.resources>
</application>
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<menuitem> leftmenus { get; set; }
public mainviewmodel()
{
logo = "https://img.dotnet9.com/logo-foot.png";
leftmenus = new list<menuitem>();
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、菜单列表：
<window x:class="menumvvm.views.mainview"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:ignorable="d"
title="dotnet9" height="600" width="1080" background="#ff36235f" mouseleftbuttondown="window_mouseleftbuttondown"
windowstyle="none" resizemode="noresize" windowstartuplocation="centerscreen">
<grid>
<stackpanel width="200" horizontalalignment="left" background="#ff472076">
<grid height="150" background="white">
<image source="{binding logo}"/>
</grid>
<listview itemssource="{binding leftmenus}">
<listview.itemtemplate>
<datatemplate>
<stackpanel orientation="horizontal" height="30">
<materialdesign:packicon kind="{binding path=icon}" width="20" height="20" verticalalignment="center"/>
<textblock text="{binding path=name}" margin="20 0" fontsize="15" verticalalignment="center"/>
<grid verticalalignment="center">
<rectangle width="30" height="15" radiusy="7.15" radiusx="7.15" fill="{binding path=count.color}" stroke="white" strokethickness="0.7"/>
<textblock text="{binding path=count.value}" horizontalalignment="center" verticalalignment="center" fontsize="9"/>
</grid>
</stackpanel>
</datatemplate>
</listview.itemtemplate>
</listview>
</stackpanel>
</grid>
</window>
文件【mainview.xaml.cs】作为视图【mainview.xaml】的后台，绑定viewmodel,并实现鼠标左键拖动窗体功能：
using menumvvm.viewmodels;
using system.windows;
namespace menumvvm.views
{
/// <summary>
/// 演示主窗体，只用于简单的绑定listview控件
/// </summary>
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.本文参考】。
除非注明，文章均由 dotnet9 整理发布，欢迎转载。
转载请注明本文地址：
欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章
黄山市民网：https://www.huangshanshimin.com/
