Windows Phone 7 MVVM模式通讯方式之实现Binding Data
MVVM模式的View与ViewModel的三大通讯方式:Binding Data(实现数据的传递)、Command(实现操作的调用)和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!!!!!!!!!!!!!!!!!!!!!!!
备注:实现绑定数据的方法有很多种,原理都大同小异。