创建一个MVVM wp7程序，从手动组建MVVM程序到使用MVVM Light Toolkit快速创建MVVM程序

一、一步步走向MVVM(一个简单的好友列表)

打开vs2010 Express for windows phone，创建一个Windows Phone Application

这是开始的项目结构

创建连个文件夹Model和ViewModel，并在ViewModel中添加类ViewModel，实现INotifyPropertyChanged接口，并对PropertyChanged进行一点封装

MainViewModel.cs

MainViewModel

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;using HelloWp7.Model;
namespace HelloWp7.ViewModel
{public class MainViewModel : INotifyPropertyChanged{public MainViewModel(){//初始化数据_title = "Friends Book";_friends = new ObservableCollection<Friend>(friendService.GetFriends());}#region dataServicesprivate FriendService friendService=new FriendService();#endregion/// <summary>/// 应用名称/// </summary>private string _appName;public string AppName{get{return _appName;}set{if (_appName == value){return;}_appName = value;RaisePropertyChanged("AppName");}}private string _title;/// <summary>/// 标题/// </summary>public string Title{get{return _title;}set{if (_title == value){return;}_title = value;RaisePropertyChanged("Title");}}private ObservableCollection<Friend> _friends;public ObservableCollection<Friend> Friends{get{return _friends;}set{if (value == _friends){return;}_friends = value;RaisePropertyChanged("Friends");}}public event PropertyChangedEventHandler PropertyChanged;public void RaisePropertyChanged(string propertyName){if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propertyName));}}}
}

前台界面：

1.先添加对ViewModel的命名空间的引用

xmlns:mv="clr-namespace:HelloWp7.ViewModel"

2.将MainViewModel作为资源配置在页面上

<phone:PhoneApplicationPage.Resources><!--配置ViewModel为资源，执行时会直接初始化--><mv:MainViewModel x:Name="MainViewModel"></mv:MainViewModel></phone:PhoneApplicationPage.Resources>

3.将MainViewModel作为DataContext绑定到页面最顶层的Controll上

<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MainViewModel}">

4.到具体要显示的控件上绑定要显示的内容就行了

MainPage.xaml

<phone:PhoneApplicationPage x:Class="HelloWp7.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:mv="clr-namespace:HelloWp7.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><!--配置ViewModel为资源，执行时会直接初始化--><mv:MainViewModel x:Name="MainViewModel"></mv:MainViewModel><DataTemplate x:Name="FriendTemplate" ><StackPanel Width="400" Margin="0,5" VerticalAlignment="Top"><TextBlock FontSize="39" Text="{Binding Name}"></TextBlock><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Address}" VerticalAlignment="Top"></TextBlock>                    <TextBlock Text="{Binding PhoneNum}" Margin="10,0" VerticalAlignment="Top"></TextBlock></StackPanel></StackPanel></DataTemplate><Style x:Key="frdlist" TargetType="ListBox"><Setter Property="BorderBrush" Value="White"></Setter></Style></phone:PhoneApplicationPage.Resources><!--LayoutRoot is the root grid where all page content is placed--><Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MainViewModel}"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><!--TitlePanel contains the name of the application and page title--><StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"><TextBlock x:Name="ApplicationTitle" Text="{Binding AppName}" Style="{StaticResource PhoneTextNormalStyle}"/><TextBlock x:Name="PageTitle" Text="{Binding Title}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/></StackPanel><!--ContentPanel - place additional content here--><Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid> <Canvas Grid.Row="1"><ListBox ItemsSource="{Binding Friends}" ItemTemplate="{StaticResource FriendTemplate}" Width="468" Height="370" Canvas.Top="0" />           </Canvas></Grid><!--Sample code showing usage of ApplicationBar--><!--<phone:PhoneApplicationPage.ApplicationBar><shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"><shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/><shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/><shell:ApplicationBar.MenuItems><shell:ApplicationBarMenuItem Text="MenuItem 1"/><shell:ApplicationBarMenuItem Text="MenuItem 2"/></shell:ApplicationBar.MenuItems></shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar>--></phone:PhoneApplicationPage>

MainPage.xaml.cs中没有任何代码(MVVM中不会有事件处理了而是用Command绑定就可以了)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;namespace HelloWp7
{public partial class MainPage : PhoneApplicationPage{// Constructorpublic MainPage(){InitializeComponent();}}
}

另外两个Model类

Friend.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;namespace HelloWp7.Model
{public class Friend{        public string Name { get; set; }public string Address { get; set; }public string Pic { get; set; }public string PhoneNum { get; set; }}
}

FriendService.cs

using System;
using System.Collections.Generic;namespace HelloWp7.Model
{public class FriendService{public List<Friend> GetFriends(){List<Friend> friends = new List<Friend>() { new Friend(){ Name="Johnny", Address="北京", PhoneNum="13621010899"},   new Friend(){ Name="David", Address="上海", PhoneNum="23621010899"},   new Friend(){ Name="John", Address="天津", PhoneNum="33621010899"},   new Friend(){ Name="Susan", Address="武汉", PhoneNum="43621010899"},   new Friend(){ Name="Badboy", Address="深圳", PhoneNum="53621010899"},new Friend(){ Name="Jobs", Address="广州", PhoneNum="11621010899"},   new Friend(){ Name="kevin", Address="深圳", PhoneNum="53621010899"}};return friends;}}
}

项目目前结构为：

按F5发布到模拟器(Windows Phone Emulator)中效果为

下载源码