你的位置:首页 > ASP.net教程

[ASP.net教程]MvvmLight框架使用入门(三)


  本篇是MvvmLight框架使用入门的第三篇。从本篇开始,所有代码将通过Windows 10的Universal App来演示。我们将创建一个Universal App并应用MvvmLight框架。

  首先通过VS2015创建一个名为UniversalApp的空工程(工程类型为Universal Windows),然后通过NuGet获取MvvmLight,这里需要注意的是,我们选择MvvmLightLib仅下载DLL文件,因为MvvmLight还未对Universal App做适配,并不会自动创建ViewModel以及ViewModelLocator等文件。

  在创建UniversalApp完成后,将上一篇创建的HelloMvvmLight工程中的ViewModel文件夹整个拷贝到UWP工程里(注意修改namespace)。这样MainViewModel以及ViewModelLocator文件就有了。

接着在App.xaml的Resources中添加对ViewModelLocator的引用:

  <Application.Resources>    <ResourceDictionary>      <vm:ViewModelLocator x:Key="Locator" />    </ResourceDictionary>  </Application.Resources>

  这里需要注意保持namespace和ViewModel的namespace一致:

  再下一步就是修改MainPage.xaml文件,将xaml的内容修改如下:

  <Page.DataContext>    <Binding Path="Main" Source="{StaticResource Locator}"></Binding>  </Page.DataContext>  <Grid>    <Grid.RowDefinitions>      <RowDefinition Height="Auto"></RowDefinition>      <RowDefinition Height="Auto"></RowDefinition>    </Grid.RowDefinitions>    <TextBlock Text="{Binding Title}"></TextBlock>    <Button Grid.Row="1" Command="{Binding ChangeTitleCommand}">Click Me!</Button>  </Grid>

  至此,一个简单的使用了MvvmLight框架的Uinversal App就完成了。

  按下Ctrl+F5,一个Win10风格的窗体就出现了。(细心的童鞋会发现Button默认不再撑开了)

  当然本篇不会只有这点东西,我们会进一步介绍MvvmLight框架在Universal App下的使用。

  接下来我们增加第二个页面,来看一下MvvmLight对页面间导航的支持。

  第一步新建PageTwoViewModel类:

  public class PageTwoViewModel  {    private INavigationService _navigationService;    public ICommand GoBackCommand { get; set; }    public PageTwoViewModel(INavigationService navigationService)    {      _navigationService = navigationService;      GoBackCommand = new RelayCommand(()=> { _navigationService.GoBack(); });    }  }

  INavigationService是MvvmLight为了抽象各类型的工程(WPF,Silverlight,Windows Runtime)不同的导航方法,而设计的接口,定义如下:

  public interface INavigationService  {    string CurrentPageKey { get; }    void GoBack();    void NavigateTo(string pageKey);    void NavigateTo(string pageKey, object parameter);  }

  通过string字符串确认唯一页面来进行跳转和返回,并可以传递object类型的参数。

  ViewModelLocator类注册PageTwoViewModel,以及创建INavigationService的实例并关联各Page。

    public ViewModelLocator()    {      ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);      SimpleIoc.Default.Register<MainViewModel>();      SimpleIoc.Default.Register<PageTwoViewModel>();      var navigationService = this.CreateNavigationService();      SimpleIoc.Default.Register<INavigationService>(() => navigationService);    }    private INavigationService CreateNavigationService()    {      var navigationService = new NavigationService();      navigationService.Configure("MainPage", typeof(MainPage));      navigationService.Configure("PageTwo", typeof(PageTwo));      return navigationService;    }    public MainViewModel Main    {      get      {        return ServiceLocator.Current.GetInstance<MainViewModel>();      }    }    public PageTwoViewModel PageTwo    {      get      {        return ServiceLocator.Current.GetInstance<PageTwoViewModel>();      }    }  }

  至于为什么只要在PageTwoViewModel的构造函数参数中带有INavigationService,即可由IOC自动获取实例navigationService则超出了本文讨论的范围,有兴趣的同学自行学习。

  构建PageTwo.xaml页面并关联至PageTwoViewModel。

  <Page.DataContext>    <Binding Path="PageTwo" Source="{StaticResource Locator}"></Binding>  </Page.DataContext>  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid>      <Grid.RowDefinitions>        <RowDefinition Height="Auto"></RowDefinition>        <RowDefinition Height="Auto"></RowDefinition>      </Grid.RowDefinitions>      <TextBlock Text="Page Two"></TextBlock>      <Button Grid.Row="1" Command="{Binding GoBackCommand}">Go Back</Button>    </Grid>  </Grid>

  修改MainViewModel类,增加GotoNextCommand等方法。同时我们可以看到手动获取navigationService对象的方法。

  public class MainViewModel : ViewModelBase  {    private string title;    public string Title    {      get { return title; }      set { Set(ref title , value); }    }    public ICommand ChangeTitleCommand { get; set; }    public ICommand GotoNextCommand { get; set; }    public MainViewModel()    {      Title = "Hello World";      ChangeTitleCommand = new RelayCommand(ChangeTitle);      GotoNextCommand = new RelayCommand(GotoNext);    }    private void GotoNext()    {      var navigationService = ServiceLocator.Current.GetInstance<INavigationService>();      navigationService.NavigateTo("PageTwo");    }    private void ChangeTitle()    {      Title = "Hello MvvmLight";    }  }

  MainPage.xaml仅仅是增加了一个GotoNext的Button:

<Button Grid.Row="2" Command="{Binding GotoNextCommand}">Go to Next!</Button>

  大功告成,按下Ctrl+F5试试吧。

  使用MvvmLight框架中的INavigationService来进行页面导航,虽然相对使用Frame导航稍稍增加了工作量,但具有以下几点好处:

  1.   不依赖具体的工程实现(WPF,Sliverlight,Windows Runtime)。
  2.   View和ViewModel不直接产生依赖,双方通过中介INavigationService打交道。也就是说ViewModel中不会出现Windows.UI.Xaml.Controls的namespace。
  3.   将跳转的实现代码从View转移到ViewModel,使得单元测试可以脱离View,完全的通过ViewModel的UT即可测试跳转的逻辑。