Простая навигация в WPF используя MVVM

В прошлой статье мы сделали иерархический элемент TreeView наполненный разными объектами. В этой статье мы увидим, как перемещаться по различным пользовательским элементам управления, отображая их данные в ContentControl.

У нас есть стандартное приложение с иерархическим списком объектов. В нашем случае это Города, Улицы и дома. При выборе города должны отобразится свойства этого города. Если же мы перейдем на другой объект, будь то другой город, улица или дом,  то содержимое должно замениться на соответствующие текущему объекту.

Макет главного окна имеет TreeView с левой стороны дескриптора и ContentControl с правой стороны для отображения соответствующего объекта.

Шаг 1 Создание ExtendedTreeView. Модификация стандартного TreeView, для получения выделенного объекта.

1. Создадим новый класс и назовем его ExtendedTreeView, который будет наследоваться от TreeView.
2. Содержимое класса
   
   ExtendedTreeView.cs

   C#

   public class ExtendedTreeView : TreeView { public ExtendedTreeView() : base() { this.SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(___ICH); } void ___ICH(object sender, RoutedPropertyChangedEventArgs<object> e) { if (SelectedItem != null) { SetValue(SelectedItem_Property, SelectedItem); } } public object SelectedItem_ { get { return (object)GetValue(SelectedItem_Property); } set { SetValue(SelectedItem_Property, value); } } public static readonly DependencyProperty SelectedItem_Property = DependencyProperty.Register("SelectedItem_", typeof(object), typeof(ExtendedTreeView), new UIPropertyMetadata(null)); }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   public class ExtendedTreeView : TreeView     {         public ExtendedTreeView()             : base()         {             this.SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(___ICH);         }           void ___ICH(object sender, RoutedPropertyChangedEventArgs<object> e)         {             if (SelectedItem != null)             {                 SetValue(SelectedItem_Property, SelectedItem);             }         }           public object SelectedItem_         {             get { return (object)GetValue(SelectedItem_Property); }             set { SetValue(SelectedItem_Property, value); }         }         public static readonly DependencyProperty SelectedItem_Property = DependencyProperty.Register("SelectedItem_", typeof(object), typeof(ExtendedTreeView), new UIPropertyMetadata(null));     }

3. В файл MainWindowViewModel.cs добавим новое свойство — Item (object). В это свойство будет передаваться выбранный объект.
   
   MainWindowViewModel.cs

   C#

   private item public object Item { get { return _item; } set { _item = value; OnPropertyChanged("Item"); } }

   1 2 3 4 5 6

   private item public object Item {     get { return _item; }     set { _item = value; OnPropertyChanged("Item"); } }

   
    
4. Заменим стандартный элемент TreeView в MainWindowView.xaml. И забиндим поле Item в наш добавленный параметр SelectedItem_
   
   C#

   <local:ExtendedTreeView HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch" ItemsSource="{Binding CityList}" SelectedItem_="{Binding Path=Item, Mode=TwoWay}">

   1 2 3

   <local:ExtendedTreeView HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch"                   ItemsSource="{Binding CityList}"                   SelectedItem_="{Binding Path=Item, Mode=TwoWay}">

   
    

Шаг 2 Создадим ViewModel для объектов:

