閱讀導航
- 本文背景
- 代碼實現
- 本文參考
- 源碼
1. 本文背景
WPF中垂直導航菜單大家應該都常用,本文介紹使用MVVM的方式怎麼綁定菜單,真的很簡單。
2. 代碼實現
使用 .Net Core 3.1 創建名為 “MenuMVVM” 的WPF模板項目,添加兩個Nuget庫:MaterialDesignThemes和MaterialDesignColors。
解決方案目錄結構(這次失誤,未截圖,網站可以查看):
2.1 引入MD控件樣式
文件【App.xaml】,在StartupUri中設置啟動的視圖【Views/MainView.xaml】,並在【Application.Resources】節點增加MD控件4個樣式文件
<code><application> 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>
<resourcedictionary>
<resourcedictionary>
<resourcedictionary>
/<resourcedictionary.mergeddictionaries>
/<resourcedictionary>
/<application.resources>
/<application>
/<code>
2.2 Models
兩個簡單的菜單實體類:
2.2.1 菜單新文件信息
文件【ItemCount.cs】,定義菜單項右側的新文件顯示個數及顯示背景色:
<code>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;
}
}
}/<code>
2.2.2 菜單項信息
文件【MenuItem.cs】,定義菜單項展示的名稱、圖片、新文件信息:
<code>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;
}
}
}/<code>
其中菜單項圖標使用MD控件自帶的字體圖標庫,通過枚舉【PackIconKind】可以很方便的使用,該庫提供的字體圖標非常豐富,目前有4836個(枚舉值有7883個), 下面是最後幾個:
<code>//
// 摘要:
// 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
}/<code>
2.3 ViewModels
文件【MainViewModel.cs】,只定義了簡單的幾個屬性:窗體展示Logo、菜單綁定列表。屬性定義比較簡單,因為視圖MainView.xaml展示內容不多:
<code>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)));
}
}
}/<menuitem>/<menuitem>/<code>
2.4 Views
文件【MainView.xaml】作為唯一的視圖,只有31行佈局代碼,顯示了一個Logo、菜單列表:
<code><window> 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>
<grid>
<image>
/<grid>
<listview>
<listview.itemtemplate>
<datatemplate>
<stackpanel>
<packicon>
<textblock>
<grid>
<rectangle>
<textblock>
/<grid>
/<stackpanel>
/<datatemplate>
/<listview.itemtemplate>
/<listview>
/<stackpanel>
/<grid>
/<window>/<code>
文件【MainView.xaml.cs】作為視圖【MainView.xaml】的後臺,綁定ViewModel,並實現鼠標左鍵拖動窗體功能:
<code>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();
}
}
}/<code>
3.本文參考
- 視頻一:C# WPF Design UI: Navigation Drawer Model View View Mode,配套源碼:MenuMVVM。
4.源碼
文中代碼已經全部給出,圖片使用站長網站外鏈,可直接Copy代碼,按解決方案目錄組織代碼文件即可運行,另附原作者視頻及源碼,見【3.本文參考】。
除非註明,文章均由 Dotnet9 整理發佈,歡迎轉載。
轉載請註明本文地址:https://dotnet9.com/7339.html
閱讀更多 沙漠盡頭的狼 的文章
關鍵字: XAML