豆瓣电台WP7客户端 MVVM重构记录之使用MVVM Light实现数据绑定

最近面试多次被问及MVVM，虽然看过园子里的教程，毕竟未实际实现过，都回答“只了解，未实践过”。今天终于逼自己去用MVVM重构下这个应用。

这里就不多说MVVM的理论等东西了。需要了解的搜一下园子吧，大把大把的！

这次我选择了MVVM Light框架去实现MVVM。我也没用过其他的框架，也不知道有什么特别的地方或者优势，使用MVVM Light也全听别人说不错。

首先去codeplex下载下来MVVM Light:http://mvvmlight.codeplex.com/ 安装之。安装完成之后在原来的项目上添加引用：

调整项目目录结构：

新建View，ViewModel两个文件夹。把ChannelTile.xaml,MainPage.xaml移动到View文件夹下。在ViewModel文件夹下右键新建类，选择MVVM Light为我们提供的模板：MvvmViewModel(wp7)。

新建一个叫ChannelTileViewModel的类。把原来在ChannelTile.cs文件里的代码移植了一部分过来。

using GalaSoft.MvvmLight;
using Microsoft.Xna.Framework.Input.Touch;
using Helper;
using System;
using System.Windows;

namespace DBFM7.ViewModel
{
    /// <summary>
    /// This class contains properties that a View can data bind to.
    /// <para>
    /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.
    /// </para>
    /// <para>
    /// See http://www.galasoft.ch/mvvm/getstarted
    /// </para>
    /// </summary>
    public class ChannelTileViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the ChannelTileViewModel class.
        /// </summary>
        public ChannelTileViewModel()
        {
            TouchPanel.EnabledGestures = GestureType.Tap | GestureType.HorizontalDrag;
            if (!PlayListHelper.IsInited)
            {
                PlayListHelper.InitChannelComplete += new Action(PlayListHelper_InitChannelComplete);
                PlayListHelper.InitChannel();//初始化播放列表
            }
            else
                this.IsShowGoBtn = Visibility.Visible;
        }


        private string _Title="频道正在初始化...";
        /// <summary>
        /// 标题
        /// </summary>
        public string Title
        { get { return _Title; } 
          set 
          {
              this._Title = value;
              this.RaisePropertyChanged("Title");
          } 
        }


        private Visibility _IsShowGoBtn=Visibility.Collapsed;
        /// <summary>
        /// 是否显示右边的箭头
        /// </summary>
        public Visibility IsShowGoBtn
        {
            get { return this._IsShowGoBtn; }
            set
            {
                this._IsShowGoBtn = value;
                this.RaisePropertyChanged("IsShowGoBtn");
            }
        }

        /// <summary>
        /// 初始化tile的image跟title
        /// </summary>
        protected void PlayListHelper_InitChannelComplete()
        {
  
            this.Title = "请选择一个你喜欢的频道";

        }

    }
}

这个类继承ViewModelBase，它已经帮我们实现了INotifyPropertyChanged接口，所以简化了实现ViewModelBase的步骤。我们只要定义一个属性，然后在set方法里调用RaisePropertyChanged（）方法就实现了依赖属性。

然后在项目目录下新建一个MvvmViewModelLocator，还是使用MVVM Light的模板:

 

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;
using DBFM7.ViewModel;

namespace DBFM7
{
    /// <summary>
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    /// <para>
    /// Use the <strong>mvvmlocatorproperty</strong> snippet to add ViewModels
    /// to this locator.
    /// </para>
    /// <para>
    /// See http://www.galasoft.ch/mvvm/getstarted
    /// </para>
    /// </summary>
    public class MvvmViewModelLocator
    {
        static MvvmViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            if (ViewModelBase.IsInDesignModeStatic)
            {
                // SimpleIoc.Default.Register<IDataService, Design.DesignDataService>();
            }
            else
            {
                // SimpleIoc.Default.Register<IDataService, DataService>();
            }

            SimpleIoc.Default.Register<ChannelTileViewModel>();
        }

        /// <summary>
        /// Gets the Main property.
        /// </summary>
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",
            "CA1822:MarkMembersAsStatic",
            Justification = "This non-static member is needed for data binding purposes.")]
        public ChannelTileViewModel ChannelTile
        {
            get
            {
                return ServiceLocator.Current.GetInstance<ChannelTileViewModel>();
            }
        }

    }
}
把生成的MainViewModel替换成ChannelTileViewModel。

在APP.Xaml添加一个静态资源:

    <Application.Resources>
        <vm:MvvmViewModelLocator xmlns:vm="clr-namespace:DBFM7"
                                   x:Key="Locator" />
    </Application.Resources>

 

把ChannelTileViewModel跟ChannelTile.xaml绑定起来。

<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"  
    x:Class="DBFM7.View.ChannelTile"
。。。。。。。。。。。。

    DataContext="{Binding ChannelTile,Source={StaticResource Locator}}">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <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,0">
            <TextBlock x:Name="ApplicationTitle" Text="DB.FM 7" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock HorizontalAlignment="Center" x:Name="PageTitle" 
                       Text="{Binding Title}" 
                       Margin="0,40,0,0" FontSize="22"/>
        </StackPanel>

。。。。。。。。。。。。。。。。。。

            <Image  Grid.Column="2"
                VerticalAlignment="Top"
                Margin="0,12,0,0"
                Width="48" Height="48" 
                Source="..\ICON\RightGo.png" 
                x:Name="imgGo" Tap="imgGo_Tap"
                 Visibility="{Binding IsShowGoBtn}" />

这样就用MVVM Light基本实现了数据绑定的功能。