`
hunxiejun
  • 浏览: 1137525 次
文章分类
社区版块
存档分类
最新评论

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:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
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!!!!!!!!!!!!!!!!!!!!!!!
备注:实现绑定数据的方法有很多种,原理都大同小异。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics