MVVMLight学习笔记（二）---MVVMLight框架初探

一、MVVM分层概述

MVVM中，各个部分的职责如下：

Model：负责数据实体的结构处理，与ViewModel进行交互；

View：负责界面显示，与ViewModel进行数据和命令的交互；

ViewModel：负责前端视图业务级别的逻辑结构组织，并将其反馈给前端。

二、MVVMLight框架初探

通过NuGet安装MVVM Light 框架后，我们新建的Wpf项目中会自动生成一个ViewModel文件夹，里面有MainViewModel.cs和ViewModelLocator.cs两个文件。

下面我们就首先分析下这两个文件的内容：

MainViewModel.cs文件分析：

MainViewModel.cs文件中只有一个类MainViewModel，该类是主窗口MainWindow对应的ViewModel，继承自类ViewModelBase

ViewModelBase类又继承类ObservableObject，同时实现ICleanup接口

ObservableObject类实现INotifyPropertyChanged接口，用于通知属性的改变

由此分析，我们可以得出以下一般结论：

当我们定义一个自己的ViewModel时，一般让自定义ViewModel继承自ViewModelBase类，这样当ViewModel中属性发生变化的时候，就可以自动通知对应的VIew。

ViewModelLocator.cs文件分析：

ViewModelLocator.cs文件中只有一个ViewModelLocator类，类中包括一个构造函数、一个类型为MainViewModel的Main属性、以及一个静态的Cleanup函数。

 public class ViewModelLocator

    {

        /// <summary>

        /// Initializes a new instance of the ViewModelLocator class.

        /// </summary>

        public ViewModelLocator()

        {

            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            ////if (ViewModelBase.IsInDesignModeStatic)

            ////{

            ////    // Create design time view services and models

            ////    SimpleIoc.Default.Register<IDataService, DesignDataService>();

            ////}

            ////else

            ////{

            ////    // Create run time view services and models

            ////    SimpleIoc.Default.Register<IDataService, DataService>();

            ////}

            SimpleIoc.Default.Register<MainViewModel>();

        }

        public MainViewModel Main

        {

            get

            {

                return ServiceLocator.Current.GetInstance<MainViewModel>();

            }

        }

        public static void Cleanup()

        {

            // TODO Clear the ViewModels

        }

    }

在构造函数中，创建了一个SimpleIoc类型的单实例，用于注册ViewModel，然后用ServiceLocator对这个SimpleIoc类型的单实例进行包裹，方便统一管理。
观察App.xaml文件，我们会发现ViewModelLocator类被生成资源字典并加入到了全局资源，所以每次App初始化的时候，就会去初始化ViewModelLocator类。

实际上，他是一个很基本的视图模型注入器，在构造器中把使用到的ViewModel统一注册，并生成单一实例。然后使用属性把它暴露出来，每当我们访问属性的时候，就会返回相应的ViewModel实例。

<Application x:Class="MvvmLightDemo.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:local="clr-namespace:MvvmLightDemo" StartupUri="MainWindow.xaml"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">

  <Application.Resources>

    <ResourceDictionary>

      <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:MvvmLightDemo.ViewModel" />

    </ResourceDictionary>

  </Application.Resources>

</Application>

由此分析，我们可以得出以下一般结论：

当我们自定义一个ViewModel的时候，就可以在ViewModelLocator类的构造函数中对ViewModel进行注册，然后在该类中定义一个属性，用于返回我们的自定义ViewModel

三、MVVMLight框架初探实战Demo

在建立一个MVVMLight框架的Wpf工程后，我们再在工程下建立Model和View（该文件夹在本Demo中暂时不用，我们只使用主窗口）文件夹，VIewModel文件夹框架已经自动帮我们建立了，无需再创建。

1）在Model文件夹下建立一个WelcomeModel .cs文件，文件内容如下：

using GalaSoft.MvvmLight;

namespace MvvmLightDemo1.Model

{

    public class WelcomeModel : ObservableObject

    {

        private string welcomeMsg;

        public string WelcomeMsg

        {

            get { return welcomeMsg; }

            set { welcomeMsg = value; RaisePropertyChanged(() => WelcomeMsg); }

        }

    }

}

类WelcomeModel继承自类ObservableObject，并包含一个简单的string类型的WelcomeMsg属性，用于显示欢迎信息。
类ObservableObject位于GalaSoft.MvvmLight命名空间，实现INotifyPropertyChanged接口，通过触发PropertyChanged事件达到通知UI属性更改的目的。

