ContentControl 与 ViewModel (一)

前阵子有人问我MVVM模式下,在View中嵌套View,切换View。想一想还是写下来吧。

主要就是用到 ContentControl 和 DataTemplate,这算是一种 ViewModel First 的思想吧。

其实好多MVVM的框架,也都提供这样的功能。在ContentControl绑定ViewModel,就可以显示 对应的View。比如 Caliburn.Micro(CM框架).

MVVMLight应该是没有提供的,对他我本身不是很熟,以前知道他很轻,看过原码,真心没有多少,最近在RT中用了下,发现它也加入了IOC的东东。

以下代码没用使用任何第三方框架。

using System.Windows.Input;

namespace ContentDemo
{
    // ViewModelBase 只是实现了 INotifyPropertyChanged
    class MainViewModel : ViewModelBase
    {     // 如果有IOC这块的东西 可以用IOC代替。
        private readonly FirstViewModel _firstViewModel = new FirstViewModel();
        private readonly SecondViewModel _secondViewModel = new SecondViewModel();

        private object _viewModel;

        /// <summary>
        /// 要绑定和切换的ViewModel
        /// </summary>
        public object ViewModel
        {
            get { return _viewModel; }
            set
            {
                if (_viewModel == value)
                {
                    return;
                }

                _viewModel = value;
                OnPropertyChanged();
            }
        }

        // 下面两个 Command只是为了 切换 ViewModel用的。

        private ICommand _firstCommand;

        public ICommand FirstCommand
        {
            get
            {
                return _firstCommand = _firstCommand ?? new DelegateCommand(obj =>
                    {
                        ViewModel = _firstViewModel;
                    });
            }
        }

        private ICommand _secondCommand;

        public ICommand SecondCommand
        {
            get
            {
                return _secondCommand = _secondCommand ?? new DelegateCommand(obj =>
                    {
                        ViewModel = _secondViewModel;
                    });
            }
        }
    }
}

这个是ViewModel的代码,ViewModel OK啦,我们就来写View了。

<Window x:Class="ContentDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ContentDemo"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:MainViewModel x:Key="MainViewModel" />
        <DataTemplate DataType="{x:Type local:FirstViewModel}">
            <local:FirstView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:SecondViewModel}">
            <local:SecondView />
        </DataTemplate>
    </Window.Resources>
    <Grid DataContext="{StaticResource MainViewModel}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ContentControl Grid.ColumnSpan="2" Content="{Binding Path=ViewModel}" />
        <Button Grid.Row="1" Grid.Column="0" Content="ViewModel  1" Command="{Binding Path=FirstCommand}"/>
        <Button Grid.Row="1" Grid.Column="1" Content="ViewModel  2" Command="{Binding Path=SecondCommand}"/>
    </Grid>
</Window>

其实这也没什么,关键的地方就是,ContentControl的Content要绑定ViewModel,这是用来显示和切换ViewModel对应的View的。

在资源中加入DataTempalte,DataType设置成ViewModel的类型,DataTemplate 写上你的View,只样就可以自动匹配的你ViewModel啦。

注:在WinRT中的DataTemplate是没有DataType属性的,SL里有没有,我记不住了。可以用我最下面说的办法来弄。

下在是 二个ViewModel和View的代码,都很简答,就是为了展示一下。

    class FirstViewModel
    {
        public string Content { get; set; }

        public FirstViewModel()
        {
            Content = "第一个ViewModel";
        }
    }

    class SecondViewModel
    {
        public string Content { get; set; }

        public SecondViewModel()
        {
            Content = "第二个ViewModel";
        }
    }
<UserControl x:Class="ContentDemo.FirstView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Border Background="DarkGray">
            <TextBlock Text="{Binding Path=Content}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
        </Border>
    </Grid>
</UserControl>
<UserControl x:Class="ContentDemo.SecondView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Border Background="DarkMagenta">
            <TextBlock Text="{Binding Path=Content}"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
        </Border>
    </Grid>
</UserControl>

这样,我们切换MailViewModel中的ViewModel的时候,就会换成不同的UI了,DataTemplate 中内容的DataContext 也会是相应的ViewModel。

写的很不好,我的语文虽然不是体育老师交的,也是数学老教交出来的。

还是直接源码吧:Code

源码是2013写的,打不开的自行修改 项目文件或复制源码到新项目吧。

可能现在有人发现了,这样每一个用到的ViewModel和都至少写上一个DataTemplate,这样很不爽,重复的代码太多啦。

下一步的关键就是 DataTemplateSelector。说到这个,大家可能就会了,下篇再分解吧。嘿嘿

转载请注明出处:http://www.cnblogs.com/gaoshang212/p/3960874.html

时间: 2024-10-13 02:45:38

