2. 程式人生 > 實用技巧 >WPF MVVM 入門示例講解

WPF MVVM 入門示例講解

阿新 • • 發佈：2020-09-10

M-V-VM是Model-View-ViewModel的簡寫，Model，ViewModel是個類檔案（.cs檔案)，View是前臺檔案（,xaml檔案）。假設我們的工程只有一個前臺檔案和一個後臺檔案，當設計要求越來越多的時候，前後臺文件可能會高達上千行，甚至上萬行，此時要想找到對應的程式碼，滑鼠滾輪會滑的頭大。學習MVVM便於工程除錯，修改，移植。用MVVM如果只是修改或者更好顯示介面，後臺檔案只需稍微的改動甚至不用改動。下面這個例子是V-VM模式就是view和viewmodel，先以簡單的入門，工程集如下：

<Window x:Class="Students.View"
        xmlns
 
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Students"
        mc:Ignorable
 
="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name ="StudetGrid"  Grid.Row ="0">
            <Grid.DataContext>
                <!--宣告建立一個ViewModel的例項,這個聲明確定了ViewModel.cs是VM,這個宣告建立了View.xaml與ViemModel之間的橋樑，這個myGrid所有繫結的屬性(Name,Age,Sex)都值的是ViewModel.cs類中的成員-->
                <local:StudetViewModel/>
            </Grid.DataContext>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="
 
*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="姓名：" Grid.Column="0" HorizontalAlignment="Right"/>
            <TextBlock Text="{Binding Name}" Grid.Column="1"/>
            <TextBlock Text="年齡：" Grid.Column="2" HorizontalAlignment="Right"  />
            <TextBlock Text="{Binding Age}" Grid.Column="3" />
            <TextBlock Text="性別：" Grid.Column="4" HorizontalAlignment="Right" />
            <TextBlock Text="{Binding Sex}" Grid.Column="5"/>
            <Button Content="更新" Grid.Column="6" Click="BtnClick" />

        </Grid>
    </Grid>
</Window>
View.xaml 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Students
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class View : Window
    {
        public static StudetViewModel viewModel;//宣告一個類，但是沒有例項化,把這個viewModel設為static方便其他頁面檔案互相訪問繫結的屬性
        public View()
        {
            InitializeComponent();
            viewModel = StudetGrid.DataContext as StudetViewModel;//在構造方法中例項化viewModel，這個viewModel就是View.xaml中宣告的那個ViewModel例項，就是那個橋樑。
        }

        private void BtnClick(object sender, RoutedEventArgs e)
        {
            viewModel.Name = "小明";
            viewModel.Age = "15";
            viewModel.Sex = "男";
        }
    }
}
View.xaml.cs 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;

namespace Students
{
    public class StudetViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private string name;
        public String Name
        {
            get { return name; }
            set { name = value; OnPropertyChanged("Name"); }
        }

        private string age;
        public String Age
        {
            get { return age; }
            set { age = value; OnPropertyChanged("Age"); }
        }

        private string sex;
        public String Sex
        {
            get { return sex; }
            set { sex = value; OnPropertyChanged("Sex"); }
        }
    }
}
StudetViewModel.cs

View.xaml是View，那如何確定StudetViewModel.cs就是VM呢？在View.xaml檔案中有如下宣告

在前臺檔案中宣告資料上下文指定類，指定的那個類就是ViewModel。先看一下執行效果吧

這個工程檔案裡的StudetViewModel.cs其實就是Model和ViewModel合在一起了

增加完Model類後的程式集如下：

如何確定PeronModel就Model呢？因為它在ViewModel中有例項化

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;

namespace Students
{
    public class StudetViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }


        private PersonModel _studentModel = new PersonModel();//例項化Model中的類
        public PersonModel StudentModel
        {
            get { return _studentModel; }
            set { _studentModel = value; OnPropertyChanged("StudentModel"); }
        }
    }
}
StudetViewModel 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;

namespace Students
{
    public class PersonModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private string name;
        public String Name
        {
            get { return name; }
            set { name = value; OnPropertyChanged("Name"); }
        }

        private string age;
        public String Age
        {
            get { return age; }
            set { age = value; OnPropertyChanged("Age"); }
        }

        private string sex;
        public String Sex
        {
            get { return sex; }
            set { sex = value; OnPropertyChanged("Sex"); }
        }
    }
}
Students 
<Window x:Class="Students.View"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Students"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name ="StudetGrid"  Grid.Row ="0">
            <Grid.DataContext>
                <!--宣告建立一個ViewModel的例項,這個聲明確定了ViewModel.cs是VM,這個宣告建立了View.xaml與ViemModel之間的橋樑，這個myGrid所有繫結的屬性(Name,Age,Sex)都值的是ViewModel.cs類中的成員-->
                <local:StudetViewModel/>
            </Grid.DataContext>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="姓名：" Grid.Column="0" HorizontalAlignment="Right"/>
            <TextBlock Text="{Binding StudentModel.Name}" Grid.Column="1"/>
            <TextBlock Text="年齡：" Grid.Column="2" HorizontalAlignment="Right"  />
            <TextBlock Text="{Binding StudentModel.Age}" Grid.Column="3" />
            <TextBlock Text="性別：" Grid.Column="4" HorizontalAlignment="Right" />
            <TextBlock Text="{Binding StudentModel.Sex}" Grid.Column="5"/>
            <Button Content="更新" Grid.Column="6" Click="BtnClick" />

        </Grid>
    </Grid>
