Windows Phone 7 MVVM模式数据绑定和传递参数

数据绑定使用了ObservableCollection<T> 类来实现，ViewModel通过继承GalaSoft.MvvmLight.ViewModelBase类来实现，Command

使用GalaSoft.MvvmLight.Command.RelayCommand<T>来实现。

ObservableCollection<T>表示一个动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知。

客户列表绑定客户的名字、QQ、地址信息，单击的时候显示客户的全部详细信息。

 

 

View层

 

<phone:PhoneApplicationPage
   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:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"
   x:Class="MvvmLight5.MainPage"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait"
   Orientation="Portrait"
   mc:Ignorable="d"
   d:DesignWidth="480"
   d:DesignHeight="768"
   shell:SystemTray.IsVisible="True"
   DataContext="{Binding Main, Source={StaticResource Locator}}">
    <!--绑定ViewModel中的Main实例对象 资源在App.xaml中进行了加载-->

   <Grid
      x:Name="LayoutRoot"
      Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition  Height="Auto" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <StackPanel x:Name="TitlePanel"  Grid.Row="0" Margin="24,24,0,12">
         <TextBlock
            x:Name="ApplicationTitle"
            Text="{Binding ApplicationTitle}"
            Style="{StaticResource PhoneTextNormalStyle}" />
         <TextBlock
            x:Name="PageTitle"
            Text="{Binding PageName}"
            Margin="-3,-8,0,0"
            Style="{StaticResource PhoneTextTitle1Style}" />
      </StackPanel>

      <Grid  x:Name="ContentGrid" Grid.Row="1">
         <ListBox  x:Name="PersonListBox"   Margin="10" ItemsSource="{Binding Customers}">
                <!--绑定MainViewModel的Customers数据-->
            <ListBox.ItemTemplate>
               <DataTemplate>
                  <StackPanel>
                     <StackPanel
                        x:Name="DataTemplateStackPanel"
                        Orientation="Horizontal">
                        <TextBlock
                           x:Name="Name"
                           Text="{Binding Name}"
                           Margin="0,0,5,0"
                           Style="{StaticResource PhoneTextExtraLargeStyle}" />
                        <TextBlock
                           x:Name="QQ"
                           Text="{Binding QQ}"
                           Margin="0"
                           Style="{StaticResource PhoneTextExtraLargeStyle}" />
                     </StackPanel>
                     <TextBlock
                        x:Name="Email"
                        Text="{Binding Address}"
                        Margin="0"
                        Style="{StaticResource PhoneTextSubtleStyle}" />

                  </StackPanel>
               </DataTemplate>
            </ListBox.ItemTemplate>
                <!--添加System.Windows.Interactivity触发器处理事件，放在ListBox里面-->
             <Custom:Interaction.Triggers>
                 <!--当选中客户的时候触发该事件-->
                <Custom:EventTrigger EventName="SelectionChanged">
                        <GalaSoft_MvvmLight_Command:EventToCommand x:Name="SelectionCommand" Command="{Binding DetailsPageCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItem, ElementName=PersonListBox}"/>
                        <!--传递的参数为ListBox选中的Customer对象-->
                 </Custom:EventTrigger>
             </Custom:Interaction.Triggers>
         </ListBox>

      </Grid>
   </Grid>
</phone:PhoneApplicationPage>

ViewModel层

ViewModelLocator是对ViewModel进行初始化和清理的集中处理的类 添加资源的时候只需要添加这一个类就可以了。

ViewModelLocator.cs

 

namespace MvvmLight5.ViewModel
{
   public class ViewModelLocator
   {
      private static MainViewModel _main;

      /// <summary>
      /// 初始化  在这里创建ViewModel  可以将多个ViewModel在这里一起创建
      /// </summary>
      public ViewModelLocator()
      {
         CreateMain();

      }

      /// <summary>
      /// 获取MainViewModel的静态的实例对象
      /// </summary>
      public static MainViewModel MainStatic
      {
          get
          {
              if (_main == null)
              {
                  CreateMain();
              }

              return _main;
          }
      }

      /// <summary>
      /// 获取MainViewModel的实例对象
      /// </summary>
      public MainViewModel Main
      {
          get
          {
              return MainStatic;
          }
      }

      /// <summary>
      ///清理MainViewModel 退出程序的时候进行清理  在App.xmal.cs中调用
      /// </summary>
      public static void ClearMain()
      {
         _main.Cleanup();
         _main = null;
      }

      /// <summary>
      /// 创建MainViewModel
      /// </summary>
      public static void CreateMain()
      {
         if ( _main == null )
         {
            _main = new MainViewModel();
         }
      }
   }
}