ContentControl 与 ViewModel (一)的相关文章

ContentControl 与 ViewModel (二)

上文说到 可以使用DataTemplateSelector. 其实等于是用 DataTemplateSelector + 动态创建DataTemplate来实现. using System; using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Markup; namespace ContentDemo { class ContentD

WPF:MVVM模式下ViewModel关闭View

不外乎两种基本方法. 消息通知和参数传递. 一.消息通知 利用View里的IsEnable属性 原理是这样的: 1.UI中的IsEnabled绑定VM中的属性 2.UI的后台代码中,注册IsEnableChange事件,在这个事件里,检测到传过来的值满足某个条件,即可触发Close()命令 如此,VM控制自己那个属性就能达到关闭V的目的了. 二.参数传递. 根据参数传递的不同.分为传递函数和传递View对象. 1传递函数 该方法:需要三步. 1.重写ViewModel的构造函数 public P

材料管理框架:一个共通的viewModel搞定所有的分页查询

前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出来,再写查询时只要引入我共通的东西,再加上极少的代码就能完成.我个人比较崇尚代码简洁干净,有不合理的地方欢迎大家指出. 这篇文章主要介绍两个重点:1.前台viewModel的实现.2.后台服务端如何简洁的处理查询请求. 需求分析 查询页面要有哪些功能呢 1.有条件部输入查询条件(这个不打算做成共通的

WPF MVVM中在ViewModel中关闭或者打开Window

这篇博客将介绍在MVVM模式ViewModel中关闭和打开View的方法. 1. ViewModel中关闭View public class MainViewModel { public DelegateCommand<Window> CloseWindowCommand { get; private set; } public MainViewModel() { CloseWindowCommand = new DelegateCommand<Window>(CloseWindo

转:[Silverlight入门系列]使用MVVM模式(9): 想在ViewModel中控制TreeView节点展开?

很多童鞋看了我的博客以后也去实践MVVM,但却发现Silverlight实践中的MVVM很难实现,比纯粹的CodeBehind难度大很多.首先是原来在xaml.cs的CodeBehind部分很容易控制界面逻辑,现在这部分逻辑移到ViewModel里面去了以后,就很难调用CodeBind的部分;其次是很多View和ViewModel.或者一个ViewModel多个View,他们之间如何通 很多童鞋看了我的博客以后也去实践MVVM,但却发现Silverlight实践中的MVVM很难实现,比纯粹的Co

MVVM下 利用反射动态创建ViewModel 实现单例

在MVVM一般情况下都会希望ViewModel 在整个应用程序中只有一份实例 传统的做法是用单例模式去实现 : public class ViewModelTest { private ViewModelTest() { } private static ViewModelTest viewModelInstace; public static ViewModelTest GetViewModelTestInstace() { if (viewModelInstace == null) { vi

ViewModel处理View相关事件的多种方式(非技术贴,仅学习总结)

众所周知,在UWP中,微软为我们提供了一种新的绑定方式:x:bind,它是基于编译时的绑定.在性能方面,运行时绑定Binding与它相比还是有些逊色的.因此针对一些确定的.不需要变更的数据,我们完全有理由来使用X:bind进行绑定.(当然,如果你不在乎程序性能的话就没必要继续往下看了!) 悉MVVM的朋友都知道,我们常常遇到这样一种情况:我们需要为一个控件绑定一个ViewModel中的Command,但是这个控件并没有Command属性?笼统的解决方法有很多,我这里大致列举几种常用的解决方法:

WPF系列之二:解耦View层控件事件与ViewModel层事件的响应

以前的做法: 1.当项目的时间比较紧迫的时候,对UI层中控件的事件的处理,往往采取的是类似Winform中最简单的做法,直接做一个事件的Handler直接去调用VM层的方法. 2.控件只有一个Command属性,其它的事件的处理方法没有办法和ViewModel层进行解耦的时候往往也采取上面提到的方法. 如下图所示: 新的做法: 为了实现事件的处理与View层的解耦,我们可以利用WPF提供的附加属性来为需要的事件添加附加行为.附加属性扮演了一个在View层与Model层牵线的角色. 需要下面三个步

利刃 MVVMLight 2:Model、View、ViewModel结构以及全局视图模型注入器的说明

上一篇我们已经介绍了如何使用NuGet把MVVMLight应用到我们的WPF项目中.这篇我们来了解下一个基本的MVVMLight框架所必须的结构和运行模式. MVVMLight安装之后,我们可以看到简易的框架布局,如上篇,生成了一个ViewModel文件夹,ViewModel层的内容都放在这边,除了Main对象的ViewModel之外,还包含一个ViewModelLocator文件, 用来注入当前的ViewModel全局实例. 一.先来说说分层结构: 如图: 1.View负责前端展示,与View