MVVM - Conexión de ViewModel
En este capítulo, cubriremos cómo conectar ViewModel. Es una continuación del último capítulo en el que discutimos la construcción de Vista primera. Ahora, la siguiente forma de la primera construcción es unmeta-pattern que se conoce como ViewModelLocator. Es un pseudopatrón y está superpuesto al patrón MVVM.
En MVVM, cada vista debe estar conectada a su modelo de vista.
ViewModelLocator es un enfoque simple para centralizar el código y desacoplar más la vista.
Significa que no tiene que saber explícitamente sobre el tipo ViewModel y cómo construirlo.
Hay varios enfoques diferentes para usar ViewModelLocator, pero aquí usamos el más similar al que forma parte del marco PRISM.
ViewModelLocator proporciona una forma estándar, coherente, declarativa y débilmente acoplada de hacer la primera construcción de la vista que automatiza el proceso de conectar ViewModel a la vista. La siguiente figura representa el proceso de alto nivel de ViewModelLocator.
Step 1 - Averigüe qué tipo de vista se está construyendo.
Step 2 - Identifique el modelo de vista para ese tipo de vista en particular.
Step 3 - Construya ese ViewModel.
Step 4 - Establezca Views DataContext en ViewModel.
Para comprender el concepto básico, echemos un vistazo al ejemplo simple de ViewModelLocator continuando con el mismo ejemplo del capítulo anterior. Si observa el archivo StudentView.xaml, verá que hemos conectado estáticamente el ViewModel.
Ahora, como se muestra en el siguiente programa, comente este código XAML y también elimine el código de Code-behind.
<UserControl x:Class = "MVVMDemo.Views.StudentView"
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:MVVMDemo.Views"
xmlns:viewModel = "clr-namespace:MVVMDemo.ViewModel"
mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">
<!--<UserControl.DataContext>
<viewModel:StudentViewModel/>
</UserControl.DataContext>-->
<Grid>
<StackPanel HorizontalAlignment = "Left">
<ItemsControl ItemsSource = "{Binding Path = Students}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal">
<TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}"
Width = "100" Margin = "3 5 3 5"/>
<TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"
Width = "100" Margin = "0 5 3 5"/>
<TextBlock Text = "{Binding Path = FullName, Mode = OneWay}"
Margin = "0 5 3 5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>Ahora creemos una nueva carpeta VML y agreguemos una nueva clase pública ViewModelLocator que contendrá una única propiedad adjunta (propiedad de dependencia) AutoHookedUpViewModel como se muestra en el siguiente código.
public static bool GetAutoHookedUpViewModel(DependencyObject obj) {
return (bool)obj.GetValue(AutoHookedUpViewModelProperty);
}
public static void SetAutoHookedUpViewModel(DependencyObject obj, bool value) {
obj.SetValue(AutoHookedUpViewModelProperty, value);
}
// Using a DependencyProperty as the backing store for AutoHookedUpViewModel.
//This enables animation, styling, binding, etc...
public static readonly DependencyProperty AutoHookedUpViewModelProperty =
DependencyProperty.RegisterAttached("AutoHookedUpViewModel",
typeof(bool), typeof(ViewModelLocator), new PropertyMetadata(false,
AutoHookedUpViewModelChanged));Y ahora puede ver una definición básica de propiedad adjunta. Para agregar comportamiento a la propiedad, necesitamos agregar un controlador de eventos modificado para esta propiedad que contiene el proceso automático de conectar ViewModel para View. El código para hacer esto es el siguiente:
private static void AutoHookedUpViewModelChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e) {
if (DesignerProperties.GetIsInDesignMode(d)) return;
var viewType = d.GetType();
string str = viewType.FullName;
str = str.Replace(".Views.", ".ViewModel.");
var viewTypeName = str;
var viewModelTypeName = viewTypeName + "Model";
var viewModelType = Type.GetType(viewModelTypeName);
var viewModel = Activator.CreateInstance(viewModelType);
((FrameworkElement)d).DataContext = viewModel;
}A continuación se muestra la implementación completa de la clase ViewModelLocator.
using System;
using System.ComponentModel;
using System.Windows;
namespace MVVMDemo.VML {
public static class ViewModelLocator {
public static bool GetAutoHookedUpViewModel(DependencyObject obj) {
return (bool)obj.GetValue(AutoHookedUpViewModelProperty);
}
public static void SetAutoHookedUpViewModel(DependencyObject obj, bool value) {
obj.SetValue(AutoHookedUpViewModelProperty, value);
}
// Using a DependencyProperty as the backing store for AutoHookedUpViewModel.
//This enables animation, styling, binding, etc...
public static readonly DependencyProperty AutoHookedUpViewModelProperty =
DependencyProperty.RegisterAttached("AutoHookedUpViewModel",
typeof(bool), typeof(ViewModelLocator), new
PropertyMetadata(false, AutoHookedUpViewModelChanged));
private static void AutoHookedUpViewModelChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e) {
if (DesignerProperties.GetIsInDesignMode(d)) return;
var viewType = d.GetType();
string str = viewType.FullName;
str = str.Replace(".Views.", ".ViewModel.");
var viewTypeName = str;
var viewModelTypeName = viewTypeName + "Model";
var viewModelType = Type.GetType(viewModelTypeName);
var viewModel = Activator.CreateInstance(viewModelType);
((FrameworkElement)d).DataContext = viewModel;
}
}
}Lo primero que debemos hacer es agregar un espacio de nombres para que podamos llegar a ese tipo de ViewModelLocator en la raíz de nuestro proyecto. Luego, en el elemento de ruta que es un tipo de vista, agregue la propiedad AutoHookedUpViewModel y configúrelo en verdadero.
xmlns:vml = "clr-namespace:MVVMDemo.VML"
vml:ViewModelLocator.AutoHookedUpViewModel = "True"Aquí está la implementación completa del archivo StudentView.xaml.
<UserControl x:Class = "MVVMDemo.Views.StudentView"
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:MVVMDemo.Views"
xmlns:viewModel = "clr-namespace:MVVMDemo.ViewModel"
xmlns:vml = "clr-namespace:MVVMDemo.VML"
vml:ViewModelLocator.AutoHookedUpViewModel = "True"
mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">
<!--<UserControl.DataContext>
<viewModel:StudentViewModel/>
</UserControl.DataContext>-->
<Grid>
<StackPanel HorizontalAlignment = "Left">
<ItemsControl ItemsSource = "{Binding Path = Students}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal">
<TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}"
Width = "100" Margin = "3 5 3 5"/>
<TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"
Width = "100" Margin = "0 5 3 5"/>
<TextBlock Text = "{Binding Path = FullName, Mode = OneWay}"
Margin = "0 5 3 5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>Cuando se compila y ejecuta el código anterior, verá que ViewModelLocator está conectando ViewModel para esa vista en particular.
Una cosa clave a tener en cuenta sobre esto es que la vista ya no está acoplada de alguna manera al tipo de su ViewModel o cómo se construye. Todo eso se ha trasladado a la ubicación central dentro de ViewModelLocator.