MainViewModel.cs

 

using System.Collections.ObjectModel;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using MvvmLight5.Model;

namespace MvvmLight5.ViewModel
{
   public class MainViewModel : ViewModelBase
   {

      /// <summary>
      /// 数据绑定的客户列表
      /// </summary>
      public ObservableCollection<Customer> Customers
      {
         get
         {
            var customerCollection = new CustomerCollection();
            return customerCollection.Customers;
         }
      }
      //定义Command
      public RelayCommand<Customer> DetailsPageCommand
      {
         get;
         private set;
      }

      public string ApplicationTitle
      {
         get
         {
            return "MVVM LIGHT";
         }
      }

      public string PageName
      {
         get
         {
            return "客户列表如下:";
         }
      }

      public string Welcome
      {
         get
         {
            return "Welcome to MVVM Light";
         }
      }

      /// <summary>
      /// 初始化 MainViewModel
      /// </summary>
      public MainViewModel()
      {
          //初始化Command
         DetailsPageCommand = new RelayCommand<Customer>( ( msg ) => GoToDetailsPage( msg ) );
      }

      private object GoToDetailsPage( Customer msg )
      {
          System.Windows.MessageBox.Show("客户的详细资料如下    名字:" + msg.Name + "  城市:" + msg.City + "  地址:" + msg.Address + "  电话:" + msg.Phone + "  QQ:" + msg.QQ);
         return null;
      }
   }
}

Model层

Customers.cs

 

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace MvvmLight5.Model
{
   public class CustomerCollection
   {
      //在这里绑定数据使用了ObservableCollection<T> 类
      private readonly ObservableCollection<Customer> _customers = new ObservableCollection<Customer>();
      public ObservableCollection<Customer> Customers
      {
         get { return _customers; }
      }

      public Customer GetCustomerByID( int id )
      {
         return _customers[ id ];
      }

      public CustomerCollection()
      {
         try
         {
            GenerateCustomers();
         }
         catch ( Exception e )
         {
            System.Windows.MessageBox.Show( "Exception: " + e.Message );
         }
      }
       //初始化数据
      public void GenerateCustomers()
      {
            _customers.Add( new Customer(1,"黄小琥","台湾高雄市十六街8号","高雄","13457789907","3232","[email protected]") );
            _customers.Add(new Customer(2, "李开复", "北京市东城区十六街8号", "北京", "136589907", "787222894", "[email protected]"));
            _customers.Add(new Customer(3, "周杰伦", "台湾台北市十六街8号", "台北", "145455779907", "2323266", "[email protected]"));
            _customers.Add(new Customer(4, "郎咸平", "香港十六街8号", "香港", "145489907", "787222894", "[email protected]"));
            _customers.Add(new Customer(5, "加菲猫", "高雄市十六街8号", "高雄市", "15777789907", "333434", "[email protected]"));
            _customers.Add(new Customer(6, "灰太狼", "台湾第三代市十六街8号", "高雄市", "134357789907", "23232", "[email protected]"));
            _customers.Add(new Customer(7, "喜洋洋", "台湾高雄市十六街8号", "高雄市", "134544589907", "23232777", "[email protected]"));
            _customers.Add(new Customer(8, "春哥", "台湾所得税十六街8号", "高雄市", "13453445907", "888888", "[email protected]"));

      }
   }

   public class Customer
   {
      public int ID { get; set; }

      public string Name { get ; set; }

      public string Address { get; set; }

      public string City { get; set; }

      public string Phone { get; set; }

      public string QQ { get; set; }

      public string Email { get; set; }

      public Customer()
      { }

      public Customer(
         int id,
          string name,
          string address,
          string city,
          string phone,
          string qq,
          string email )
      {
         ID = id;
         Name = name;
         Address = address;
         City = city;
         PhonePhone = Phone;
         QQ = qq;
         Email = email;
      }
   }
}

App.xaml 程序初始化处理

 

<Application x:Class="MvvmLight5.App"
             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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             xmlns:vm="clr-namespace:MvvmLight5.ViewModel">

    <!--Application Resources-->
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator"
                             d:IsDataSource="True" />
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService Launching="Application_Launching"
                                       Closing="Application_Closing"
                                       Activated="Application_Activated"
                                       Deactivated="Application_Deactivated" />
    </Application.ApplicationLifetimeObjects>

</Application>

cs

 // 清理ViewModel资源
      private void Application_Closing( object sender, ClosingEventArgs e )
      {
         ViewModelLocator.ClearMain();
      }