MVVM模式的View与ViewModel的三大通讯方式:Binding Data(实现数据的传递)、Command(实现操作的调用)和Attached Behavior(实现控件加载过程中的操作)。
下面通过一个实例实现MVVM模式的Binding Data通讯
1、创建Model层
Food.cs
namespace BindingDataDemo.Model
|
public string Description
|
2.创建ViewModel层
FoodViewModel.cs
using System.ComponentModel;
|
using BindingDataDemo.Model;
|
using System.Collections.ObjectModel;
|
namespace BindingDataDemo.ViewModel
|
public class FoodViewModel : INotifyPropertyChanged
|
private ObservableCollection<Food> _allFood;
|
public ObservableCollection<Food> AllFood
|
_allFood = new ObservableCollection<Food>();
|
NotifyPropertyChanged( "AllFood" );
|
Food item0 = new Food() { Name = "西红柿" , IconUri = "Images/Tomato.png" , Type = "Healthy" ,Description= "西红柿的味道不错。" };
|
Food item1 = new Food() { Name = "茄子" , IconUri = "Images/Beer.png" , Type = "NotDetermined" , Description = "不知道这个是否好吃。" };
|
Food item2 = new Food() { Name = "火腿" , IconUri = "Images/fries.png" , Type = "Unhealthy" , Description = "这是不健康的食品。" };
|
Food item3 = new Food() { Name = "三明治" , IconUri = "Images/Hamburger.png" , Type = "Unhealthy" ,Description= "肯德基的好吃?" };
|
Food item4 = new Food() { Name = "冰激凌" , IconUri = "Images/icecream.png" , Type = "Healthy" , Description = "给小朋友吃的。" };
|
Food item5 = new Food() { Name = "Pizza" , IconUri = "Images/Pizza.png" , Type = "Unhealthy" ,Description= "这个非常不错。" };
|
Food item6 = new Food() { Name = "辣椒" , IconUri = "Images/Pepper.png" , Type = "Healthy" , Description = "我不喜欢吃这东西。" };
|
System.Windows.MessageBox.Show( "Exception: " + e.Message );
|
public event PropertyChangedEventHandler PropertyChanged;
|
public void NotifyPropertyChanged( string propertyName)
|
if (PropertyChanged != null )
|
PropertyChanged( this , new PropertyChangedEventArgs(propertyName));
|
3、创建View层
MainPage.xaml
< phone:PhoneApplicationPage |
x:Class = "BindingDataDemo.MainPage"
|
xmlns:phone = "clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
|
xmlns:shell = "clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
|
xmlns:my = "clr-namespace:BindingDataDemo.ViewModel" |
mc:Ignorable = "d" d:DesignWidth = "480" d:DesignHeight = "768"
|
FontFamily = "{StaticResource PhoneFontFamilyNormal}"
|
FontSize = "{StaticResource PhoneFontSizeNormal}"
|
Foreground = "{StaticResource PhoneForegroundBrush}"
|
SupportedOrientations = "Portrait" Orientation = "Portrait"
|
shell:SystemTray.IsVisible = "True" >
|
< phone:PhoneApplicationPage.Resources >
|
< my:FoodViewModel x:Key = "food" />
|
</ phone:PhoneApplicationPage.Resources >
|
< Grid x:Name = "LayoutRoot" Background = "Transparent" >
|
< RowDefinition Height = "Auto" />
|
< RowDefinition Height = "*" />
|
< StackPanel x:Name = "TitlePanel" Grid.Row = "0" Margin = "12,17,0,28" >
|
< TextBlock x:Name = "ApplicationTitle" Text = "MY APPLICATION" Style = "{StaticResource PhoneTextNormalStyle}" />
|
< TextBlock x:Name = "PageTitle" Text = "数据绑定" Margin = "9,-7,0,0" Style = "{StaticResource PhoneTextTitle1Style}" />
|
< Grid x:Name = "ContentPanel" Grid.Row = "1" Margin = "12,0,12,0" DataContext = "{StaticResource food }" >
|
< ListBox x:Name = "listBox" HorizontalContentAlignment = "Stretch" ItemsSource = "{Binding AllFood}" >
|
< StackPanel Orientation = "Horizontal" Background = "Gray" Width = "450" Margin = "10" >
|
< Image Source = "{Binding IconUri}" Stretch = "None" />
|
< TextBlock Text = "{Binding Name}" FontSize = "40" Width = "150" />
|
< TextBlock Text = "{Binding Description}" FontSize = "20" Width = "280" />
|
</ phone:PhoneApplicationPage >
|
OK!!!!!!!!!!!!!!!!!!!!!!!
备注:实现绑定数据的方法有很多种,原理都大同小异。
分享到:
相关推荐
Wpf Mvvm模式下窗口ShowDialog的实现
MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式
MVVM模式实现图片分页显示 (1)数据使用WCF服务加载 (2)定制ListBox数据模板 (3)采用MVVM模式实现分页 注意:在运行前需要修改WCF服务Service1.svc方法GetAllPictureData中的图片文件夹路径,默认是C:\Users\My...
C# MVVM Binding demo
开发实例篇以应用实例的方式综合地讲解了Windows Phone 7各种编程技术的运用,以实例的训练来加强对Windows Phone 7的技术知识的理解。 本书覆盖面广,实例丰富,注重理论与实践的结合,并提供了书中所有范例的源...
这个Demo是WPF的MVVM模式的一个登录窗口的完整实例,包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
WPF-MVVM WPF MVVM模式开发的例子程序
MVVM+ViewBinding+Kotlin入门篇,适用于未使用过MVVM,ViewBinding,Kotlin的开发者做为入门练习,了解大致思想
C#_WPF_MVVM模式完整实例(比较不错) 介绍的很好
实现mvvm模式 Silverlight
用MVVM架构实现的计算器小程序实例, 包括MVVM架构的命令对象和消息通知对象,小计算器加减乘除的实现逻辑.页面布局等简单知识.供WPF和MVVM初学者参考. 参考代码: /// /// 加法命令 /// public BaseCommand Add...
wpf闹钟 设计模式 Mvvm模式 Mvvmlight
非常适合初学者的文档。一旦开发者习惯于WPF和MVVM,将很难区分两者的区别, MVVM是WPF开发者的通用语,因为他很适合于WPF平台。经理翻译英文版给我看的。
Binding Data:实现数据的传递 Command:实现操作的调用 AttachBehavior:实现控件加载过程中的操作 View没有大量代码逻辑。结合WPF、Silverlight绑定机制,MVP演变出了MVVM,充分利用了WPF、Silverlight的优势,将...
简单手写android开发音乐中MVP模式和MVVM模式的区别,play目录下是mvp模式,myplayer目录下时mvvmm模式-主要是 实现DataListenerContainer容器,musicList 目录主要是解决UI线程和工作线程的切换导致的问题
WPF设计的一个简单的计算器 使用MVVM模式 调用委托 对于WPF入门有很大的帮助 C#
使用TypeScript创建MVVM框架模型,以此来开发大型的windows应用商店程序或者其它web程序。 Use TypeScript to accomplish MVVM pattern to develop windows store app or other web application.
MVVM模式主要是为了实现视图和逻辑的分离,通常在实现的例子之中,在ViewModel一层会使用RealCommand,下面是我在网上根据实践,得到的完整实例
MVVM模式 小例子,用来帮助理解WPF的MVVM模式
最近项目中要使用到MVC模式进行开发,写了一个小例子,希望对部分朋友有一定的帮助。 另附有一份MVVM模式源码。