</Window>
View 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Students
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class View : Window
    {
        public static StudetViewModel viewModel;//宣告一個類，但是沒有例項化,把這個viewModel設為static方便其他頁面檔案互相訪問繫結的屬性
        public View()
        {
            InitializeComponent();
            viewModel = StudetGrid.DataContext as StudetViewModel;//在構造方法中例項化viewModel，這個viewModel就是View.xaml中宣告的那個ViewModel例項，就是那個橋樑。
        }

        private void BtnClick(object sender, RoutedEventArgs e)
        {
            viewModel.StudentModel.Name = "小明";
            viewModel.StudentModel.Age = "15";
            viewModel.StudentModel.Sex = "男";
        }
    }
}
View.xaml.cs

View中例項化過ViewModel，兒ViewModel中例項化過Model，所以說ViewModel建立起了View與Model之間溝通的橋樑。一個ViewModel類中可以有多個不同的Model類的例項，比如我們還可以建立一個成績類（Model）,然後在ViewModel中去例項化，最後在View介面中去繫結各科成績，這個好理解。

View中也可以例項化多個ViewModel

程式集如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;

namespace Students
{
    public class TeacherViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }


        private PersonModel _teacherModel = new PersonModel();//例項化Model中的類
        public PersonModel TeacherModel
        {
            get { return _teacherModel; }
            set { _teacherModel = value; OnPropertyChanged("TeacherModel"); }
        }
    }
}
TeacherViewModel 
<Window x:Class="Students.View"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Students"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name ="StudetGrid"  Grid.Row ="0">
            <Grid.DataContext>
                <!--宣告建立一個ViewModel的例項,這個聲明確定了ViewModel.cs是VM,這個宣告建立了View.xaml與ViemModel之間的橋樑，這個myGrid所有繫結的屬性(Name,Age,Sex)都值的是ViewModel.cs類中的成員-->
                <local:StudetViewModel/>
            </Grid.DataContext>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="學生姓名：" Grid.Column="0" HorizontalAlignment="Right"/>
            <TextBlock Text="{Binding StudentModel.Name}" Grid.Column="1"/>
            <TextBlock Text="年齡：" Grid.Column="2" HorizontalAlignment="Right"  />
            <TextBlock Text="{Binding StudentModel.Age}" Grid.Column="3" />
            <TextBlock Text="性別：" Grid.Column="4" HorizontalAlignment="Right" />
            <TextBlock Text="{Binding StudentModel.Sex}" Grid.Column="5"/>
            <Button Content="更新" Grid.Column="6" Click="BtnClick" />

        </Grid>
        <Grid x:Name ="TeacherGrid"  Grid.Row ="1">
            <Grid.DataContext>
                <!--宣告建立一個ViewModel的例項,這個聲明確定了ViewModel.cs是VM,這個宣告建立了View.xaml與ViemModel之間的橋樑，這個myGrid所有繫結的屬性(Name,Age,Sex)都值的是ViewModel.cs類中的成員-->
                <local:TeacherViewModel/>
            </Grid.DataContext>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="老師姓名：" Grid.Column="0" HorizontalAlignment="Right"/>
            <TextBlock Text="{Binding TeacherModel.Name}" Grid.Column="1"/>
            <TextBlock Text="年齡：" Grid.Column="2" HorizontalAlignment="Right"  />
            <TextBlock Text="{Binding TeacherModel.Age}" Grid.Column="3" />
            <TextBlock Text="性別：" Grid.Column="4" HorizontalAlignment="Right" />
            <TextBlock Text="{Binding TeacherModel.Sex}" Grid.Column="5"/>
            <Button Content="更新" Grid.Column="6" Click="BtnClickTeacher" />

        </Grid>
    </Grid>
</Window>
View.xaml 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Students
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class View : Window
    {
        public static StudetViewModel studentViewModel;//宣告一個類，但是沒有例項化,把這個viewModel設為static方便其他頁面檔案互相訪問繫結的屬性
        public static TeacherViewModel teacherViewModel;
        public View()
        {
            InitializeComponent();
            studentViewModel = StudetGrid.DataContext as StudetViewModel;//在構造方法中例項化viewModel，這個viewModel就是View.xaml中宣告的那個ViewModel例項，就是那個橋樑。
            teacherViewModel = TeacherGrid.DataContext as TeacherViewModel;
        }

        private void BtnClick(object sender, RoutedEventArgs e)
        {
            studentViewModel.StudentModel.Name = "小明";
            studentViewModel.StudentModel.Age = "15";
            studentViewModel.StudentModel.Sex = "男";
        }

        private void BtnClickTeacher(object sender, RoutedEventArgs e)
        {
            teacherViewModel.TeacherModel.Name = "王老師";
            teacherViewModel.TeacherModel.Age = "30";
            teacherViewModel.TeacherModel.Sex = "女";
        }
    }
}
View.xaml.cs

