wpf
MVVM en WPF

Observaciones

Ejemplo básico de MVVM usando WPF y C #

Este es un ejemplo básico para usar el modelo MVVM en una aplicación de escritorio de Windows, usando WPF y C #. El código de ejemplo implementa un simple diálogo de "información del usuario".

La vista

El XAML

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="4" Text="{Binding FullName}" HorizontalAlignment="Center" FontWeight="Bold"/>

    <Label Grid.Column="0" Grid.Row="1" Margin="4" Content="First Name:" HorizontalAlignment="Right"/>
    <!-- UpdateSourceTrigger=PropertyChanged makes sure that changes in the TextBoxes are immediately applied to the model. -->
    <TextBox Grid.Column="1" Grid.Row="1" Margin="4" Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Width="200"/>

    <Label Grid.Column="0" Grid.Row="2" Margin="4" Content="Last Name:" HorizontalAlignment="Right"/>
    <TextBox Grid.Column="1" Grid.Row="2" Margin="4" Text="{Binding LastName, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left"  Width="200"/>

    <Label Grid.Column="0" Grid.Row="3" Margin="4" Content="Age:" HorizontalAlignment="Right"/>
    <TextBlock Grid.Column="1" Grid.Row="3" Margin="4" Text="{Binding Age}" HorizontalAlignment="Left"/>

</Grid>

y el código detrás

public partial class MainWindow : Window
{
    private readonly MyViewModel _viewModel;

    public MainWindow() {
        InitializeComponent();
        _viewModel = new MyViewModel();
        // The DataContext serves as the starting point of Binding Paths
        DataContext = _viewModel;
    }
}

El modelo de vista

// INotifyPropertyChanged notifies the View of property changes, so that Bindings are updated.
sealed class MyViewModel : INotifyPropertyChanged
{
    private User user;
    
    public string FirstName { 
        get {return user.FirstName;} 
        set {
            if(user.FirstName != value) {
                user.FirstName = value;
                OnPropertyChange("FirstName");
                // If the first name has changed, the FullName property needs to be udpated as well.
                OnPropertyChange("FullName");
            }
        }
    }

    public string LastName {
        get { return user.LastName; }
        set {
            if (user.LastName != value) {
                user.LastName = value;
                OnPropertyChange("LastName");
                // If the first name has changed, the FullName property needs to be udpated as well.
                OnPropertyChange("FullName");
            }
        }
    }
    
    // This property is an example of how model properties can be presented differently to the View.
    // In this case, we transform the birth date to the user's age, which is read only.
    public int Age { 
        get {
            DateTime today = DateTime.Today;
            int age = today.Year - user.BirthDate.Year;
            if (user.BirthDate > today.AddYears(-age)) age--;
            return age;
        }
    }

    // This property is just for display purposes and is a composition of existing data.
    public string FullName {
        get { return FirstName + " " + LastName; }
    }

    public MyViewModel() {
        user = new User {
            FirstName = "John",
            LastName = "Doe",
            BirthDate = DateTime.Now.AddYears(-30)
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChange(string propertyName) {
        if(PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

El modelo

sealed class User
{
    public string FirstName { get; set; }

    public string LastName { get; set; }

    public DateTime BirthDate { get; set; }
} 

El modelo de vista

El modelo de vista es la "VM" en MV VM . Esta es una clase que actúa como intermediario, expone los modelos a la interfaz de usuario (vista) y maneja las solicitudes desde la vista, como los comandos generados por los clics de los botones. Aquí hay un modelo de vista básico:

public class CustomerEditViewModel
{
    /// <summary>
    /// The customer to edit.
    /// </summary>
    public Customer CustomerToEdit { get; set; }

    /// <summary>
    /// The "apply changes" command
    /// </summary>
    public ICommand ApplyChangesCommand { get; private set; }

    /// <summary>
    /// Constructor
    /// </summary>
    public CustomerEditViewModel()
    {
        CustomerToEdit = new Customer
                         {
                             Forename = "John",
                             Surname = "Smith"
                         };

        ApplyChangesCommand = new RelayCommand(
            o => ExecuteApplyChangesCommand(), 
            o => CustomerToEdit.IsValid);
    }

    /// <summary>
    /// Executes the "apply changes" command.
    /// </summary>
    private void ExecuteApplyChangesCommand()
    {
        // E.g. save your customer to database
    }
}

El constructor crea un objeto de modelo de Customer y lo asigna a la propiedad CustomerToEdit , para que sea visible para la vista.

El constructor también crea un objeto RelayCommand y lo asigna a la propiedad ApplyChangesCommand , haciéndolo nuevamente visible para la vista. Los comandos de WPF se utilizan para manejar solicitudes desde la vista, como los clics en los botones o en los elementos del menú.

RelayCommand toma dos parámetros: el primero es el delegado al que se llama cuando se ejecuta el comando (por ejemplo, en respuesta a un clic del botón). El segundo parámetro es un delegado que devuelve un valor booleano que indica si el comando puede ejecutarse; en este ejemplo, está conectado a la propiedad IsValid del objeto del IsValid . Cuando esto devuelve falso, desactiva el botón o elemento de menú que está vinculado a este comando (otros controles pueden comportarse de manera diferente). Esta es una característica simple pero efectiva, evitando la necesidad de escribir código para habilitar o deshabilitar controles basados ​​en diferentes condiciones.

Si tiene este ejemplo en funcionamiento, intente vaciar uno de los TextBox de TextBox (para colocar el modelo del Customer en un estado no válido). Cuando se aleje del TextBox , debería encontrar que el botón "Aplicar" se deshabilita.

Comentario sobre la creación del cliente

El modelo de vista no implementa INotifyPropertyChanged (INPC). Esto significa que si se asignara un objeto Customer diferente a la propiedad CustomerToEdit , entonces los controles de la vista no cambiarían para reflejar el nuevo objeto; el TextBox aún contendría el nombre y el apellido del cliente anterior.

El código de ejemplo funciona porque el Customer se crea en el constructor del modelo de vista, antes de que se asigne al DataContext la vista (en cuyo punto se conectan los enlaces). En una aplicación del mundo real, podría estar recuperando clientes de una base de datos en métodos distintos al constructor. Para admitir esto, la VM debe implementar INPC, y la propiedad CustomerToEdit debe cambiarse para usar el patrón "establecido" de obtención y establecimiento que se ve en el código de modelo de ejemplo, lo que provoca el evento PropertyChanged en el configurador.

El ApplyChangesCommand del modelo de ApplyChangesCommand no necesita implementar INPC ya que es muy poco probable que el comando cambie. Lo que se necesita para implementar este patrón si estuviera creando un lugar del comando que no sea el constructor, por ejemplo, algún tipo de Initialize() método.

La regla general es: implementar INPC si la propiedad está vinculada a cualquier control de vista y el valor de la propiedad puede cambiar en cualquier lugar que no sea el constructor. No necesita implementar INPC si el valor de la propiedad solo se asigna en el constructor (y se ahorrará algo de escritura en el proceso).

El modelo

El modelo es la primera "M" en M VVM. El modelo suele ser una clase que contiene los datos que desea exponer a través de algún tipo de interfaz de usuario.

Aquí hay una clase de modelo muy simple que expone un par de propiedades:

public class Customer : INotifyPropertyChanged
{
    private string _forename;
    private string _surname;
    private bool _isValid;

    public event PropertyChangedEventHandler PropertyChanged;

    /// <summary>
    /// Customer forename.
    /// </summary>
    public string Forename
    {
        get
        {
            return _forename;
        }
        set
        {
            if (_forename != value)
            {
                _forename = value;
                OnPropertyChanged();
                SetIsValid();
            }
        }
    }

    /// <summary>
    /// Customer surname.
    /// </summary>
    public string Surname
    {
        get
        {
            return _surname;
        }
        set
        {
            if (_surname != value)
            {
                _surname = value;
                OnPropertyChanged();
                SetIsValid();
            }
        }
    }

    /// <summary>
    /// Indicates whether the model is in a valid state or not.
    /// </summary>
    public bool IsValid
    {
        get
        {
            return _isValid;
        }
        set
        {
            if (_isValid != value)
            {
                _isValid = value;
                OnPropertyChanged();
            }
        }
    }

    /// <summary>
    /// Sets the value of the IsValid property.
    /// </summary>
    private void SetIsValid()
    {
        IsValid = !string.IsNullOrEmpty(Forename) && !string.IsNullOrEmpty(Surname);
    }

    /// <summary>
    /// Raises the PropertyChanged event.
    /// </summary>
    /// <param name="propertyName">Name of the property.</param>
    private void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Esta clase implementa la interfaz INotifyPropertyChanged que expone un evento PropertyChanged . Este evento debe producirse siempre que cambie uno de los valores de propiedad; puede verlo en acción en el código anterior. El evento PropertyChanged es una pieza clave en los mecanismos de enlace de datos de WPF, ya que sin él, la interfaz de usuario no podría reflejar los cambios realizados en el valor de una propiedad.

El modelo también contiene una rutina de validación muy simple a la que se llama desde los establecedores de propiedades. Establece una propiedad pública que indica si el modelo está o no en un estado válido. He incluido esta funcionalidad para demostrar una característica "especial" de los comandos de WPF, que veremos en breve. El marco WPF proporciona una serie de enfoques más sofisticados para la validación, pero están fuera del alcance de este artículo .

La vista

La vista es la "V" en M V VM. Esta es su interfaz de usuario. Puede usar el diseñador de arrastrar y soltar de Visual Studio, pero la mayoría de los desarrolladores finalmente terminan codificando el XAML en bruto, una experiencia similar a la de escribir HTML.

Aquí está el XAML de una vista simple para permitir la edición de un modelo de Customer . En lugar de crear una nueva vista, esto solo se puede pegar en el archivo MainWindow.xaml un proyecto WPF, entre las etiquetas <Window ...> y </Window> : -

<StackPanel Orientation="Vertical"
            VerticalAlignment="Top"
            Margin="20">
    <Label Content="Forename"/>
    <TextBox Text="{Binding CustomerToEdit.Forename}"/>

    <Label Content="Surname"/>
    <TextBox Text="{Binding CustomerToEdit.Surname}"/>

    <Button Content="Apply Changes"
            Command="{Binding ApplyChangesCommand}" />
</StackPanel>

Este código crea un formulario de entrada de datos simple que consta de dos TextBox es: uno para el nombre del cliente y otro para el apellido. Hay una Label encima de cada TextBox y un Button "Aplicar" en la parte inferior del formulario.

Localiza el primer TextBox y mira su propiedad de Text :

Text="{Binding CustomerToEdit.Forename}"

En lugar de establecer el TextBox del TextBox en un valor fijo, esta sintaxis especial de corchete es el enlace del texto a la "ruta" CustomerToEdit.Forename . ¿A qué se refiere este camino? Es el "contexto de datos" de la vista, en este caso, nuestro modelo de vista. La ruta de enlace, como podrá descubrir, es la propiedad CustomerToEdit del modelo de vista, que es de tipo Customer que a su vez expone una propiedad llamada Forename - por lo tanto, la notación de ruta "punteada".

De manera similar, si observa la XAML del Button , tiene un Command que está vinculado a la propiedad ApplyChangesCommand del modelo de vista. Eso es todo lo que se necesita para conectar un botón al comando de la máquina virtual.

El DataContext

Entonces, ¿cómo configura el modelo de vista para que sea el contexto de datos de la vista? Una forma es configurarlo en el "código subyacente" de la vista. Presione F7 para ver este archivo de código y agregue una línea al constructor existente para crear una instancia del modelo de vista y asignarla a la propiedad DataContext la ventana. Debería acabar luciendo así:

    public MainWindow()
    {
        InitializeComponent();

        // Our new line:-
        DataContext = new CustomerEditViewModel();
    }

En los sistemas del mundo real, a menudo se utilizan otros enfoques para crear el modelo de vista, como la inyección de dependencias o los marcos MVVM.

Comandando en MVVM

Los comandos se utilizan para manejar Events en WPF respetando el patrón MVVM.

Un EventHandler normal se vería así (ubicado en Code-Behind ):

public MainWindow()
{
    _dataGrid.CollectionChanged += DataGrid_CollectionChanged;
}

private void DataGrid_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
        //Do what ever
}

No para hacer lo mismo en MVVM usamos Commands :

 <Button Command="{Binding Path=CmdStartExecution}" Content="Start" />

Recomiendo usar algún tipo de prefijo ( Cmd ) para las propiedades de tus comandos, porque principalmente los necesitarás en xaml, de esa forma son más fáciles de reconocer.

Ya que es MVVM, usted quiere manejar ese comando (para el Button "eq" Button_Click ) en su ViewModel .

Para eso básicamente necesitamos dos cosas:

1. System.Windows.Input.ICommand
2. RelayCommand (por ejemplo, tomado de aquí .

Un ejemplo simple podría verse así:

private RelayCommand _commandStart;
public ICommand CmdStartExecution
{
   get
   {
      if(_commandStart == null)
      {
          _commandStart = new RelayCommand(param => Start(), param => CanStart());
      }
      return _commandStart;
   }
}

public void Start()
{
   //Do what ever
}

public bool CanStart()
{
    return (DateTime.Now.DayOfWeek == DayOfWeek.Monday); //Can only click that button on mondays.
}

Entonces, ¿qué está haciendo esto en detalle:

El ICommand es a lo que se vincula el Control en xaml. RelayCommand dirigirá su comando a una Action (es decir, llama a un Method ). La comprobación de nulos solo garantiza que cada Command solo se inicializará una vez (debido a problemas de rendimiento). Si ha leído el enlace de RelayCommand anterior, puede haber notado que RelayCommand tiene dos sobrecargas para su constructor. (Action<object> execute) y (Action<object> execute, Predicate<object> canExecute) .

Eso significa que puede (adicionalmente) agregar un segundo Method devolviendo un bool para decirle a Control el "Evento" puede activarse o no.

Una buena cosa para eso es que Button s, por ejemplo, se Enabled="false" si el Method devolverá false

CommandParameters

<DataGrid x:Name="TicketsDataGrid">
    <DataGrid.InputBindings>
        <MouseBinding Gesture="LeftDoubleClick" 
                      Command="{Binding CmdTicketClick}" 
                      CommandParameter="{Binding ElementName=TicketsDataGrid, 
                                                 Path=SelectedItem}" />
    </DataGrid.InputBindings>
<DataGrid />

En este ejemplo, quiero pasar el DataGrid.SelectedItem al Click_Command en mi ViewModel.

Su Método debería tener este aspecto mientras que la implementación de ICommand se mantiene como se indica arriba.

private RelayCommand _commandTicketClick;

public ICommand CmdTicketClick
{
   get
   {
       if(_commandTicketClick == null)
       {
           _commandTicketClick = new RelayCommand(param => HandleUserClick(param));
       }
       return _commandTicketClick;
   }
}

private void HandleUserClick(object item)
{
    MyModelClass selectedItem = item as MyModelClass;
    if (selectedItem != null)
    {
        //Do sth. with that item
    }
}