Windows Phone 7 MVVM模式通讯方式之实现Binding Data

Just have a little faith.

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

 

1.  
2. namespace BindingDataDemo.Model  
3.  
4. {  
5.  
6.     public class Food  
7.  
8.     {  
9.  
10.         public string Name  
11.  
12.         {  
13.  
14.             get;  
15.  
16.             set;  
17.  
18.         }  
19.  
20.    
21.  
22.         public string Description  
23.  
24.         {  
25.  
26.             get;  
27.  
28.             set;  
29.  
30.         }  
31.  
32.    
33.  
34.         public string IconUri  
35.  
36.         {  
37.  
38.             get;  
39.  
40.             set;  
41.  
42.         }  
43.  
44.    
45.  
46.         public string Type  
47.  
48.         {  
49.  
50.             get;  
51.  
52.             set;  
53.  
54.         }  
55.  
56.    
57.  
58.     }  
59.  
60. } 

2.创建ViewModel层

FoodViewModel.cs

 

1.  
2. using System;  
3.  
4. using System.ComponentModel;  
5.  
6. using BindingDataDemo.Model;  
7.  
8. using System.Collections.ObjectModel;  
9.  
10.    
11.  
12. namespace BindingDataDemo.ViewModel  
13.  
14. {  
15.  
16.     public class FoodViewModel : INotifyPropertyChanged  
17.  
18.     {  
19.  
20.         private  ObservableCollection<Food> _allFood;  
21.  
22.    
23.  
24.         public ObservableCollection<Food> AllFood  
25.  
26.         {  
27.  
28.             get  
29.  
30.             {  
31.  
32.                 if (_allFood == null)  
33.  
34.                     _allFood = new ObservableCollection<Food>();  
35.  
36.    
37.  
38.                 return _allFood;  
39.  
40.             }  
41.  
42.             set  
43.  
44.             {  
45.  
46.                 if (_allFood != value)  
47.  
48.                 {  
49.  
50.                     _allFood = value;  
51.  
52.                     NotifyPropertyChanged("AllFood");  
53.  
54.                 }  
55.  
56.             }  
57.  
58.         }  
59.  
60.    
61.  
62.         public FoodViewModel()  
63.  
64.         {  
65.  
66.              try    
67.  
68.             {  
69.  
70.                 Food item0 = new Food() { Name = "西红柿", IconUri = "Images/Tomato.png", Type = "Healthy" ,Description="西红柿的味道不错。" };  
71.  
72.                 Food item1 = new Food() { Name = "茄子", IconUri = "Images/Beer.png", Type = "NotDetermined", Description = "不知道这个是否好吃。" };  
73.  
74.                 Food item2 = new Food() { Name = "火腿", IconUri = "Images/fries.png", Type = "Unhealthy", Description = "这是不健康的食品。" };  
75.  
76.                 Food item3 = new Food() { Name = "三明治", IconUri = "Images/Hamburger.png", Type = "Unhealthy" ,Description="肯德基的好吃？" };  
77.  
78.                 Food item4 = new Food() { Name = "冰激凌", IconUri = "Images/icecream.png", Type = "Healthy", Description = "给小朋友吃的。" };  
79.  
80.                 Food item5 = new Food() { Name = "Pizza", IconUri = "Images/Pizza.png", Type = "Unhealthy" ,Description="这个非常不错。" };  
81.  
82.                 Food item6 = new Food() { Name = "辣椒", IconUri = "Images/Pepper.png", Type = "Healthy", Description = "我不喜欢吃这东西。" };  
83.  
84.                 AllFood.Add(item0);  
85.  
86.                 AllFood.Add(item1);  
87.  
88.                 AllFood.Add(item2);  
89.  
90.                 AllFood.Add(item3);  
91.  
92.                 AllFood.Add(item4);  
93.  
94.                 AllFood.Add(item5);  
95.  
96.                 AllFood.Add(item6);  
97.  
98.             }        
99.  
100.             catch ( Exception e )    
101.  
102.             {           
103.  
104.                 System.Windows.MessageBox.Show( "Exception: " + e.Message );         
105.  
106.             }     
107.  
108.         }  
109.  
110.            
111.  
112.         // 定义PropertyChanged 事件  
113.  
114.         public event PropertyChangedEventHandler PropertyChanged;  
115.  
116.    
117.  
118.         public void NotifyPropertyChanged(string propertyName)  
119.  
120.         {  
121.  
122.             if (PropertyChanged != null)  
123.  
124.             {  
125.  
126.                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));  
127.  
128.             }  
129.  
130.         }    
131.  
132.     
133.  
134.    
135.  
136.     }  
137.  
138. } 

