Contentcontrol and viewmodel (1)

Some people asked me a few times ago, in mvvm mode, to nest the view in the view and switch the view. Write it down.

Contentcontrol and datatemplate are mainly used. This is a viewmodel first idea.

In fact, many mvvm frameworks also provide such functions. Bind viewmodel to contentcontrol to display the corresponding view. For example, Caliburn. Micro (CM framework ).

Mvvmlight should have not been provided. I am not very familiar with him. I used to know that he was very light and saw the original code. I really didn't know much about it. I recently used it in RT, it was found that it was also added to the IOC stuff.

The following code does not use any third-party framework.

Using system. Windows. input; namespace contentdemo {// viewmodelbase only implements inotifypropertychanged class mainviewmodel: viewmodelbase {
// If there is IOC, it can be replaced by IOC. Private readonly firstviewmodel _ firstviewmodel = new firstviewmodel (); Private readonly secondviewmodel _ secondviewmodel = new secondviewmodel (); Private object _ viewmodel; /// <summary> /// viewmodel to be bound and switched // </Summary> Public object viewmodel {get {return _ viewmodel ;} set {If (_ viewmodel = value) {return ;}_ viewmodel = value; onpropertychanged () ;}// the following two commands are only used to switch 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 ;});}}}}

This is the viewmodel code. The viewmodel is OK. Let's write the 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>    

In fact, this is nothing. The key point is that the content of contentcontrol should be bound to viewmodel, which is used to display the view corresponding to switching viewmodel.

Add datatempalte to the resource. datatype is set to the viewmodel type. emplate writes your view, and you can automatically match your viewmodel.

Note: The datatemplate in winrt does not have the datatype attribute. Is there any in SL? I can't remember it. It can be done in the following way.

The following are two viewmodel and view codes. They are all very simple to show.

Class firstviewmodel {Public String content {Get; set;} public firstviewmodel () {content = "first viewmodel" ;}} class secondviewmodel {Public String content {Get; set ;} public secondviewmodel () {content = "second 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>

 

In this way, the viewmodel in mailviewmodel will be changed to different UIS, And the datacontext in the datatemplate will also be the corresponding viewmodel.

 

I did not write very well. Although my language was not handed in by a PE teacher, it was also handed in by the old mathematics teacher.

Directly source code: Code

The source code is 2013. If you cannot open it, modify the project file or copy the source code to the new project.

 

 

Some people may have discovered that every viewmodel and each viewmodel used should be written with at least one ememplate. This is unpleasant and there are too many repeated code.

The next step is datatemplateselector. Speaking of this, you may be able to break it down in the next article. Hey

 

Reprinted please indicate the source: http://www.cnblogs.com/gaoshang212/p/3960874.html

Contentcontrol and viewmodel (1)