.NET CORE(C#) WPF简单菜单MVVM绑定

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个样式文件

1. <Application x:Class="MenuMVVM.App"

2.            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3.            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4.             StartupUri="Views/MainView.xaml">

5.    <Application.Resources>

6.        <ResourceDictionary>

7.            <ResourceDictionary.MergedDictionaries>

8.                <ResourceDictionarySource="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />

9.                <ResourceDictionarySource="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

10.                <ResourceDictionarySource="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />

11.                <ResourceDictionarySource="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml" />

12.            </ResourceDictionary.MergedDictionaries>

13.        </ResourceDictionary>

14.    </Application.Resources>

15. </Application>

2.2 Models

两个简单的菜单实体类：

2.2.1 菜单新文件信息

文件【ItemCount.cs】，定义菜单项右侧的新文件显示个数及显示背景色：

1. using System.Windows.Media;

3. namespace MenuMVVM.Models

4. {

5.    public class ItemCount

6.    {

7.        public Brush Color { get; private set; }

8.        public int Value { get; private set; }

10.        public ItemCount(Brush color, int value)

11.        {

12.            Color = color;

13.            Value = value;

14.        }

15.    }

16. }

2.2.2 菜单项信息

文件【MenuItem.cs】，定义菜单项展示的名称、图片、新文件信息：

1. using MaterialDesignThemes.Wpf;

2. using System;

4. namespace MenuMVVM.Models

5. {

6.    public class MenuItem

7.    {

8.        public String Name { get; private set; }

9.        public PackIconKind Icon { get; private set; }

10.        public ItemCount Count { get; private set; }

12.        public MenuItem(String name, PackIconKind icon, ItemCount count)

13.        {

14.            Name = name;

15.            Icon = icon;

16.            Count = count;

17.        }

18.    }

19. }

其中菜单项图标使用MD控件自带的字体图标库，通过枚举【PackIconKind】可以很方便的使用，该库提供的字体图标非常丰富，目前有4836个（枚举值有7883个）， 下面是最后几个：

1. //

2. // 摘要:

3. //     List of available icons for use with MaterialDesignThemes.Wpf.PackIcon.

4. //

5. // 言论：

6. //     All icons sourced from Material Design Icons Font - https://materialdesignicons.com/

7. //     - in accordance of https://github.com/Templarian/MaterialDesign/blob/master/license.txt.

8. public enum PackIconKind

9. {

10.    .

11.    .

12.    .

13.    ZodiacPisces = 4832,

14.    HoroscopePisces = 4832,

15.    ZodiacSagittarius = 4833,

16.    HoroscopeSagittarius = 4833,

17.    ZodiacScorpio = 4834,

18.    HoroscopeScorpio = 4834,

19.    ZodiacTaurus = 4835,

20.    HoroscopeTaurus = 4835,

21.    ZodiacVirgo = 4836,

22.    HoroscopeVirgo = 4836

23. }

2.3 ViewModels

文件【MainViewModel.cs】，只定义了简单的几个属性：窗体展示Logo、菜单绑定列表。属性定义比较简单，因为视图MainView.xaml展示内容不多：

1. using MaterialDesignThemes.Wpf;

2. using MenuMVVM.Models;

3. using System.Collections.Generic;

4. using System.Windows.Media;

6. namespace MenuMVVM.ViewModels

7. {

8.    public class MainViewModel

9.    {

10.        public string Logo { get; set; }

11.        public List<MenuItem> LeftMenus { get; set; }

12.        public MainViewModel()

13.        {

14.            Logo = "https://img.dotnet9.com/logo-foot.png";

16.            LeftMenus = new List<MenuItem>();

17.            LeftMenus.Add(new MenuItem("图片", PackIconKind.Image, new ItemCount(Brushes.Black, 2)));

18.            LeftMenus.Add(new MenuItem("音乐", PackIconKind.Music, new ItemCount(Brushes.DarkBlue,4)));

19.            LeftMenus.Add(new MenuItem("视频", PackIconKind.Video, new ItemCount(Brushes.DarkGreen,7)));

20.            LeftMenus.Add(new MenuItem("文档", PackIconKind.Folder, newItemCount(Brushes.DarkOrange, 9)));

21.        }

22.    }

23. }

2.4 Views

文件【MainView.xaml】作为唯一的视图，只有31行布局代码，显示了一个Logo、菜单列表：

1. <Window x:Class="MenuMVVM.Views.MainView"

2.        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3.        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

4.        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

5.        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

6.        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

7.        mc:Ignorable="d"

8.        Title="Dotnet9" Height="600" Width="1080"Background="#FF36235F"MouseLeftButtonDown="Window_MouseLeftButtonDown"

9.        WindowStyle="None" ResizeMode="NoResize"WindowStartupLocation="CenterScreen">

10.    <Grid>

11.        <StackPanel Width="200"HorizontalAlignment="Left" Background="#FF472076">

12.            <Grid Height="150" Background="White">

13.                <Image Source="{Binding Logo}"/>

14.            </Grid>

15.            <ListView ItemsSource="{Binding LeftMenus}">

16.                <ListView.ItemTemplate>

17.                    <DataTemplate>

18.                        <StackPanel Orientation="Horizontal"Height="30">

19.                            <materialDesign:PackIcon Kind="{Binding Path=Icon}" Width="20" Height="20"VerticalAlignment="Center"/>

20.                            <TextBlock Text="{Binding Path=Name}" Margin="20 0" FontSize="15"VerticalAlignment="Center"/>

21.                            <Grid VerticalAlignment="Center">

22.                                <Rectangle Width="30" Height="15"RadiusY="7.15" RadiusX="7.15" Fill="{Binding Path=Count.Color}" Stroke="White"StrokeThickness="0.7"/>

23.                                <TextBlock Text="{Binding Path=Count.Value}" HorizontalAlignment="Center"VerticalAlignment="Center" FontSize="9"/>

24.                            </Grid>

25.                        </StackPanel>

26.                    </DataTemplate>

27.                </ListView.ItemTemplate>

28.            </ListView>

29.        </StackPanel>

30.    </Grid>

31. </Window>

文件【MainView.xaml.cs】作为视图【MainView.xaml】的后台，绑定ViewModel,并实现鼠标左键拖动窗体功能：

1. using MenuMVVM.ViewModels;

2. using System.Windows;

4. namespace MenuMVVM.Views

5. {

6.   /// <summary>

7.   /// 演示主窗体，只用于简单的绑定ListView控件

8.   /// </summary>

9.    public partial class MainView : Window

10.    {

11.        public MainView()

12.        {

13.            this.DataContext = new MainViewModel();

14.            InitializeComponent();

15.        }

17.        private void Window_MouseLeftButtonDown(objectsender, System.Windows.Input.MouseButtonEventArgs e)

18.        {

19.            DragMove();

20.        }

21.    }

22. }

3.本文参考

1. 视频一：C# WPF Design UI: Navigation Drawer Model View View Mode，配套源码：MenuMVVM。