Windows Phone 7 MVVM模式通訊方式之實現Binding Data

l_serein發表於2013-04-11
WindowsMVVM模式

MVVM模式的View與ViewModel的三大通訊方式：Binding Data（實現資料的傳遞）、Command（實現操作的呼叫）和Attached Behavior（實現控制元件載入過程中的操作）。

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>


相關文章