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的文章,希望大家多多支持,多交流。

MVVM Light 一个窗口承载两个视图的更多相关文章

  1. 一个ActionResult中定位到两个视图—<团委项目>

         在使用MVC做项目的时候一般的情况就是一个ActionResult一个视图,这样对应的Return View();就可以找到下面对应的视图,这是根据一个原则,"约定大于配置&quo ...

  2. 一个ActionResult中定位到两个视图—<团委项目>

    在使用MVC做项目的时候一般的情况就是一个ActionResult一个视图,这样对应的Return View();就可以找到下面对应的视图,这是根据一个原则,“约定大于配置”,但是我们有的时候需要在一 ...

  3. MVVM Light 新手入门(3) :ViewModel / Model 中定义“事件” ,并在View中调用 (无参数调用)

    今天学习MVVM架构中“事件”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华 的 利刃 MVVMLight 6:命令基础 在MVVM Light框架中,事件是WPF应用程序中UI与后台 ...

  4. Mvvm Light Toolkit 入门

    原文:Mvvm Light Toolkit 入门 前言 之前学习UWP的时候就一直看到有关MVVM的资料但是一直没有系统的去学,最近正好有时间,特地来攻破这个点,顺便学习一下VS与GitHub的链接和 ...

  5. 【MVVM Light】Messager的使用

    一.前言       在MVVM编程的模式中,有时候我们会遇到一个很尴尬的情况: 若干个xaml.cs都复用一个ViewModel,当ViewModel想传递一个特定的消息给某一个xaml.cs的时候 ...

  6. Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架

    Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架   本章节,我将通过示例介绍如何搭建mvvmlight开发环境.示例中的我会针对wpf ...

  7. MVVM Light须要注意的10个问题

    MVVM Light须要注意的10个问题 从使用XAML技术基础開始(实际上并非非常久曾经).我便关注MVVM(Model – View – ViewModel)模式.偶然接触到MVVM Light不 ...

  8. WPF: WpfWindowToolkit 一个窗口操作库的介绍

    在 XAML 应用的开发过程中,使用MVVM 框架能够极大地提高软件的可测试性.可维护性.MVVM的核心思想是关注点分离,使得业务逻辑从 View 中分离出来到 ViewModel 以及 Model ...

  9. MVVM Light Toolkit使用指南

    原文:MVVM Light Toolkit使用指南 原文地址:  https://blog.csdn.net/ldld1717/article/details/77040077 概述 MVVM Lig ...

随机推荐

  1. [Android]使用platform密钥来给apk文件签名的命令

    1.使用platform密钥对apk进行签名 1.1.进入<Android_Source_Path>/build/target/product/security,找到[platform.p ...

  2. 监控mysql索引使用效率的脚本

      SELECT  t.table_schema AS db,  t.table_name   AS tab_name,  s.index_name   AS index_name,  s.colum ...

  3. TRUNCATE TABLE 与 DELETE table 区别

    语法 TRUNCATE TABLE name;参数  TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行. TRUNCATE TABLE ...

  4. Android SmsManager 发送短信

    SmsManager可以在后台发送短信,无需用户操作,开发者就用这个SmsManager功能在后台偷偷给SP发短信,导致用户话费被扣.必须添加android.permission.SEND_SMS权限 ...

  5. 更改Mysql数据库存储位置的具体步骤

    首先把mysql的服务先停掉,更改MySQL配置文件My.ini中的数据库存储主路径,将老的数据库存储主路径中的数据库文件和文件夹复制到新的存储主路径,接下来重启搞定     一.首先把mysql的服 ...

  6. mongo数据管理java简易版

    mongo是搭建在局域网服务器上的,处理起来比较麻烦,于是自己写了个简单的处理工具. 如果有对java操作mongo不太了解的也可以在这里看下简单的示例. 只有增删改查的功能,而且只支持json格式的 ...

  7. Android开发之异步获取并下载网络资源-下载图片和下载文本内容

    在android网络开发过程中,经常需要获取网络资源,比如下载图片,下载文本文件内容等,这个时候就需要http请求来获取相应的网络资源.首先看看实例效果图:              下载图片截图   ...

  8. flex学习网站地址

    http://hacker47.iteye.com/blog/213887 http://www.cuplayer.com/player/PlayerCode/Flex/ http://bbs.9ri ...

  9. xml、xhtml、html、dhtml的区别

    1.XML 可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言. 可扩展标记语言可以对文档和数据进行结构化处理,从而能够在部门.客户和供应商之间进行交换,实现动态内 ...

  10. 使用ICSharpZipLib将文件夹压缩为zip文件

    序言:     在我接触Git和SVN之前,我最常用的保存数据的办法就是把文件夹压缩成一个zip文件,添加上时间戳.下面是我在学习C#的文件操作之后做的一个练习,使用开源的ICSharpZipLib来 ...