.NET CORE(C#) WPF简单菜单MVVM绑定
閱讀導(dǎo)航
本文背景
代碼實(shí)現(xiàn)
本文參考
源碼
1. 本文背景
WPF中垂直導(dǎo)航菜單大家應(yīng)該都常用，本文介紹使用MVVM的方式怎么綁定菜單，真的很簡(jiǎn)單。
2. 代碼實(shí)現(xiàn)使用 .Net Core 3.1 創(chuàng)建名為 “MenuMVVM” 的WPF模板項(xiàng)目，添加兩個(gè)Nuget庫(kù)：MaterialDesignThemes和MaterialDesignColors。
MaterialDesign控件庫(kù)
解決方案目錄結(jié)構(gòu)：
MenuMVVM
? ? ? ?Views? ?
? ?MainView.xaml
? ? ? MainView.xaml.cs
ViewModels
? ?MainViewModel.cs
Modles
? ? ItemCount.cs
? ? MenuItem.cs
App.xaml
2.1 引入MD控件樣式
文件【App.xaml】，在StartupUri中設(shè)置啟動(dòng)的視圖【Views/MainView.xaml】，并在【Application.Resources】節(jié)點(diǎn)增加MD控件4個(gè)樣式文件
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">
? ?>
? ? ? ?>
? ? ? ? ? ?>
? ? ? ? ? ? ? ? Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
? ? ? ? ? ? ? ? Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
? ? ? ? ? ? ? ? Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
? ? ? ? ? ? ? ? Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml" />
? ? ? ? ? ?
? ? ? ?
? ?
?
2.2 Models
兩個(gè)簡(jiǎn)單的菜單實(shí)體類：
2.2.1 菜單新文件信息
文件【ItemCount.cs】，定義菜單項(xiàng)右側(cè)的新文件顯示個(gè)數(shù)及顯示背景色：
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 菜單項(xiàng)信息
文件【MenuItem.cs】，定義菜單項(xiàng)展示的名稱、圖片、新文件信息：
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;
? ? ? ?}
? ?}
}
其中菜單項(xiàng)圖標(biāo)使用MD控件自帶的字體圖標(biāo)庫(kù)，通過(guò)枚舉【PackIconKind】可以很方便的使用，該庫(kù)提供的字體圖標(biāo)非常豐富，目前有4836個(gè)（枚舉值有7883個(gè)）， 下面是最后幾個(gè)：
//
// 摘要:
// ? ? 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】，只定義了簡(jiǎn)單的幾個(gè)屬性：窗體展示Logo、菜單綁定列表。屬性定義比較簡(jiǎn)單，因?yàn)橐晥DMainView.xaml展示內(nèi)容不多：
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("音樂(lè)", 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行布局代碼，顯示了一個(gè)Logo、菜單列表：
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">
? ?>
? ? ? ? Width="200" HorizontalAlignment="Left" Background="#FF472076">
? ? ? ? ? ? Height="150" Background="White">
? ? ? ? ? ? ? ? Source="{Binding Logo}"/>
? ? ? ? ? ?
? ? ? ? ? ? ItemsSource="{Binding LeftMenus}">
? ? ? ? ? ? ? ?>
? ? ? ? ? ? ? ? ? ?>
? ? ? ? ? ? ? ? ? ? ? ? Orientation="Horizontal" Height="30">
? ? ? ? ? ? ? ? ? ? ? ? ? ? Kind="{Binding Path=Icon}" Width="20" Height="20" VerticalAlignment="Center"/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? Text="{Binding Path=Name}" Margin="20 0" FontSize="15" VerticalAlignment="Center"/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? VerticalAlignment="Center">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Width="30" Height="15" RadiusY="7.15" RadiusX="7.15" Fill="{Binding Path=Count.Color}" Stroke="White" StrokeThickness="0.7"/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Text="{Binding Path=Count.Value}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="9"/>
? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ?
? ?
?
文件【MainView.xaml.cs】作為視圖【MainView.xaml】的后臺(tái)，綁定ViewModel,并實(shí)現(xiàn)鼠標(biāo)左鍵拖動(dòng)窗體功能：
using MenuMVVM.ViewModels;
using System.Windows;
namespace MenuMVVM.Views
{
? ///
?
? /// 演示主窗體，只用于簡(jiǎn)單的綁定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.源碼
文中代碼已經(jīng)全部給出，圖片使用站長(zhǎng)網(wǎng)站外鏈，可直接Copy代碼，按解決方案目錄組織代碼文件即可運(yùn)行，另附原作者視頻及源碼，見【3.本文參考】。
?
總結(jié)
以上是生活随笔為你收集整理的.NET CORE(C#) WPF简单菜单MVVM绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Beetlex之redis驱动
- 下一篇： .NET CORE(C#) WPF亚克力