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!!!!!!!!!!!!!!!!!!!!!!!
备注:实现绑定数据的方法有很多种,原理都大同小异。