MVVM Light 一个窗口承载两个视图

MVVM Light 一个窗口承载两个视图

 

原文地址:http://www.codeproject.com/Articles/323187/MVVMLight-Using-Two-Views

本文并不是对原文逐句翻译,为了尽量通俗易懂,本人对原文有所增删。

如果你对MVVM还不太熟悉可以先看看本人之前的关于MVVM的博客:

http://www.cnblogs.com/zhangzhi19861216/archive/2013/03/19/WPF-MVM.html

如果你对MVVMLight不太了解,在阅读本文前,最好先阅读本人之前的一片译文:

http://www.cnblogs.com/zhangzhi19861216/archive/2013/03/20/2971400.html

 

在之前的文章中,我快速展示了如何用MVVMLight创建一个单View、单Window的WPF应用程序。但是WPF应用程序的趋势是一个窗口承载多个视图,

以便减少弹出的对话框或子窗口。本文展示了用MVVM模式构建一个简单的一个窗口承两个视图的应用程序。

在开始之前:

1、 需要VS2010

2、 确保你安装了NUget

3、 用Manage Nuget Package 引用并且添加 MVVM Light。

4、 这篇文章的源码在 github上。

注意,为了简洁起见,博文中的很多代码,特别是Xaml省略了,所以读者最好去github下载源码进行阅读。

承载多个视图

这个应用程序的结构类似之前的文章,我们有个MainWindow,ViewModelLocator和MainViewModel。

一张图片胜过千言万语,所以事不宜迟,这里是VS2010中的项目结构视图:

该项目为典型的MVVM风格:3个文件夹分别为Model,ViewModel和View。在当前项目,我们没有任何的Model,因此它可以忽略不计。

我们从View开始:在Views文件夹下我们创建两个UserControl——FirstView.xaml和SecondView.xaml。

FirstView.xaml和我们上篇文章 一致,而SecondView.xaml仅包含一个Lable元素。

所有涉及两个视图切换的操作都在MainViewModel.cs, MainWindow.xaml, and App.xaml当中.

首先看看MainWindow XAML,如下所示:

复制代码
<Window x:Class="TwoViews.MainWindow"
        DataContext="{Binding Main,
                              Source={StaticResource Locator}}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ContentControl Content="{Binding CurrentViewModel}" />

        <DockPanel Grid.Row="1" >
            <Button Command="{Binding SecondViewCommand}"
                    Content="Second View"
                    DockPanel.Dock="Right" />
            <Button Command="{Binding FirstViewCommand}"
                    Content="First View"
                    DockPanel.Dock="Left" />
        </DockPanel>
    </Grid>
</Window>
复制代码

看上面的代码,像之前一样,我们使用ViewModelLocator绑定我们的Main  视图模型到MainWindow。然而,这一次,我们有一个ContentControl绑定到一个称为CurrentViewModel(定义在MainViewModel当中)的新属性,并且有两个按钮分别绑定一个命令。

获取源码(译者所建项目):

files.cnblogs.com/zhangzhi19861216/ MVVMLigntStudy.rar

我们打开项目运行一下:

(First View)

(Second View)

我们看到,当分别点击按钮,有两个View在切换(实际上是我们的ViewModel在更新)。

让我们来看看MainViewModel.cs的代码:

复制代码
 public class MainViewModel : ViewModelBase
    {
        
        private ViewModelBase _currentViewModel;

        readonly static SecondViewModel _secondViewModel = new SecondViewModel();

        readonly static FirstViewModel _firstViewModel = new FirstViewModel();

        public ViewModelBase CurrentViewModel
        {
            get
            {
                return _currentViewModel;
            }
            set
            {
                if (_currentViewModel == value)
                    return;
                _currentViewModel = value;
                RaisePropertyChanged("CurrentViewModel");
            }
        }

        public ICommand FirstViewCommand { get; private set; }

        public ICommand SecondViewCommand { get; private set; }

        public MainViewModel()
        {
            CurrentViewModel = MainViewModel._firstViewModel;
            FirstViewCommand = new RelayCommand(() => ExecuteFirstViewCommand());
            SecondViewCommand = new RelayCommand(() => ExecuteSecondViewCommand());
        }


        private void ExecuteFirstViewCommand()
        {
            CurrentViewModel = MainViewModel._firstViewModel;
        }

        private void ExecuteSecondViewCommand()
        {
            CurrentViewModel = MainViewModel._secondViewModel; ;
        }
    }
复制代码

MainViewModel定义了三个ViewModel(_currentViewModel、_secondViewModel 、_firstViewModel),和两命令(FirstViewCommand,SecondViewCommand),两个命令分别调用如下两个方法:

复制代码
private void ExecuteFirstViewCommand()
        {
            CurrentViewModel = MainViewModel._firstViewModel;
        }

        private void ExecuteSecondViewCommand()
        {
            CurrentViewModel = MainViewModel._secondViewModel; ;
        }
复制代码

每次触发命令(点击FirstView或者SecondView按钮),其实都是在_firstViewModel和_secondViewModel之间切换——把它们赋给CurrentViewModel,而MainWindow.xaml中的ContentControl元素绑定的就是CurrentViewModel,因此跟着更新。

疑惑:ViewModel之间的切换,如何引起View的不同显示呢?

接下来看看App.xaml:

复制代码
<Application x:Class="TwoViews.App"
             xmlns:views="clr-namespace:TwoViews.Views"
             xmlns:vm="clr-namespace:TwoViews.ViewModels"
             StartupUri="MainWindow.xaml"
             >
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator"  />
        <DataTemplate DataType="{x:Type vm:SecondViewModel}">
            <views:SecondView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:FirstViewModel}">
            <views:FirstView />
        </DataTemplate>
    </Application.Resources>
</Application>
复制代码

在这里,我们使用DataTemplate 将ViewModel通过View表现出来。

例如,毫不夸张地说:“如果我的数据类型应该是FirstViewModel,那么WPF框架应该呈现的是FirstView用户控件。

译者注:在WPF中我们可以使用DataTemplate为自己的数据(视图模型中的数据)定制显示方式,也就是说虽然某数据数据是一定的,

但我们可以做到(通过View)让它的表现方式多种多样。

 

本文就翻译到这里,翻译的章节次序和原文不太相符。因为我觉得这样更容易理解。

如果文中出现错误或者歧义,请指正。

译文源码:files.cnblogs.com/zhangzhi19861216/ MVVMLigntStudy.rar

原文源码:https://github.com/barrylapthorn/MvvmLightExamples

译者注:

看到原文下面留言:Nothing to download? 估计是进入原文源码下载页面,读者找不到源码下载地址。

提示:进入原文下载页面后,点击Zip按钮即可,这主要是很多读者对github不太熟悉。

 

如果你对MVVMLight感兴趣,而你的英文实在不怎么好,推荐你阅读如下国内作者的博客:

http://www.cnblogs.com/phoenixtrees/archive/2011/05/01/2033847.html

http://blog.csdn.net/duanzilin/article/details/6387639

接下来我还会翻译更多关于WPF的文章,希望大家多多支持,多交流。

posted @ 2013-07-31 11:40  zzlp  阅读(1129)  评论(0编辑  收藏  举报