AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

技术笔记：WindowsPhoneMango：MVVM十分钟入门

2024-06-27 25
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 技术笔记：WindowsPhoneMango：MVVM十分钟入门

在这篇文章中，我将谈一下在windows phone 7.1 Mango应用程序中使用MVVM设计模式。用较少的理论、更多的示例，在10分钟内来解释MVVM模式。


在开始之前，先简短介绍一下什么是MVVM：Model-View-ViewModel (MVVM)模式提供了一种灵活的方式，通过将应用程序分隔成三部分来创建windows phone应用程序。


a：View：放置XAML文件。


b：ViewModel：放置连接UI和数据的显示逻辑层。


c：放置数据模型和业务对象。


有关更多信息，看参阅官方MSDN文档。


为什么选择MVVM？有什么好处？


视图和显示逻辑层分离：从显示逻辑层分离出来View/XAML，可以使开发者只关注Code，而设计人员只关注XAML。


自动单元测试：视图/逻辑分离大大改进了表现逻辑层的自动单元测试。


代码重用：因为显示逻辑层在独立的组件或类中，和View（XAML）分离开来，你可以按照你喜欢的方式，通过继承和组合使它们结合起来。


设计时数据支持： 你可以在Blend中看到UI的样子，也就是说，设计人员可以使用样本数据来测试UI，甚至可以模拟实际场景数据。


多视图： 依据用户角色，同一ViewModel可以在不同的多视图中展现。


入门开始：


我们需要Windows Phone 7.1 Mango工程项目。在这个实例中，我们会使用上篇文章 为Windows Phone Mango MVVM 应用创建可复用 ICommand 实现类 所创建的DelegateCommand。请注意：commanding是伴随mango更新的新特性。（commanding意味着一些控件不支持Commands）。


MODEL


首先我们需要定义Model。在示例中，我们创建Person类，有两个属性：Name和Age。在这里，最重要的就是要实现INotifyPropertyChanged接口，因为，当Person对象发现变化时，需要通知给UI。（本例中，当按下Save Changes时，更新ListBox，更多信息参阅下面部分中的View）


using System;


using System.Net;


using System.Windows;


using System.Windows.Controls;


using System.Windows.Documents;


using System.Windows.Ink;


using System.Windows.Input;


using System.Windows.Media;


using System.Windows.Media.Animation;


using System.Windows.Shapes;


using System.ComponentModel;


namespace WPMangoMVVMSample


{


public class Person : INotifyPropertyChanged


{


private string name;


private int age;


public string Name


{


get


{


return name;


}


set


{


if (this.name != value)


{


this.name = value;


this.RaisePropertyChanged("Name");


}


}


}


public int Age


{


get


{


return this.age;


}


set


{


if (this.age != value)


{


this.age = value;


this.RaisePropertyChanged("Age");


}


}


}


public event PropertyChangedEventHandler PropertyChanged;


private void RaisePropertyChanged(string propertyName)


{


PropertyChangedEventHandler handler = this.PropertyChanged;


if (handler != null)


{


handler(this, new PropertyChangedEventArgs(propertyName));


}


}


}


}


.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }


.csharpcode pre { margin: 0 }


.csharpcode .rem { color: rgba(0, 128, 0, 1) }


.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }


.csharpcode .str { color: rgba(0, 96, 128, 1) }


.csharpcode .op { color: rgba(0, 0, 192, 1) }


.csharpcode .preproc { color: rgba(204, 102, 51, 1) }


.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }


.csharpcode .html { color: rgba(128, 0, 0, 1) }


.csharpcode .attr { color: rgba(255, 0, 0, 1) }


.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }


.csharpcode .lnum { color: rgba(96, 96, 96, 1) }


VIEW MODEL


下一步就是创建PersonViewModel，主要包含以下部分：


SaveChangesCommand - 保存用户选择Person对象所引发的修改。


LoadDataCommand - 此命令是用来填充ObservableCollection（Person对象）。


SelectedName - 此属性表示选中的Person对象的名称。


SelectedAge - 此属性表示选中的Person对象的年龄。


SelectedPerson - 此属性表示所选中的Person对象。


PersonViewModel也实现了INotifyPropertyChanged，所有当某些属性更新时，UI会接到通知。 代码如下：


using System;


using System.Net;


using System.Windows;


using System.Windows.Controls;


using System.Windows.Documents;


using System.Windows.Ink;


using System.Windows.Input;


using System.Windows.Media;


using System.Windows.Media.Animation;


using System.Windows.Shapes;


using System.ComponentModel;


using System.Collections.ObjectModel;


namespace WPMangoMVVMSample


