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

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!!!!!!!!!!!!!!!!!!!!!!!備忘:實現綁定資料的方法有很多種，原理都大同小異。