ContentControl 与 ViewModel （一）

时间：2014-09-07 23:41:56 阅读：303 评论：0 收藏：0 [点我收藏+]

标签：des style blog http color os io 使用 ar

前阵子有人问我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>