效果如下：

相關推薦

WPF MVVM 入門示例講解

M-V-VM是Model-View-ViewModel的簡寫，Model，ViewModel是個類檔案（.cs檔案)，View是前臺檔案（,xaml檔案）。假設我們的工程只有一個前臺檔案和一個後臺檔案，當設計要求越來越多的時候，前後臺文件可能會高達上千行

WPF DataGrid入門示例

一、新增，刪除、插入行 <Window x:Class=\"WpfApp1.MainWindow\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"

WPF快速入門系列(8)——MVVM快速入門

一、引言 　　在前面介紹了WPF一些核心的內容，其中包括WPF佈局、依賴屬性、路由事件、繫結、命令、資源樣式和模板。然而，在WPF還衍生出了一種很好的程式設計框架，即WVVM，在Web端開發有MVC，在WPF客戶端開發中有M

Mysql動態更新資料庫指令碼的示例講解

具體的upgrade指令碼如下： 動態刪除索引 DROP PROCEDURE IF EXISTS UPGRADE; DELIMITER $$ CREATE PROCEDURE UPGRADE()

基於Redis的限流器的實現(示例講解)

1 概述 系統中的介面通常都有限流，比如 70次/秒 ，如何保證我們的介面的呼叫次數在超過第三方介面限流的時候快速失敗呢？這時候就需要限流器了。下面是筆者用redis實現限流器的流程圖。

pytorch點乘與叉乘示例講解

點乘 import torch x = torch.tensor([[3,3],[3,3]]) y = x*x #x.dot(x) z = torch.mul(x,x) #x.mul(x) print(y)

jQuery 選擇器用法基礎入門示例

本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下： 今兒個開始學習jQuery，在學習jQuery之前我們應該掌握js，我之前也寫過幾篇筆記，但是隻是小部分的知識，js也不是很難 可以自己簡單的看看。以後

pytorch實現mnist分類的示例講解

torchvision包 包含了目前流行的資料集，模型結構和常用的圖片轉換工具。 torchvision.datasets中包含了以下資料集

JS 陣列基本用法入門示例解析

本文例項講述了JS 陣列基本用法。分享給大家供大家參考，具體如下： 講道理和Java差不多。

java GUI介面初步入門示例【AWT包】

本文例項講述了java GUI介面。分享給大家供大家參考，具體如下： Java不太擅長做圖形介面；

oracle基本查詢用法入門示例

本文例項講述了oracle基本查詢用法。分享給大家供大家參考，具體如下： 一、基本select語句

Python計算IV值的示例講解

在對變數分箱後，需要計算變數的重要性，IV是評估變數區分度或重要性的統計量之一，python計算IV值的程式碼如下：

Java連結串列（Linked List）基本原理與實現方法入門示例

本文例項講述了Java連結串列（Linked List）基本原理與實現方法。分享給大家供大家參考，具體如下：

.NET Core 3 WPF MVVM框架 Prism系列之導航系統

本文將介紹如何在.NET Core3環境下使用MVVM框架Prism基於區域Region的導航系統 在講解Prism導航系統之前，我們先來看看一個例子,我在之前的demo專案建立一個登入介面：

.NET Core 3 WPF MVVM框架 Prism系列之對話方塊服務

原文:.NET Core 3 WPF MVVM框架 Prism系列之對話方塊服務 ?本文將介紹如何在.NET Core3環境下使用MVVM框架Prism的對話方塊服務，這也是prism系列的最後一篇完結文章，下面是Prism系列文章的索引：

Halcon斑點分析官方示例講解

官方示例中有許多很好的例子可以幫助大家理解和學習Halcon，下面舉幾個經典的斑點分析例子講解一下

hibernate快速入門示例

hibernate概述 hibernate是一個java的全自動ORM框架，它可以自動生成SQL語句、自動建表、自動執行，使用者可以不使用SQL完成資料的CRUD操作，同時它也是基於JPA規則的一種實現方式

WPF MVVM 模式下的彈窗

WPFMVVM模式下的彈窗 獨立觀察員 2020 年 7 月 15 日 一、總體展示 首先看看使用者控制元件在設計頁面的大致效果：

WPF MVVM 模式下後臺事件在前臺的呼叫和繫結

方法一、事件觸發器（EventSetter）比較通用的方法不只限於MVVM模式 1、在前臺樣式中定義事件觸發器並指定事件型別和事件名

websocket入門示例

WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料，可以取代以前的Ajax輪詢，節約頻寬和伺服器資源，更好地進行實時通訊。