創建一個MVVM wp7程序，從手動組建MVVM程序到使用MVVM Light Toolkit快速創建MVVM程序

一、一步步走向MVVM(一個簡單的好友列表)

打開vs2010 Express for windows phone，創建一個Windows Phone Application

這是開始的項目結構

創建連個文件夾Model和ViewModel，并在ViewModel中添加類ViewModel，實現INotifyPropertyChanged接口，并對PropertyChanged進行一點封裝

MainViewModel.cs

MainViewModelusing 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)中效果為

?

下載源碼

轉載于:https://www.cnblogs.com/yoainet/archive/2011/12/07/2279232.html

總結

以上是生活随笔為你收集整理的第一个MVVM wp7程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。