Windows Phone 7 MVVM模式通讯方式之实现Binding Data

MVVM模式的View与ViewModel的三大通讯方式：Binding Data（实现数据的传递）、Command（实现操作的调用）和Attached Behavior（实现控件加载过程中的操作）。

下面通过一个实例实现MVVM模式的Binding Data通讯

Windows Phone 7 MVVM模式通讯方式之实现Binding Data

1、创建Model层

Food.cs

namespace BindingDataDemo.Model 

{ 

public class Food 

{ 

public string Name 

{ 

get; 

set; 

} 

public string Description 

{ 

get; 

set; 

} 

public string IconUri 

{ 

get; 

set; 

} 

public string Type 

{ 

get; 

set; 

} 

} 

}

2.创建ViewModel层

FoodViewModel.cs

using System; 

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 

{ 

get

{ 

if (_allFood == null) 

_allFood = new ObservableCollection<Food>(); 

return _allFood; 

} 

set

{ 

if (_allFood != value) 

{ 

_allFood = value; 

NotifyPropertyChanged("AllFood"); 

} 

} 

} 

public FoodViewModel() 

{ 

try 

{ 

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 = "我不喜欢吃这东西。" }; 

AllFood.Add(item0); 

AllFood.Add(item1); 

AllFood.Add(item2); 

AllFood.Add(item3); 

AllFood.Add(item4); 

AllFood.Add(item5); 

AllFood.Add(item6); 

} 

catch ( Exception e ) 

{ 

System.Windows.MessageBox.Show( "Exception: " + e.Message ); 

} 

} 

// 定义PropertyChanged 事件 

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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"> 

<!--添加ViewModel层的FoodViewModel类为资源-->

<phone:PhoneApplicationPage.Resources> 

<my:FoodViewModel x:Key="food" /> 

</phone:PhoneApplicationPage.Resources> 

<Grid x:Name="LayoutRoot" Background="Transparent"> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto"/> 

<RowDefinition Height="*"/> 

</Grid.RowDefinitions> 

<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}"/> 

</StackPanel> 

<!--在Grid控件中将上面定义好的FoodViewModel类资源赋值给DataContent属性，表示Grid控件内使用FoodViewModel类作为上下文数据-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" DataContext="{StaticResource food }"> 

<!--在ListBox控件中绑定FoodViewModel类的AllFood属性，AllFood是ObservableCollection<Food>类型-->

<ListBox x:Name="listBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding AllFood}"> 

<ListBox.ItemTemplate> 

<DataTemplate> 

<StackPanel Orientation="Horizontal" Background="Gray" Width="450" Margin="10"> 

<!--绑定Food类的IconUri属性-->

<Image Source="{Binding IconUri}" Stretch="None"/> 

<!--绑定Food类的Name属性-->

<TextBlock Text="{Binding Name}" FontSize="40" Width="150"/> 

<!--绑定Food类的Description属性-->

<TextBlock Text="{Binding Description}" FontSize="20" Width="280"/> 

</StackPanel> 

</DataTemplate> 

</ListBox.ItemTemplate> 

</ListBox> 

</Grid> 

</Grid> 

</phone:PhoneApplicationPage>

OK!!!!!!!!!!!!!!!!!!!!!!!

Windows Phone 7 MVVM模式通讯方式之实现Binding Data

相关推荐