【MVVM】目的是为了分离视图(View)和模型(Model)的耦合——解耦

1、View负责前端展示,与ViewModel进行数据和命令的交互。(双向的数据属性传递,单向的命令属性传递View→ViewModel
2、ViewModel,负责前端视图业务级别的逻辑结构组织,并将其反馈给前端。
3、Model,主要负责数据实体的结构处理,与ViewModel进行交互。
其实我个人认为,数据和业务交互这一层还是应该另外独立,Model中完全就是实体模型,这样更清晰。

【安装Prism模板框架】建议用手机热点下载。也可以在VS的NuGet中搜索,但是每建一个项目就需要搜索引用一次,麻烦。

VS2017及以上版本中,拓展—管理拓展(或工具—拓展和更新),联机,搜索Prism Template Pack,安装即可。(推荐此安装方式)

也可以网上下载https://marketplace.visualstudio.com/items?itemName=BrianLagunas.PrismTemplatePack

新建项目界面出现下图,安装成功。

【实战】像学高中物理受力分析一样,先分析界面有多少数据属性、命令属性

 

新建Prsm Blank App(WPF) 项目:Demo MVVM

Views中MainWindow.xaml代码:

<Window x:Class="DemoMVVM.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="200" Width="300">
<StackPanel>
<TextBox Text="{Binding Input1}" Margin="5,20,5,5" Width="100"/>
<TextBox Text="{Binding Input2}" Margin="5" Width="100"/>
<Button Command="{Binding AddCommand}" Content="求和" Width="75" Margin="5"/>
<TextBox Text="{Binding Result}" Margin="5" Width="100"/>
</StackPanel>
</Window>

ViewModels中MainWindowViewModel.cs代码:其他文件代码不动

using Prism.Mvvm;
using Prism.Commands; //引入命令
using System; //ViewModel为View提供数据属性、命令属性
namespace DemoMVVM.ViewModels
{
public class MainWindowViewModel : BindableBase
{
#region 私有变量,以及对应的属性(习惯大写)
private string _title = "Prism Application";
private double _input1; //默认0
private double _input2;
private double _result;
public double Result //数据属性
{
get { return _result; }
set { _result = value; RaisePropertyChanged("Result"); } //变化结果展示在View界面上
}
public double Input2 //数据属性
{
get { return _input2; }
set { _input2 = value; }
}
public double Input1 //数据属性
{
get { return _input1; }
set { _input1 = value; }
}
public string Title //数据属性
{
get { return _title; }
set { _title = value; }
}
#endregion
#region 命令属性
public DelegateCommand AddCommand { get; set; }
#endregion
public void Add() //方法
{
this.Result = this.Input1 + this.Input2;
} public MainWindowViewModel() //将方法Add与命令属性AddCommand联系起来
{
this.AddCommand = new DelegateCommand(new Action(Add));
}
}
}

注意:View与ModelView传递的是属性、属性、属性(习惯大写)

【实战2】

 

新建Prsm Blank App(WPF) 项目:BlankApp5

Views中MainWindow.xaml代码:

<Window x:Class="BlankApp5.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="200" Width="300"> <Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="学号" Margin="20,0" VerticalAlignment="Center"/>
<TextBox Text="{Binding Id}" IsReadOnly="True" Width="200" Padding="2" />
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="姓名" Margin="20,0" VerticalAlignment="Center"/>
<TextBox Text="{Binding Name}" IsReadOnly="True" Width="200" Padding="2"/>
</StackPanel>
<Button Command="{Binding ShowCommand}" Content="显示" Grid.Row="2" VerticalAlignment="Center" Width="50"/>
</Grid>
</Window>

ViewModels中MainWindowViewModel.cs代码:其他文件代码不动

using Prism.Mvvm;
using Prism.Commands;
using System; namespace BlankApp5.ViewModels
{
public class MainWindowViewModel : BindableBase
{
#region 私有变量,以及对应的属性(习惯大写)
private string _title = "Prism Application";
private string _name;
private string _id;
public string Id
{
get { return _id; }
set { _id = value; RaisePropertyChanged("Id"); }
}
public string Name
{
get { return _name; }
set { _name = value; RaisePropertyChanged("Name"); }
}
public string Title
{
get { return _title; }
set { _title=value; }
}
#endregion
#region 命令属性
public DelegateCommand ShowCommand { get; set; }
#endregion
public void Show() //方法
{
this.Name = "夕西行";
this.Id = "";
}
public MainWindowViewModel() //命令属性与方法联系起来
{
this.ShowCommand = new DelegateCommand(new Action(Show));
}
}
}

MainWindow.xaml.cs代码:贴出来只是有疑问,大神可解答下

using System.Windows;
using BlankApp5.ViewModels; namespace BlankApp5.Views
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
//this.DataContext = new MainWindowViewModel(); //这句有无貌似没什么影响,懂得大神可以留言讲下
}
}
}

