MVVM学习笔记

1、MVVM的简介

MVVM模式是Model-View-ViewModel模式的简称,也就是由模型(Model)、视图(View)、视图模型(ViewModel),其目的是为了实现将业务和界面分开,降低耦合度。

2、示例(绑定TextBox和Combox控件)

总体结构:

View层代码:

        <Label Content="购买数:"
Style="{StaticResource LabStyle}"
Grid.Row=""
Grid.Column="" />
<TextBox Grid.Row=""
Grid.Column=""
Style="{StaticResource TextBoxStyle}"
Text="{Binding BuyTextBox,UpdateSourceTrigger=PropertyChanged}">
</TextBox> <ComboBox Grid.Row=""
Grid.Column=""
Style="{StaticResource ComboxStyle}">
<ComboBoxItem Content="西瓜" />
</ComboBox>
<ComboBox Grid.Row=""
Grid.Column=""
Style="{StaticResource ComboxStyle}"
ItemsSource="{Binding Prices}"
SelectedItem="{Binding SelectPrice, UpdateSourceTrigger=PropertyChanged}">
</ComboBox>

ViewModel层代码

   /// <summary>
/// 设置购买量属性
/// </summary>
public int BuyTextBox
{
get { return m_buyNum; }
set
{
m_buyNum = value;
//计算金额
m_money = m_selectPrice*m_buyNum;
if (m_buyNum > m_surplus)
{
MessageBox.Show("购买数量大于剩余数量,请重新输入购买数量!");
m_buyNum = ;
m_money = ;
}
OnPropertyChange<CalculateFruitVm>(vm => vm.BuyTextBox);
}
}
    /// <summary>
/// 设置价格属性
/// </summary>
public ObservableCollection<int> Prices
{
get { return m_prices; }
set
{
m_prices = value;
OnPropertyChange<CalculateFruitVm>(vm => vm.Prices);
}
}
 /// <summary>
/// 设置选择价格属性
/// </summary>
public int SelectPrice
{
get { return m_selectPrice; }
set
{
m_selectPrice = value;
m_money = m_selectPrice*m_buyNum;
OnPropertyChange<CalculateFruitVm>(vm => vm.SelectPrice);
}
}
  /// <summary>
/// 构造函数CalculateFruitVm
/// </summary>
public CalculateFruitVm()
{
m_prices.Add();
m_selectPrice = ;
m_prices.Add();
}

注意:这里是在构造函数CalculateFruitVm中设置价格并选择价格,因价格是combox控件,除了需要设置价格属性外,还需要设置价格选择属性。

Button按钮

View层代码

            <Button Content="返回"
Grid.Column=""
Style="{StaticResource ButtonStyle}"
HorizontalAlignment="Left"
Command="{Binding CancleCommand}"></Button>

ViewModel层代码

        /// <summary>
/// CancleCommand命令
/// </summary>
public ICommand CancleCommand
{
get { return m_cancelCommand; }
}
        /// <summary>
/// 构造函数CalculateFruitVm
/// </summary>
public CalculateFruitVm()
{
m_cancelCommand = ICommandFactory.CreateCommand(CancelCmdExecute, CanCancelCmdExecute);
}
        /// <summary>
/// 声明CancelEvent事件
/// </summary>
public event EventHandler<EventArgs> CancelEvent;
/// <summary>
/// CanCancelCmdExecute事件
/// </summary>
/// <param name="arg"></param>
/// <returns></returns>
private bool CanCancelCmdExecute(object arg)
{
return true;
}
        /// <summary>
/// CancelCmdExecute事件
/// </summary>
/// <param name="obj"></param>
private void CancelCmdExecute(object obj)
{
if (CancelEvent != null)
{
CancelEvent(this, EventArgs.Empty);
}
}

.xaml.cs代码

  public CalculateFruit()
{
InitializeComponent();
CalculateFruitVm calculateFruitVm = new CalculateFruitVm();
DataContext = calculateFruitVm;
calculateFruitVm.CancelEvent += calculateFruitVm_CancelEvent;
}
        /// <summary>
/// 点击返回按钮,返回主界面
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void calculateFruitVm_CancelEvent(object sender, EventArgs e)
{
MainWindow mainWindow = new MainWindow();
mainWindow.Show();
this.Hide();
}

