微信公众号：dotnet9，网站：dotnet9，问题或建议：，
如果对您有所帮助：。

.net core(c#) wpf简单菜单mvvm绑定

阅读导航

1. 本文背景
2. 代码实现
3. 本文参考
4. 源码

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
  • app.xaml

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.本文参考

1. 视频一：c# wpf design ui: navigation drawer model view view mode，配套源码：menumvvm。

4.源码

文中代码已经全部给出，图片使用站长网站外链，可直接copy代码，按解决方案目录组织代码文件即可运行，另附原作者视频及源码，见【3.本文参考】。

除非注明，文章均由 dotnet9 整理发布，欢迎转载。

转载请注明本文地址：

欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章