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的文章,希望大家多多支持,多交流。
MVVM Light 一个窗口承载两个视图的更多相关文章
- 一个ActionResult中定位到两个视图—<团委项目>
在使用MVC做项目的时候一般的情况就是一个ActionResult一个视图,这样对应的Return View();就可以找到下面对应的视图,这是根据一个原则,"约定大于配置&quo ...
- 一个ActionResult中定位到两个视图—<团委项目>
在使用MVC做项目的时候一般的情况就是一个ActionResult一个视图,这样对应的Return View();就可以找到下面对应的视图,这是根据一个原则,“约定大于配置”,但是我们有的时候需要在一 ...
- MVVM Light 新手入门(3) :ViewModel / Model 中定义“事件” ,并在View中调用 (无参数调用)
今天学习MVVM架构中“事件”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华 的 利刃 MVVMLight 6:命令基础 在MVVM Light框架中,事件是WPF应用程序中UI与后台 ...
- Mvvm Light Toolkit 入门
原文:Mvvm Light Toolkit 入门 前言 之前学习UWP的时候就一直看到有关MVVM的资料但是一直没有系统的去学,最近正好有时间,特地来攻破这个点,顺便学习一下VS与GitHub的链接和 ...
- 【MVVM Light】Messager的使用
一.前言 在MVVM编程的模式中,有时候我们会遇到一个很尴尬的情况: 若干个xaml.cs都复用一个ViewModel,当ViewModel想传递一个特定的消息给某一个xaml.cs的时候 ...
- Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架
Mvvm Light Toolkit for WPF/Silverlight系列之搭建mvvmlight开发框架 本章节,我将通过示例介绍如何搭建mvvmlight开发环境.示例中的我会针对wpf ...
- MVVM Light须要注意的10个问题
MVVM Light须要注意的10个问题 从使用XAML技术基础開始(实际上并非非常久曾经).我便关注MVVM(Model – View – ViewModel)模式.偶然接触到MVVM Light不 ...
- WPF: WpfWindowToolkit 一个窗口操作库的介绍
在 XAML 应用的开发过程中,使用MVVM 框架能够极大地提高软件的可测试性.可维护性.MVVM的核心思想是关注点分离,使得业务逻辑从 View 中分离出来到 ViewModel 以及 Model ...
- MVVM Light Toolkit使用指南
原文:MVVM Light Toolkit使用指南 原文地址: https://blog.csdn.net/ldld1717/article/details/77040077 概述 MVVM Lig ...
随机推荐
- Ubuntu 12.04 升级到14.04之后,pidgin-sipe 出现的问题: Trouble with the pidgin and self-signed SSL certificate
Once again, I run into trouble when upgrading my LinuxMint. In last few days, my Linux mint notifies ...
- Ubuntu Server 12.04 静态IP简洁配置
PS:很长时间没使用Ubuntu了,刚才安装个Ubuntu Server 12.04做测试.Ubuntu的网络设置跟Redhat系是不一样的,配置IP时发现跟以前的Ubuntu桌面版本也有所不同,记录 ...
- tomcat安全配置之证书密码加密存储
最近项目组要完成一个新Web Servicer接口的开发,其中有项要求是支持外部客户程序以https方式访问这些SOAP接口.项目组当前基于tomcat6.0.29开发,axis版本为1.4.拿到这个 ...
- 【转】C++里定义全局变量和函数常用方法
http://blog.csdn.net/niying/article/details/637084 1:在头文件是声明变量,然后在使用的文件中用exten标识. ".h": in ...
- cocos2d-x 2.1.4学习笔记01:windows平台搭建cocos2d-x开发环境
cocos2d-x的大致开发流程是,首先使用win32版进行代码编写并完成游戏,然后将代码迁移到对应的开发环境上进行交叉编译完成游戏打包,如iphone上是mac+xcode,android是ecli ...
- To Be NUMBER ONE
Problem Description One is an interesting integer. This is also an interesting problem. You are assi ...
- UPDATE sql 优化
一个网友说他的存储过程中有一段update sql,运行了15分钟还没出结果,需要优化一下 他把sql发给我 UPDATE TB_RESULT R SET R.VOTE_COUNT=NVL(( SEL ...
- [置顶] asp.net(c#)中相对路径(虚拟路径)和物理磁盘路径的转换
物理路径就是磁盘路径,也就是说是在磁盘上的位置,虚拟路径也就是web页面上的路径,是相对于应用程序而言的 /// <summary> /// 将物理路径转换成相对路径 /// </s ...
- Nginx高性能服务器安装、配置、运维 (3) —— Nginx配置详解
四.Nginx 配置详解 YUM方式安装的Nginx默认配置文件放在/etc/nginx目录下,使用Vim编辑/etc/nginx/nginx.conf: ---------------------- ...
- Netty 5用户指南
Netty是一个提供异步事件驱动的网络应用框架,用以快速开发高性能.高可靠性的网络服务器和客户端程序.换句话说,Netty是一个NIO框架,使用它可以简单快速地开发网络应用程序,比如客户端和服务端的协 ...