Button按钮需要在View层用command绑定事件,ViewModel中创建命令、构造函数、声明事件,最后在.xaml.cs中加载ViewModel,并实现界面跳转、关闭等操作。

3、总结

MVVM 中更好的实现了面向对象中的继承和封装,所有的命令都继承自ICommand接口,将所有的命令用ViewModel层去实现。

当界面之间需要互相传值时,需要在VM中传递界面需要的值,实例化需要传到哪个界面的VM,示例如下:

隐藏事件

   private void HideCmdExecute(object obj)
{
if (m_buyNum > && m_selectPrice > )
{
if (HideEvent != null)
{
//计算剩余量
m_surplus -= m_buyNum;
//计算售卖总量
CalculateNum += m_buyNum;
//计算售卖总金额
CalculateMoney += m_money;
//new出ResultCalculateVm并赋值
ResultCalculateVm resultCalculateVm = new ResultCalculateVm();
resultCalculateVm.SalesNumberTextBox = CalculateNum;
resultCalculateVm.TotalMoney = CalculateMoney;
resultCalculateVm.TotalSurplus = m_surplus;
HideEvent(this, new FruitEventArgs {ResultCalculateVm = resultCalculateVm});
}
}
}

MVVM学习笔记的更多相关文章

  1. ListBox mvvm 学习笔记

    1. ListBox  MvvM 例子1. 简单的绑定,ItemsSource 绑定到一个实现了IEnumerable 的类上.一般该绑定都是双向的,所以优先考虑使用 ObservableCollec ...

  2. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  3. Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

    Caliburn.Micro学习笔记目录 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详 ...

  4. Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能

    Caliburn.Micro学习笔记目录 说一下IHandle<T>实现多语言功能 因为Caliburn.Micro是基于MvvM的UI与codebehind分离, binding可以是双 ...

  5. NGUI 学习笔记实战之二——商城数据绑定(Ndata)

    上次笔记实现了游戏商城的UI界面,没有实现动态数据绑定,所以是远远不够的.今天采用NData来做一个商城. 如果你之前没看过,可以参考上一篇博客   NGUI 学习笔记实战——制作商城UI界面  ht ...

  6. Xamarin 学习笔记 - Page(页面)

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages 转载 ...

  7. Knockout.js快速学习笔记

    原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...

  8. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  9. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

随机推荐

  1. Java笔记(五)……运算符

    算术运算符 算术运算符的注意问题: 如果对负数取模,可以把模数负号忽略不记,如:5%-2=1.但被模数是负数就另当别论. 对于除号"/",它的整数除和小数除是有区别的:整数之间做除 ...

  2. HW3.24

    public class Solution { public static void main(String[] args) { int number = (int)(Math.random() * ...

  3. Centos System Info

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  4. iOS 设置connect超时

    NSLock *theLock; [theLock lock]; int fd, error; struct sockaddr_in addr; ))<) { cout<<" ...

  5. POJ1838

    poj 1838 这道题主要是对并查集的考察,在这道题的解题过程中主要用到的算法就是并查集中的最基本的makeSet,findSet,unionSet 即前篇文章中所提到的: makeSet(Elem ...

  6. 源码生成deb包

    方法一 源码包要求是使用 automake 进行编译管理的. 安装路径不能指定为 /usr/local 下的目录,否则生成 deb 包期间报错. 制作的工具是 dh-make ,如果没有安装,要先安装 ...

  7. PC问题-使用BAT方法设置IP地址

    ::------以下为批处理文件内容---- @echo off ::set slection1= set/p slection1=请输入IP地址: netsh interface ip set ad ...

  8. Ubuntu16.04编译安装php

    #Ubuntu16.04编译安装php Ubuntu16.04上面搭建基于Nginx的php服务.Nginx使用apt直接安装的. sudo apt install nginx php的安装部署步骤主 ...

  9. CoreLocation框架的使用

    CoreLocation框架使用 一.地图和定位的简介 1.应用场景 周边:找餐馆/找KTV/找电影院(团购APP) 导航:根据用户设定的起点和终点,进行路线规划,并指引用户如何到达(地图APP) 2 ...

  10. 【S13】vector和string优先于动态分配的内存

    1.使用new动态分配内存,必须承担如下责任: a.使用delete释放内存: b.确保使用了正确的形式,delete与new的形式要匹配: c.不能重复delete. 2.使用vector和stri ...