.NET CORE(C#) WPF簡單選單MVVM繫結

首頁>技術>沙漠盡頭的狼2020-01-15 22:26

.NET CORE(C#) WPF簡單選單MVVM繫結

閱讀導航

本文背景程式碼實現本文參考原始碼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個樣式檔案

&lt;Application x:Class=&#34;MenuMVVM.App&#34;             xmlns=&#34;/file/2020/01/15/20200115222354_16588.jpg.aspx             xmlns:x=&#34;/file/2020/01/15/20200115222355_16589.jpg.aspx             StartupUri=&#34;Views/MainView.xaml&#34;&gt;    &lt;Application.Resources&gt;        &lt;ResourceDictionary&gt;            &lt;ResourceDictionary.MergedDictionaries&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml&#34; /&gt;            &lt;/ResourceDictionary.MergedDictionaries&gt;        &lt;/ResourceDictionary&gt;    &lt;/Application.Resources&gt;&lt;/Application&gt;

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 - /file/2020/01/15/20200115222356_16590.jpg     - 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&lt;MenuItem&gt; LeftMenus { get; set; }        public MainViewModel()        {            Logo = &#34;/file/2020/01/15/20200115222408_16594.jpg.png&#34;;            LeftMenus = new List&lt;MenuItem&gt;();            LeftMenus.Add(new MenuItem(&#34;圖片&#34;, PackIconKind.Image, new ItemCount(Brushes.Black, 2)));            LeftMenus.Add(new MenuItem(&#34;音樂&#34;, PackIconKind.Music, new ItemCount(Brushes.DarkBlue, 4)));            LeftMenus.Add(new MenuItem(&#34;視訊&#34;, PackIconKind.Video, new ItemCount(Brushes.DarkGreen, 7)));            LeftMenus.Add(new MenuItem(&#34;文件&#34;, PackIconKind.Folder, new ItemCount(Brushes.DarkOrange, 9)));        }    }}

2.4 Views

檔案【MainView.xaml】作為唯一的檢視，只有31行佈局程式碼，顯示了一個Logo、選單列表：

&lt;Window x:Class=&#34;MenuMVVM.Views.MainView&#34;        xmlns=&#34;/file/2020/01/15/20200115222354_16588.jpg.aspx        xmlns:materialDesign=&#34;/file/2020/01/15/20200115222406_16592.jpg        xmlns:d=&#34;/file/2020/01/15/20200115222407_16593.jpg.aspx        xmlns:x=&#34;/file/2020/01/15/20200115222355_16589.jpg.aspx        xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34;        mc:Ignorable=&#34;d&#34;        Title=&#34;Dotnet9&#34; Height=&#34;600&#34; Width=&#34;1080&#34; Background=&#34;#FF36235F&#34; MouseLeftButtonDown=&#34;Window_MouseLeftButtonDown&#34;        WindowStyle=&#34;None&#34; ResizeMode=&#34;NoResize&#34; WindowStartupLocation=&#34;CenterScreen&#34;&gt;    &lt;Grid&gt;        &lt;StackPanel Width=&#34;200&#34; HorizontalAlignment=&#34;Left&#34; Background=&#34;#FF472076&#34;&gt;            &lt;Grid Height=&#34;150&#34; Background=&#34;White&#34;&gt;                &lt;Image Source=&#34;{Binding Logo}&#34;/&gt;            &lt;/Grid&gt;            &lt;ListView ItemsSource=&#34;{Binding LeftMenus}&#34;&gt;                &lt;ListView.ItemTemplate&gt;                    &lt;DataTemplate&gt;                        &lt;StackPanel Orientation=&#34;Horizontal&#34; Height=&#34;30&#34;&gt;                            &lt;materialDesign:PackIcon Kind=&#34;{Binding Path=Icon}&#34; Width=&#34;20&#34; Height=&#34;20&#34; VerticalAlignment=&#34;Center&#34;/&gt;                            &lt;TextBlock Text=&#34;{Binding Path=Name}&#34; Margin=&#34;20 0&#34; FontSize=&#34;15&#34; VerticalAlignment=&#34;Center&#34;/&gt;                            &lt;Grid VerticalAlignment=&#34;Center&#34;&gt;                                &lt;Rectangle Width=&#34;30&#34; Height=&#34;15&#34; RadiusY=&#34;7.15&#34; RadiusX=&#34;7.15&#34; Fill=&#34;{Binding Path=Count.Color}&#34; Stroke=&#34;White&#34; StrokeThickness=&#34;0.7&#34;/&gt;                                &lt;TextBlock Text=&#34;{Binding Path=Count.Value}&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34; FontSize=&#34;9&#34;/&gt;                            &lt;/Grid&gt;                        &lt;/StackPanel&gt;                    &lt;/DataTemplate&gt;                &lt;/ListView.ItemTemplate&gt;            &lt;/ListView&gt;        &lt;/StackPanel&gt;    &lt;/Grid&gt;&lt;/Window&gt;

檔案【MainView.xaml.cs】作為檢視【MainView.xaml】的後臺，繫結ViewModel,並實現滑鼠左鍵拖動窗體功能：

using MenuMVVM.ViewModels;using System.Windows;namespace MenuMVVM.Views{    /// &lt;summary&gt;    /// 演示主窗體，只用於簡單的繫結ListView控制元件    /// &lt;/summary&gt;    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.原始碼

文中程式碼已經全部給出，圖片使用站長網站外鏈，可直接Copy程式碼，按解決方案目錄組織程式碼檔案即可執行，另附原作者視訊及原始碼，見【3.本文參考】。

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。轉載請註明本文地址：https://dotnet9.com/7339.html

189

XAML

∨ 優雅停止 SpringBoot 服務，拒絕 kill -9 暴力停止

劇多

.NET CORE(C#) WPF簡單選單MVVM繫結

XAML