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 sourceprint?

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 sourceprint?

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 sourceprint?

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

備註:實現綁定數據的方法有很多種，原理都大同小異。