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

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

(1)Windows Phone 7 MVVM模式通讯方式之实现Binding Data。

(2)Windows Phone 7 MVVM模式通讯方式之实现Command。

(3)Windows Phone 7 MVVM模式通讯方式之实现Attached Behavior。

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

1、创建Model层

Food.cs

view source print ?

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

view source print ?

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

view source print ?

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

备注:实现绑定数据的方法有很多种，原理都大同小异。