wpf-mvvm开发学习1
作者:互联网
最近在做wpf的程序 写到中期越来越恶心 所以尝试重构为MVVM模式
MVVM相关知识
0x01 什么是MVVM
1.Model
Model就是一个class,是对现实中事物的抽象,开发过程中涉及到的事物都可以抽象为Model,例如客户,客户的姓名、编号、电话、住址等属性也对应了class中的Property,客户的下订单、付款等行为对应了class中的方法。
2. View
View很好理解,就是界面。
3. ViewModel
上面说过Model抽象,那么ViewModel就是对View的抽象。显示的数据对应着ViewMode中的Property,执行的命令对应着ViewModel中的Command。
0x02 WPF中MVVM的解耦方式
在WPF的MVVM模式中,View和ViewModel之间数据和命令的关联都是通过绑定实现的,绑定后View和ViewModel并不产生直接的依赖。具体就是View中出现数据变化时会尝试修改绑定的目标。同样View执行命令时也会去寻找绑定的Command并执行。反过来,ViewModel在Property发生改变时会发个通知说“名字叫XXX的Property改变了,你们这些View中谁绑定了XXX也要跟着变啊!”,至于有没有View收到是不是做出变化也不关心。ViewModel中的Command脱离View就更简单了,因为Command在执行操作过程中操作数据时,根本不需要操作View中的数据,只需要操作ViewModel中的Property就可以了,Property的变化通过绑定就可以反映到View上。这样在测试Command时也不需要View的参与。这也是我在接触WPF初期时根本理解不了的所谓数据驱动。
这样一来ViewMode可以在完全没有View的情况下测试,View也可以在完全没有ViewModel的情况下测试(当然只是测试界面布局和动画等业务无关的内容)。
0x3 MVVM框架需要解决的问题
从图中可以看出如果要实现一套MVVM框架,需要解决的最基本的问题就是数据绑定和命令绑定。此外由于UI中会产生大量的事件,因此还需要将事件绑定到MVVM中的命令上。
实战开始
安装
Microsoft.Toolkit.Mvvm
Microsoft.Xaml.Behaviors.Wpf
PropertyChanged.Fody
构建如图项目结构
一个简单demo
ProcessWindowModel.cs Model层
应该声明所需要的类 数据结构)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Toolkit.Mvvm.ComponentModel;
namespace lltool_MVVM.Model {
internal class ProcessWindowModel {
}
public class myProcess : ObservableObject {
private int _pid;
private string _pidName;
private bool _isChecked;
private int _processSize;
public int pid
{
get { return _pid; }
set { _pid = value; }
}
public string pidName
{
get { return _pidName; }
set { _pidName = value; }
}
public bool isChecked
{
get { return _isChecked; }
set { _isChecked = value; }
}
public int processSize
{
get { return _processSize; }
set { _processSize = value; }
}
}
}
ViewModel层
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
using lltool_MVVM.Model;
using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.DependencyInjection;
using Microsoft.Toolkit.Mvvm.Input;
using Microsoft.Toolkit.Mvvm.Messaging;
using Microsoft.Toolkit.Mvvm.Messaging.Messages;
namespace lltool_MVVM.ViewModel {
public class myProcessViewModel : ObservableObject {
public myProcessViewModel() {
//将命令接口与真正的函数绑定
UpdatePidNameCommand = new RelayCommand(UpdatePidNameExecute);
}
private string _pidName;
//提供的SetProperty<T>(ref T, T, string)方法检查属性的当前值,如果不同则更新它,然后还会自动引发相关事件。
//属性名称是通过使用[CallerMemberName]属性自动捕获的,因此无需手动指定要更新的属性。
//暴露出pidName 便于外部进行绑定
public string pidName
{
get { return _pidName; }
set
{
SetProperty(ref _pidName , value);
}
}
void UpdatePidNameExecute() {
this.pidName = "new name";
MessageBox.Show(this.pidName);
}
//一个接口 用于外部的button绑定
public ICommand UpdatePidNameCommand { get; }
}
}
View层
<metro:MetroWindow
x:Class="lltool_MVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Aduskin="clr-namespace:AduSkin;assembly=AduSkin"
xmlns:ViewModel="using:lltool_MVVM.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:lltool_MVVM"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:metro="clr-namespace:AduSkin.Controls.Metro;assembly=AduSkin"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Grid>
<TextBlock Margin="20" Text="{Binding pidName}" />
<Button Width="100" Height="100" Command="{Binding UpdatePidNameCommand}" Content="点我" />
</Grid>
</metro:MetroWindow>
MainWindow.xaml.cs
using AduSkin.Controls.Metro;
using lltool_MVVM.ViewModel;
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 lltool_MVVM {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : MetroWindow {
public MainWindow() {
InitializeComponent();
//绑定数据上下文
DataContext = new myProcessViewModel
{
pidName = "2333"
};
}
}
}
结果
标签:MVVM,mvvm,ViewModel,System,学习,using,wpf,pidName,View 来源: https://www.cnblogs.com/FW-ltlly/p/16308932.html