{


public class PersonViewModel : INotifyPropertyChanged


{


private string name;


private int age;


private ObservableCollection


personDataSource;


private ICommand loadDataCommand;


private ICommand saveChangesCommand;


public PersonViewModel()


{


this.loadDataCommand = new DelegateCommand(this.LoadDataAction);


this.saveChangesCommand = new DelegateCommand(this.SaveChangesAction);


}


private void LoadDataAction(object p)


{


this.DataSource.Add(new Person() { Name = "John", Age = 32 });


this.DataSource.Add(new Person() { Name = "Kate", Age = 27 });


this.DataSource.Add(new Person() { Name = "Sam", Age = 30 });


}


private void SaveChangesAction(object p)


{


if (this.SelectedPerson != null)


{


this.SelectedPerson.Name = this.name;


this.SelectedPerson.Age = this.age;


}


}


public ICommand LoadDataCommand


{


get


{


return this.loadDataCommand;


}


}


public ICommand SaveChangesCommand


{


get


{


return this.saveChangesCommand;


}


}


public ObservableCollection


DataSource


{


get


{


if (this.personDataSource == null)


{


this.personDataSource = new ObservableCollection


();


}


return this.personDataSource;


}


}


public string SelectedName


{


get


//代码效果参考：http://www.lyjsj.net.cn/wx/art_23076.html

{

if (this.SelectedPerson != null)


{


return this.SelectedPerson.Name;


}


return string.Empty;


}


set


{


this.name = value;


}


}


public int SelectedAge


{


get


{


if (this.SelectedPerson != null)


{


return this.SelectedPerson.Age;


}


return 0;


}


set


{


this.age = value;


}


}


private Person selectedPerson;


public Person SelectedPerson


{


get


{


return this.selectedPerson;


}


set


{


if (this.selectedPerson != //代码效果参考：http://www.lyjsj.net.cn/wx/art_23074.html

value)

{


this.selectedPerson = value;


if (this.selectedPerson != null)


{


this.name = this.selectedPerson.Name;


this.age = this.selectedPerson.Age;


}


this.RaisePropertyChanged("SelectedName");


this.RaisePropertyChanged("SelectedAge");


}


}


}


public event PropertyChangedEventHandler PropertyChanged;


private void RaisePropertyChanged(string propertyName)


{


PropertyChangedEventHandler handler = this.PropertyChanged;


if (handler != null)


{


handler(this, new PropertyChangedEventArgs(propertyName));


}


}


}


}


.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }


//代码效果参考： http://www.lyjsj.net.cn/wz/art_23072.html

.csharpcode pre { margin: 0 }


.csharpcode .rem { color: rgba(0, 128, 0, 1) }


.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }


.csharpcode .str { color: rgba(0, 96, 128, 1) }


.csharpcode .op { color: rgba(0, 0, 192, 1) }


.csharpcode .preproc { color: rgba(204, 102, 51, 1) }


.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }


.csharpcode .html { color: rgba(128, 0, 0, 1) }


.csharpcode .attr { color: rgba(255, 0, 0, 1) }


.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }


.csharpcode .lnum { color: rgba(96, 96, 96, 1) }


VIEW


最后一步就是创建View。 我们仍然使用 MainPage.xaml。我们将创建：


"LoadData" 按钮： 调用LoadDataCommand填充数据源。


ListBox 绑定PersonViewModel，两个TextBox用来编辑选择的Person对象： 姓名和年龄。


"Save Changes" 调用SaveChangesCommand保存修改信息。


注意: TextBox的Binding 数据流向：Mode=TwoWay ，可以编辑和更新值。


