第一个MVVM wp7程序

创建一个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 dataServices
        private 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
    {
        // Constructor
        public 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)中效果为

下载源码