當前位置：首頁 > 编程语言 > C# >内容正文

C#

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

發(fā)布時間：2023/12/4 C# 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 .NET CORE(C#) WPF简单菜单MVVM绑定小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

閱讀導(dǎo)航

本文背景

代碼實現(xiàn)

本文參考

源碼

1. 本文背景

WPF中垂直導(dǎo)航菜單大家應(yīng)該都常用，本文介紹使用MVVM的方式怎么綁定菜單，真的很簡單。

2. 代碼實現(xiàn)

使用 .Net Core 3.1 創(chuàng)建名為 “MenuMVVM” 的WPF模板項目，添加兩個Nuget庫：MaterialDesignThemes和MaterialDesignColors。

MaterialDesign控件庫

解決方案目錄結(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è)置啟動的視圖【Views/MainView.xaml】，并在【Application.Resources】節(jié)點增加MD控件4個樣式文件

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

兩個簡單的菜單實體類：

2.2.1 菜單新文件信息

文件【ItemCount.cs】，定義菜單項右側(cè)的新文件顯示個數(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 菜單項信息

文件【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展示內(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("音樂", 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: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】的后臺，綁定ViewModel,并實現(xiàn)鼠標左鍵拖動窗體功能：

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.源碼

文中代碼已經(jīng)全部給出，圖片使用站長網(wǎng)站外鏈，可直接Copy代碼，按解決方案目錄組織代碼文件即可運行，另附原作者視頻及源碼，見【3.本文參考】。

總結(jié)

以上是生活随笔為你收集整理的.NET CORE(C#) WPF简单菜单MVVM绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Beetlex之redis驱动
下一篇：避免在 ASP.NET Core 3.0