MVVM(使用Prism框架)开发WPF的更多相关文章

  1. 【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入

    前言:在C/S架构上,WPF无疑已经是"桌面一霸"了.在.NET生态环境中,很多小伙伴还在使用Winform开发C/S架构的桌面应用.但是WPF也有很多年的历史了,并且基于MVVM ...

  2. WPF Prism框架下基于MVVM模式的命令、绑定、事件

    Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...

  3. WPF Step By Step 系列-Prism框架在项目中使用

    WPF Step By Step 系列-Prism框架在项目中使用 回顾 上一篇,我们介绍了关于控件模板的用法,本节我们将继续说明WPF更加实用的内容,在大型的项目中如何使用Prism框架,并给予Pr ...

  4. MVVM框架从WPF移植到UWP遇到的问题和解决方法

    MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...

  5. 准备.Net转前端开发-WPF界面框架那些事,值得珍藏的8个问题

    题外话 不出意外,本片内容应该是最后一篇关于.Net技术的博客,做.Net的伙伴们忽喷忽喷..Net挺好的,微软最近在跨平台方面搞的水深火热,更新也比较频繁,而且博客园的很多大牛也写的有跨平台相关技术 ...

  6. 从PRISM开始学WPF(七)MVVM(三)事件聚合器EventAggregator-更新至Prism7.1

    原文:从PRISM开始学WPF(七)MVVM(三)事件聚合器EventAggregator-更新至Prism7.1 事件聚合器EventAggregator [7.1updated]除了app部分,没 ...

  7. 从PRISM开始学WPF(七)MVVM(三)事件聚合器EventAggregator?

    原文:从PRISM开始学WPF(七)MVVM(三)事件聚合器EventAggregator? 从PRISM开始学WPF(一)WPF? 从PRISM开始学WPF(二)Prism? 从PRISM开始学WP ...

  8. MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger

    Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...

  9. 开发模式 MVC、MVP、MVVM和MVX框架模式

    MVX框架模式的了解 MVX框架模式:MVC+MVP+MVVM 1.MVC: Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开.View通过 ...

随机推荐

  1. Android Application的基本组件介绍

    一个Android应用通常由一个或多个基本组件组成,常用的一般有Activity.Service.BroadcastReceiver.ContentProvider.Intent等等. ⒈Activi ...

  2. n*n矩阵 每行每列XOR为0(思维)

    题意:https://codeforc.es/contest/1208/problem/C 如题:就是给定一个数n,要你求一个n×n的矩阵,矩阵中的元素是 0 ~ n2-1 ,使得矩阵每一行和每一列的 ...

  3. Centos yum 安装 rabbitmq-server

    安装rabbitmq-server yum install -y rabbitmq-server   开启后台管理 rabbitmq-plugins enable rabbitmq_managemen ...

  4. Eclipse怎么改变工程保存路径

    1:首先我们要把servers中的Tomcat v8.0 Server at localhost [Stopped]的删除 2:我们再进行加入Tomcat v8.0,,,,直接点击蓝色就弹出下面的页面 ...

  5. websocket vue

    /* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...

  6. linux mint 安装xshell

    之前在Windows上进行开发的时候,SSH重度依赖SecureCRT或者XShell工具,现在把办公环境迁移到Linux后,每次连接都需要输入密码,尤其是需要跳板机的时候,需要逐级输入,十分麻烦.所 ...

  7. java实现spark常用算子之SortByKey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  8. vue入门:(class与style绑定)

    对象语法 数组语法 一.对象语法 1.1对象语法绑定HTML Class 语法:v-bind:class="{'className1':boolean1,'className2':boole ...

  9. 常见DML语句汇总

    DML操作是指对数据中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select),是开发人员日常使用最频繁的操作,下面依次对它们进行介绍. ( ...

  10. Django单元测试 相关知识

    前言 本文,旨在说明python Django如何编写单元测试,从“背景”,“测试要求”,“代码编写”,“如何运行”,“检验测试覆盖度” 这几个方面来说明附上django的官方文档单元测试章节=> ...