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

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