3、创建View层

MainPage.xaml

 

1.  
2. <phone:PhoneApplicationPage 
3.  
4.     x:Class="BindingDataDemo.MainPage" 
5.  
6.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
7.  
8.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
9.  
10.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
11.  
12.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
13.  
14.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
15.  
16.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
17.  
18.     xmlns:my="clr-namespace:BindingDataDemo.ViewModel" 
19.  
20.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
21.  
22.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
23.  
24.     FontSize="{StaticResource PhoneFontSizeNormal}" 
25.  
26.     Foreground="{StaticResource PhoneForegroundBrush}" 
27.  
28.     SupportedOrientations="Portrait" Orientation="Portrait" 
29.  
30.     shell:SystemTray.IsVisible="True"> 
31.  
32.     <!--添加ViewModel层的FoodViewModel类为资源--> 
33.  
34.     <phone:PhoneApplicationPage.Resources> 
35.  
36.         <my:FoodViewModel x:Key="food" /> 
37.  
38.     </phone:PhoneApplicationPage.Resources> 
39.  
40.    
41.  
42.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
43.  
44.         <Grid.RowDefinitions> 
45.  
46.             <RowDefinition Height="Auto"/> 
47.  
48.             <RowDefinition Height="*"/> 
49.  
50.         </Grid.RowDefinitions> 
51.  
52.    
53.  
54.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
55.  
56.             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
57.  
58.             <TextBlock x:Name="PageTitle" Text="数据绑定" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
59.  
60.         </StackPanel> 
61.  
62.         <!--在Grid控件中将上面定义好的FoodViewModel类资源赋值给DataContent属性，表示Grid控件内使用FoodViewModel类作为上下文数据--> 
63.  
64.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" DataContext="{StaticResource food }"> 
65.  
66.             <!--在ListBox控件中绑定FoodViewModel类的AllFood属性，AllFood是ObservableCollection<Food>类型--> 
67.  
68.             <ListBox x:Name="listBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding AllFood}"> 
69.  
70.                 <ListBox.ItemTemplate> 
71.  
72.                     <DataTemplate> 
73.  
74.                        <StackPanel Orientation="Horizontal" Background="Gray" Width="450" Margin="10"> 
75.  
76.                             <!--绑定Food类的IconUri属性--> 
77.  
78.                             <Image Source="{Binding IconUri}" Stretch="None"/> 
79.  
80.                             <!--绑定Food类的Name属性--> 
81.  
82.                             <TextBlock Text="{Binding Name}" FontSize="40" Width="150"/> 
83.  
84.                             <!--绑定Food类的Description属性--> 
85.  
86.                             <TextBlock Text="{Binding Description}" FontSize="20" Width="280"/> 
87.  
88.                         </StackPanel> 
89.  
90.                     </DataTemplate> 
91.  
92.                 </ListBox.ItemTemplate> 
93.  
94.             </ListBox> 
95.  
96.         </Grid> 
97.  
98.     </Grid> 
99.  
100.    
101.  
102. </phone:PhoneApplicationPage> 

OK!!!!!!!!!!!!!!!!!!!!!!!

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

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1078581