Windows Phone中 MVVM架構

標籤：

MVVM(Model View ViewModel)是由MVC和MVP模式發展來的一種模式，它主要目的就是將應用程式的代碼和介面分離開，這樣介面開發可以更專註於設計介面，也使得UI介面更容易變換和測試，下面來看一下這3層的主要功能

1.Model層

資料訪問層，一般定義為一個或多個類，以物件導向的方式將資料表示出來。

2.View層

展示層，UI介面的實現以及通過Binding和Command來實現與ViewModel層的互動

3.ViewModel層

負責View和Model之間的資訊轉換，將View的Command傳到Model，以及通過Binding來實現與和View層的資料傳遞。

下面是一個MVVM模式的資料繫結執行個體：

思路：

1.定義一個實體類（Model層）來儲存資料。

2.建立ViewModel層：聲明一個集合類（ObservableCollection<T>）來作為繫結資料源，且ViewModel層必須是實現了INotifyPropertyChanged介面，這樣在資料來源發生變化時才能及時通知Binding來更改目標值（View層中）的變化。

3.建立View層。如果要綁定ViewModel層中的資料，必須將ViewModel層中的命名空間引用，然後添加到Resource中，並設定一個key（本執行個體中設定為“food”）,然後將Resource中的資源賦值給Grid控制項中的DataContent屬性，則在Grid中就可以使用ViewModel層中的資料來源了。

Food.cs代碼如下（Model層）

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;        }    }}

Food.cs

 

FoodViewModel.cs代碼如下（ViewModel層）

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));            }        }      }}

FoodViewModel.cs

 

MainPage.xaml代碼如下（View層）

<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">    <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 x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" DataContext="{StaticResource food }">            <ListBox x:Name="listBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding AllFood}">                <ListBox.ItemTemplate>                    <DataTemplate>                       <StackPanel Orientation="Horizontal" Background="Gray" Width="450" Margin="10">                            <Image Source="{Binding IconUri}" Stretch="None"/>                            <TextBlock Text="{Binding Name}" FontSize="40" Width="150"/>                            <TextBlock Text="{Binding Description}" FontSize="20" Width="280"/>                        </StackPanel>                    </DataTemplate>                </ListBox.ItemTemplate>            </ListBox>        </Grid>    </Grid></phone:PhoneApplicationPage>

MainPage.xaml

 

Windows Phone中 MVVM架構