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!!!!!!!!!!!!!!!!!!!!!!!
备注:实现绑定数据的方法有很多种,原理都大同小异。

posted on 2011-06-09 23:03  linzheng  阅读(3669)  评论(6编辑  收藏  举报

导航