1. Создадим в проекте папку ViewModels.
2. Добавим в папку новый класс CityViewModel
   1. Укажем поле SelectedCity — Выбранный город
   2. Конструктор принимает объект типа City и сохраняет его в поле SelectedCity
   3. Код класса
      
      C#

      using TreeViewMVVMExample.Models; namespace TreeViewMVVMExample.ViewModels { public class CityViewModel : ViewModelBase { private City _city; public City SelectedCity { get { return _city; } set { _city = value; OnPropertyChanged("City"); } } public CityViewModel(City city) { _city = city; } } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

      using TreeViewMVVMExample.Models;   namespace TreeViewMVVMExample.ViewModels {     public class CityViewModel : ViewModelBase     {         private City _city;         public City SelectedCity { get { return _city; } set { _city = value; OnPropertyChanged("City"); } }                  public CityViewModel(City city)         {             _city = city;         }     } }

3. Добавим новый класс StreetViewModel
   1. Укажем поле StreetName — Наименование улицы
   2. Конструктор принимает объект типа Street и сохраняет его в поле StreetName
   3. Код класса
      
      C#

      using TreeViewMVVMExample.Models; namespace TreeViewMVVMExample.ViewModels { public class StreetViewModel:ViewModelBase { private Street _selectedStreet; public Street SelectedStreet { get { return _selectedStreet; } set { _selectedStreet = value; OnPropertyChanged("SelectedStreet"); } } public StreetViewModel(Street street) { _selectedStreet = street; } } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14

      using TreeViewMVVMExample.Models;   namespace TreeViewMVVMExample.ViewModels {     public class StreetViewModel:ViewModelBase     {         private Street _selectedStreet;         public Street SelectedStreet { get { return _selectedStreet; } set { _selectedStreet = value; OnPropertyChanged("SelectedStreet"); } }         public StreetViewModel(Street street)         {             _selectedStreet = street;         }     } }

      
       
4. Добавим новый класс HouseViewModel
   1. Укажем поле HouseName — Номер дома
   2. Конструктор принимает объект типа House и сохраняет его в поле StreetName
   3. Код класса
      
      C#

      using TreeViewMVVMExample.Models; namespace TreeViewMVVMExample.ViewModels { public class HouseViewModel:ViewModelBase { private House _selectedHouse; public House SelectedHouse { get { return _selectedHouse; } set { _selectedHouse= value; OnPropertyChanged("HouseNumber"); } } public HouseViewModel(House house) { _selectedHouse = house; } } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14

      using TreeViewMVVMExample.Models;   namespace TreeViewMVVMExample.ViewModels {     public class HouseViewModel:ViewModelBase     {         private House _selectedHouse;         public House SelectedHouse { get { return _selectedHouse; } set { _selectedHouse= value; OnPropertyChanged("HouseNumber"); } }         public HouseViewModel(House house)         {             _selectedHouse = house;         }     } }

      
       

Шаг 3 добавим UserControls для наших объектов:

1. Создадим папку Views
2. Добавим новый  пользовательский  элемент  управления в папку  Views.  CityView.xaml
   
   CityView.xaml

   C#

   <UserControl x:Class="TreeViewMVVMExample.Views.CityView" 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" xmlns:local="clr-namespace:TreeViewMVVMExample.Views" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <Border CornerRadius="20" BorderBrush="Black" BorderThickness="1" Background="Red"/> <StackPanel Margin="20" Background="Gray"> <TextBlock Text="Это пример для города" Foreground="#FFD41A1A" FontSize="20" FontStyle="Oblique" FontFamily="Blackadder ITC"/> <TextBlock Text="{Binding SelectedCity.CityName }" FontSize="20" Margin="10" HorizontalAlignment="Center"/> </StackPanel> </Grid> </UserControl>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <UserControl x:Class="TreeViewMVVMExample.Views.CityView"              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"              xmlns:local="clr-namespace:TreeViewMVVMExample.Views"              mc:Ignorable="d"              d:DesignHeight="450" d:DesignWidth="800">     <Grid>         <Border CornerRadius="20" BorderBrush="Black" BorderThickness="1" Background="Red"/>         <StackPanel  Margin="20" Background="Gray">             <TextBlock Text="Это пример для города" Foreground="#FFD41A1A" FontSize="20"  FontStyle="Oblique" FontFamily="Blackadder ITC"/>             <TextBlock Text="{Binding SelectedCity.CityName }" FontSize="20" Margin="10" HorizontalAlignment="Center"/>         </StackPanel>     </Grid> </UserControl>

3. Так же нужно создать пользовательские элементы для других объектов. Вот код для StreetView.xaml
   
   C#

   <UserControl x:Class="TreeViewMVVMExample.Views.StreetView" 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" xmlns:local="clr-namespace:TreeViewMVVMExample.Views" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <StackPanel Margin="20" Background="Bisque"> <TextBlock Text="Это пример для Улицы" Foreground="#FFD41A1A" FontSize="16" /> <TextBlock Text="{Binding SStreet.StreetName}" FontSize="20" Margin="10" HorizontalAlignment="Center"/> </StackPanel> </Grid> </UserControl>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <UserControl x:Class="TreeViewMVVMExample.Views.StreetView"              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"              xmlns:local="clr-namespace:TreeViewMVVMExample.Views"              mc:Ignorable="d"              d:DesignHeight="450" d:DesignWidth="800">     <Grid>         <StackPanel Margin="20" Background="Bisque">             <TextBlock Text="Это пример для Улицы" Foreground="#FFD41A1A" FontSize="16" />             <TextBlock Text="{Binding SStreet.StreetName}" FontSize="20" Margin="10" HorizontalAlignment="Center"/>         </StackPanel>     </Grid> </UserControl>

   
    
4. Код для HouseView.xaml
   
   C#

   <UserControl x:Class="TreeViewMVVMExample.Views.HouseView" 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" xmlns:local="clr-namespace:TreeViewMVVMExample.Views" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <StackPanel Margin="20" Background="CadetBlue"> <TextBlock Text="Это пример для Дома" Foreground="#FFD41A1A" FontSize="16" /> <TextBlock Text="{Binding SHouse.HouseNumber}" FontSize="20" Margin="10" HorizontalAlignment="Center"/> </StackPanel> </Grid> </UserControl>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <UserControl x:Class="TreeViewMVVMExample.Views.HouseView"              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"              xmlns:local="clr-namespace:TreeViewMVVMExample.Views"              mc:Ignorable="d"              d:DesignHeight="450" d:DesignWidth="800">     <Grid>         <StackPanel Margin="20" Background="CadetBlue">             <TextBlock Text="Это пример для Дома" Foreground="#FFD41A1A" FontSize="16" />             <TextBlock Text="{Binding SHouse.HouseNumber}" FontSize="20" Margin="10" HorizontalAlignment="Center"/>         </StackPanel>     </Grid> </UserControl>

   
    

Шаг 4 Создание DataTemplate в файле MainWindow.xaml

1. ‎Создайте DataTemplate типа CityViewModel, который должен содержать в себе элемент управления CityView.
   
   C

   <DataTemplate DataType="{x:Type viewmodel:CityViewModel}"> <view:CityView/> </DataTemplate>

   1 2 3

   <DataTemplate DataType="{x:Type viewmodel:CityViewModel}">     <view:CityView/> </DataTemplate>

   
    
2. Аналогично нужно добавить DataTemplate для типа StreetViewModel, которой содержит в себе элемент управления StreetView
   
   C#

   <DataTemplate DataType="{x:Type viewmodel:StreetViewModel}"> <view:StreetView/> </DataTemplate>

   1 2 3

   <DataTemplate DataType="{x:Type viewmodel:StreetViewModel}">      <view:StreetView/> </DataTemplate>

   
    
3. И  для типа HouseViewModel, с элементом управления HouseView
   
   C#

   <DataTemplate DataType="{x:Type viewmodel:HouseViewModel}"> <view:HouseView/> </DataTemplate>

   1 2 3

   <DataTemplate DataType="{x:Type viewmodel:HouseViewModel}">    <view:HouseView/> </DataTemplate>

   
    

Шаг 5 Отредактируем файл MainWindow.Xaml

1. ‎Подключите ссылки на папки viewmodel и view.
   
   xmlns:viewmodel="clr-namespace:TreeViewMVVMExample.ViewModels" xmlns:view="clr-namespace:TreeViewMVVMExample.Views"

   1 2	xmlns:viewmodel="clr-namespace:TreeViewMVVMExample.ViewModels" xmlns:view="clr-namespace:TreeViewMVVMExample.Views"

2. Добавьте вышеуказанные Шаблоны данных(DataTemplate) в качестве ресурсов MainWindow.
   
   <Window.Resources> <DataTemplate DataType="{x:Type viewmodel:CityViewModel}"> <view:CityView/> </DataTemplate> <DataTemplate DataType="{x:Type viewmodel:StreetViewModel}"> <view:StreetView/> </DataTemplate> <DataTemplate DataType="{x:Type viewmodel:HouseViewModel}"> <view:HouseView/> </DataTemplate> </Window.Resources>

   1 2 3 4 5 6 7 8 9 10 11

   <Window.Resources>         <DataTemplate DataType="{x:Type viewmodel:CityViewModel}">             <view:CityView/>         </DataTemplate>         <DataTemplate DataType="{x:Type viewmodel:StreetViewModel}">             <view:StreetView/>         </DataTemplate>         <DataTemplate DataType="{x:Type viewmodel:HouseViewModel}">             <view:HouseView/>         </DataTemplate> </Window.Resources>

   
    
3. Добавьте ContentControl, который будет действовать как контейнер, и после завершения навигации соответствующий UserControl будет помещен в этот ContentControl.‎
   
   <StackPanel Grid.Column="1"> <ContentControl x:Name="Pages" Content="{Binding SelectedViewModel}"/> </StackPanel>

   1 2 3

   <StackPanel Grid.Column="1">     <ContentControl x:Name="Pages" Content="{Binding SelectedViewModel}"/> </StackPanel>

   
    
4. Код класса
   
   C#

   <Window x:Class="TreeViewMVVMExample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:TreeViewMVVMExample" xmlns:viewmodel="clr-namespace:TreeViewMVVMExample.ViewModels" xmlns:view="clr-namespace:TreeViewMVVMExample.Views" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <DataTemplate DataType="{x:Type viewmodel:CityViewModel}"> <view:CityView/> </DataTemplate> <DataTemplate DataType="{x:Type viewmodel:StreetViewModel}"> <view:StreetView/> </DataTemplate> <DataTemplate DataType="{x:Type viewmodel:HouseViewModel}"> <view:HouseView/> </DataTemplate> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <local:ExtendedTreeView HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch" ItemsSource="{Binding CityList}" SelectedItem_="{Binding Path=Item, Mode=TwoWay}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding StreetList}"> <Label Content="{Binding CityName}"/> <HierarchicalDataTemplate.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Houses}"> <Label Content="{Binding StreetName}"/> <HierarchicalDataTemplate.ItemTemplate> <DataTemplate> <Label Content="{Binding HouseNumber}"/> </DataTemplate> </HierarchicalDataTemplate.ItemTemplate> </HierarchicalDataTemplate> </HierarchicalDataTemplate.ItemTemplate> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </local:ExtendedTreeView> <StackPanel Grid.Column="1"> <ContentControl x:Name="Pages" Content="{Binding SelectedViewModel}"/> </StackPanel> </Grid> </Window>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

   <Window x:Class="TreeViewMVVMExample.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:TreeViewMVVMExample"         xmlns:viewmodel="clr-namespace:TreeViewMVVMExample.ViewModels"         xmlns:view="clr-namespace:TreeViewMVVMExample.Views"         mc:Ignorable="d"         Title="MainWindow" Height="450" Width="800">     <Window.Resources>         <DataTemplate DataType="{x:Type viewmodel:CityViewModel}">             <view:CityView/>         </DataTemplate>         <DataTemplate DataType="{x:Type viewmodel:StreetViewModel}">             <view:StreetView/>         </DataTemplate>         <DataTemplate DataType="{x:Type viewmodel:HouseViewModel}">             <view:HouseView/>         </DataTemplate>     </Window.Resources>     <Grid>         <Grid.ColumnDefinitions>             <ColumnDefinition/>             <ColumnDefinition/>         </Grid.ColumnDefinitions>         <local:ExtendedTreeView HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch"                   ItemsSource="{Binding CityList}"                   SelectedItem_="{Binding Path=Item, Mode=TwoWay}">             <TreeView.ItemTemplate>                 <HierarchicalDataTemplate ItemsSource="{Binding StreetList}">                     <Label Content="{Binding CityName}"/>                     <HierarchicalDataTemplate.ItemTemplate>                         <HierarchicalDataTemplate ItemsSource="{Binding Houses}">                             <Label Content="{Binding StreetName}"/>                             <HierarchicalDataTemplate.ItemTemplate>                                 <DataTemplate>                                     <Label Content="{Binding HouseNumber}"/>                                 </DataTemplate>                             </HierarchicalDataTemplate.ItemTemplate>                         </HierarchicalDataTemplate>                     </HierarchicalDataTemplate.ItemTemplate>                 </HierarchicalDataTemplate>             </TreeView.ItemTemplate>         </local:ExtendedTreeView>         <StackPanel Grid.Column="1">             <ContentControl x:Name="Pages" Content="{Binding SelectedViewModel}"/>         </StackPanel>             </Grid> </Window>

   
    

Шаг 6 Добавление функционала в MainWindowViewModel.cs

1. Добавим поле SelectedViewModel для отображения
2. Создадим метод для навигации по моделям.
   
   C#

   private void openViewModel(object obj) { if (obj.GetType() == typeof(City)) SelectedViewModel = new CityViewModel((City)obj); else if (obj.GetType() == typeof(Street)) SelectedViewModel = new StreetViewModel((Street)obj); else if (obj.GetType() == typeof(House)) SelectedViewModel = new HouseViewModel((House)obj); }

   1 2 3 4 5 6 7 8 9

   private void openViewModel(object obj)         {                         if (obj.GetType() == typeof(City))                 SelectedViewModel = new CityViewModel((City)obj);             else if (obj.GetType() == typeof(Street))                           SelectedViewModel = new StreetViewModel((Street)obj);                         else if (obj.GetType() == typeof(House))                 SelectedViewModel = new HouseViewModel((House)obj);         }

   
    
3. При изменении поля Item, т.е при выборе элемента из TreeView, будет вызываться метод, который загрузит в ContentControl соответствующий элемент управления
   
   C#

   set { _item = value; OnPropertyChanged("Item"); openViewModel(value); }

   1 2 3 4 5

   set {     _item = value;    OnPropertyChanged("Item");    openViewModel(value);    }

   
    
4. Код класса MainWindowViewModel.cs
   
   C#

   using System; using System.Collections.Generic; using System.Text; using TreeViewMVVMExample.Models; using System.Diagnostics; namespace TreeViewMVVMExample.ViewModels { public class MainWindowViewModel : ViewModelBase { private List<City> cityList; private object _item; private object selectedViewModel; public object SelectedViewModel { get { return selectedViewModel; } set { selectedViewModel = value; OnPropertyChanged("SelectedViewModel"); } } public object Item { get { return _item; } set { _item = value; OnPropertyChanged("Item"); openViewModel(value); } } public List<City> CityList { get { return cityList; } set { cityList = value; OnPropertyChanged("CityList"); } } public MainWindowViewModel() { cityList = new List<City>() { new City("Город 1"), new City("Город 2"), new City("Город 3"), new City("Город 4"), }; } private void openViewModel(object obj) { if (obj.GetType() == typeof(City)) SelectedViewModel = new CityViewModel((City)obj); else if (obj.GetType() == typeof(Street)) SelectedViewModel = new StreetViewModel((Street)obj); else if (obj.GetType() == typeof(House)) SelectedViewModel = new HouseViewModel((House)obj); } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

   using System; using System.Collections.Generic; using System.Text; using TreeViewMVVMExample.Models; using System.Diagnostics;   namespace TreeViewMVVMExample.ViewModels {     public class MainWindowViewModel : ViewModelBase     {         private List<City> cityList;         private object _item;         private object selectedViewModel;           public object SelectedViewModel         {             get { return selectedViewModel; }             set { selectedViewModel = value; OnPropertyChanged("SelectedViewModel"); }         }         public object Item         {             get { return _item; }             set { _item = value; OnPropertyChanged("Item"); openViewModel(value); }         }         public List<City> CityList         {             get { return cityList; }             set { cityList = value; OnPropertyChanged("CityList"); }         }         public MainWindowViewModel()         {             cityList = new List<City>()             {                 new City("Город 1"),                 new City("Город 2"),                 new City("Город 3"),                 new City("Город 4"),             };         }         private void openViewModel(object obj)         {                         if (obj.GetType() == typeof(City))                 SelectedViewModel = new CityViewModel((City)obj);             else if (obj.GetType() == typeof(Street))                           SelectedViewModel = new StreetViewModel((Street)obj);                         else if (obj.GetType() == typeof(House))                 SelectedViewModel = new HouseViewModel((House)obj);         }     } }

   
   При нажатии кнопки employee свойству SelectedViewModel присваивается EmployeeViewModel, и, следовательно, в ContentControl содержимому будет присвоен DataTemplate объекта DataType EmployeeViewModel, а EmployeeView будет загружен в ContentControl.‎

   ‎Ну вот. Мы выполнили простую навигацию в приложении WPF с помощью MVVM.‎