所以，我们在定义实体对象的时候，只需要在属性的set块中调用RaisePropertyChanged(PropertyName)就可以进行属性更改通知，实现与UI的交互。

2）在MainViewModel中定义一个WelcomeModel类型的属性WelcomeModel，并在构造函数中对该属性进行初始化。

using GalaSoft.MvvmLight;

using MvvmLightDemo1.Model;

namespace MvvmLightDemo1.ViewModel

{

    /// <summary>

    /// This class contains properties that the main View can data bind to.

    /// <para>

    /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.

    /// </para>

    /// <para>

    /// You can also use Blend to data bind with the tool's support.

    /// </para>

    /// <para>

    /// See http://www.galasoft.ch/mvvm

    /// </para>

    /// </summary>

    public class MainViewModel : ViewModelBase

    {

        private WelcomeModel welcomeModel;

        public WelcomeModel WelcomeModel

        {

            get { return welcomeModel; }

            set { welcomeModel = value; RaisePropertyChanged(() => WelcomeModel); }

        }

        /// <summary>

        /// Initializes a new instance of the MainViewModel class.

        /// </summary>

        public MainViewModel()

        {

            WelcomeModel = new WelcomeModel() { WelcomeMsg = "Welcome to MVVMLight World!" };

        }

    }

}

3）修改主窗口

<Window x:Class="MvvmLightDemo1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:MvvmLightDemo1"

        mc:Ignorable="d"

        Title="MVVMLIghtDemo1" Height="350" Width="525" Background="#FF256795">

    <Window.DataContext>

        <Binding Path="Main" Source="{StaticResource Locator}"></Binding>

    </Window.DataContext>

    <Grid>

        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" >

            <TextBlock Text="{Binding WelcomeModel.WelcomeMsg}" FontSize="28" Foreground="#FF128738"></TextBlock>

        </StackPanel>

    </Grid>

</Window>

TextBlock 绑定了 WelcomeModel中的WelcomeMsg，用于显示欢迎信息。

然后，我们通过ViewModelLocator的Main属性返回MainViewModel,将它赋值给MainWindow的DataContext属性，完成VIew和ViewModel的关联。

     <Window.DataContext>
        <Binding Path="Main" Source="{StaticResource Locator}"></Binding>
    </Window.DataContext>

Key为Locator的类型为ViewModelLocator的资源在App.xaml中被声明，是一个全局资源。

App.xaml文件内容如下：

<Application x:Class="MvvmLightDemo1.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:local="clr-namespace:MvvmLightDemo1"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"

             StartupUri="MainWindow.xaml">

    <Application.Resources>

        <ResourceDictionary>

            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:MvvmLightDemo1.ViewModel" />

        </ResourceDictionary>

    </Application.Resources>

</Application>

ViewModelLocator.cs文件内容如下：

/*

  In App.xaml:

  <Application.Resources>

      <vm:ViewModelLocator xmlns:vm="clr-namespace:MvvmLightDemo1"

                           x:Key="Locator" />

  </Application.Resources>

  In the View:

  DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"

  You can also use Blend to do all this with the tool's support.

  See http://www.galasoft.ch/mvvm

*/

using CommonServiceLocator;

using GalaSoft.MvvmLight;

using GalaSoft.MvvmLight.Ioc;

namespace MvvmLightDemo1.ViewModel

{

    /// <summary>

    /// This class contains static references to all the view models in the

    /// application and provides an entry point for the bindings.

    /// </summary>

    public class ViewModelLocator

    {

        /// <summary>

        /// Initializes a new instance of the ViewModelLocator class.

        /// </summary>

        public ViewModelLocator()

        {

            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            ////if (ViewModelBase.IsInDesignModeStatic)

            ////{

            ////    // Create design time view services and models

            ////    SimpleIoc.Default.Register<IDataService, DesignDataService>();

            ////}

            ////else

            ////{

            ////    // Create run time view services and models

            ////    SimpleIoc.Default.Register<IDataService, DataService>();

            ////}

            SimpleIoc.Default.Register<MainViewModel>();

        }

        public MainViewModel Main

        {

            get

            {

                return ServiceLocator.Current.GetInstance<MainViewModel>();

            }

        }

        public static void Cleanup()

        {

            // TODO Clear the ViewModels

        }

    }

}

至此，一个初级的MVVMLight项目就构建完成了。
运行结果如下：

巴特西

MVVMLight学习笔记（二）---MVVMLight框架初探

最新文章

热门文章