[/span>StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"

[/span>Button Content="LoadData" Command="{Binding LoadDataCommand}" />


[/span>ListBox ItemsSource="{Binding DataSource}" SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" Height＜/span>="100"

[/span>ListBox.ItemTemplate

[/span>DataTemplate

[/span>StackPanel Orientation="Horizontal"

[/span>TextBlock Text="Name:"/>


[/span>TextBlock Text="{Binding Name}" />


[/span>TextBlock Text="Age:" Margin="10,0,0,0"/>


[/span>TextBlock Text="{Binding Age}" />






[/span>TextBlock Text="Name:"/>


[/span>TextBox Text="{Binding SelectedName, Mode=TwoWay}" />


[/span>TextBlock Text="Age:"/>


[/span>TextBox Text="{Binding SelectedAge, Mode=TwoWay}" />


[/span>Button Content="Save Changes" Command="{Binding SaveChangesCommand}" />



.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }


.csharpcode pre { margin: 0 }


.csharpcode .rem { color: rgba(0, 128, 0, 1) }


.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }


.csharpcode .str { color: rgba(0, 96, 128, 1) }


.csharpcode .op { color: rgba(0, 0, 192, 1) }


.csharpcode .preproc { color: rgba(204, 102, 51, 1) }


.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }


.csharpcode .html { color: rgba(128, 0, 0, 1) }


.csharpcode .attr { color: rgba(255, 0, 0, 1) }


.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }


.csharpcode .lnum { color: rgba(96, 96, 96, 1) }


绑定view至view model简单方法就是设置DataContext：


public MainPage()


{


InitializeComponent();


// simple way to bind the view to the view model


this.DataContext = new PersonViewModel();


}


.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }


.csharpcode pre { margin: 0 }


.csharpcode .rem { color: rgba(0, 128, 0, 1) }


.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }


.csharpcode .str { color: rgba(0, 96, 128, 1) }


.csharpcode .op { color: rgba(0, 0, 192, 1) }


.csharpcode .preproc { color: rgba(204, 102, 51, 1) }


.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }


.csharpcode .html { color: rgba(128, 0, 0, 1) }


.csharpcode .attr { color: rgba(255, 0, 0, 1) }


.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }


.csharpcode .lnum { color: rgba(96, 96, 96, 1) }


效果图：


源代码下载


译自：windowsphonegeek


由于本人翻译水平有限，有些地方欠妥，请园友们不吝指教！

文章标签：
前端开发
.NET
Windows
开发框架
测试技术
游客zn7mvnkypuy76
目录
相关文章
不良使
|
移动开发 程序员 编译器
三分钟创建一个新应用，ivx的神奇之处【PPT式程序开发】
IVX是一门人人都能快速掌握的可视化编程语言
不良使
105 0
瑞崽崽崽
|
6月前
|
前端开发 JavaScript 开发工具
前端知识笔记（三十）———前端需要掌握的技术有哪些方面
前端知识笔记（三十）———前端需要掌握的技术有哪些方面
瑞崽崽崽
94 1
天玑y
|
6月前
|
编解码 数据可视化 小程序
微信小游戏开发（第一篇
微信小游戏开发（第一篇
天玑y
300 0
啊理八八
|
设计模式 前端开发 JavaScript
前端Web开发学习，入门到进阶，推荐几本很不错的书籍
前端Web开发学习，入门到进阶，推荐几本很不错的书籍
啊理八八
161 0
前端歌谣
|
前端开发
前端学习笔记202307学习笔记第六十天-Reconciler架构7
前端学习笔记202307学习笔记第六十天-Reconciler架构7
前端歌谣
64 0
前端歌谣
|
前端开发
前端学习笔记202307学习笔记第六十天-搭建项目架构5
前端学习笔记202307学习笔记第六十天-搭建项目架构5
前端歌谣
68 0
前端歌谣
|
前端开发
前端学习笔记202307学习笔记第六十天-搭建项目架构2
前端学习笔记202307学习笔记第六十天-搭建项目架构2
前端歌谣
65 0
前端歌谣
|
前端开发
前端学习笔记202307学习笔记第六十天-搭建项目架构1
前端学习笔记202307学习笔记第六十天-搭建项目架构1
前端歌谣
47 0
前端歌谣
|
前端开发
前端学习笔记202307学习笔记第六十天-搭建项目架构4
前端学习笔记202307学习笔记第六十天-搭建项目架构4
前端歌谣
62 0
前端歌谣
|
前端开发
前端学习笔记202307学习笔记第六十天-搭建项目架构3
前端学习笔记202307学习笔记第六十天-搭建项目架构3
前端歌谣
59 0

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    46
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    40
  • 3
    Kotlin - 区间与数组
    40
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    22
  • 7
    Kotlin - 分支与循环
    18
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关课程

    更多
  • 物联网开发 - Linux驱动开发实操演练
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • 「大师课」深度剖析 RocketMQ5.0
  • 深入浅出白话Serverless-1024程序员节创造营公益课
  • 高级应用技能进阶
  • 机器阅读技术与应用

    • 相关电子书

    更多
  • 冬季实战营第二期：Linux操作系统实战入门
  • 【云栖精选7月刊】抛开晦涩的算法、模型，让我们来谈谈互联网架构
  • 深入理解分布式事务：原理与实战（试读版）

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 重温童年的“五子棋”，赢取专属阿里云Serverless证书
  • 零基础入门Serverless：一键部署红白机小游戏
  • 基于函数计算快速搭建Zblog等传统应用框架
  • 1分钟部署经典小游戏
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    阿里云OSS设置跨域访问