2009-07-20 9 views
34

Escuché que es la mejor opción para construir UI WPF, pero todos los ejemplos existentes de tienen docenas de líneas de código. ¿Puedo obtener un Hello World para MVVM que explique en términos inequívocos de qué se trata? Soy bastante nuevo en C# /. Net también, así que tal vez me refiera a algunos recursos de que también podrían ser de ayuda.Explicación de una oración a MVVM en WPF?

¡Muy apreciado!

Respuesta

4

This site tiene un gran diagrama que lo explica.

Básicamente, usted tiene 3 componentes:
1) Modelo - El modelo de datos de la aplicación. esto es bastante estándar y lo mismo que cualquier aplicación MVP o MVC.
2) Ver - El XAML que define la vista/diseño de su aplicación.
3) Ver modelo - Debido a que WPF exige que la vista se una a las cosas de ciertas maneras (como requiere que las colecciones implementen INotifyCollectionChanged y cosas por el estilo), normalmente se requiere masajes un poco para obtenerlo en una forma adecuado para la vista para mostrar. Aquí es donde se muestran los códigos de modelo de vista. Empaqueta los datos en modelos de vista que la vista puede mostrar fácilmente. Esto es a lo que su vista XAML se vinculará. Debe responder a eventos de la capa modelo y actualizarse a sí mismo.

(A continuación, los controladores de colgar en el lado en alguna parte - idealmente usando comandos de WPF - y crea cambios en el modelo, lo que desencadena eventos para actualizar el modelo de vista)

14

Una frase? Aquí va.

MVVM es un patrón de segmentación de UI donde Xaml (Ver) se une a una fachada (Ver Modelo) permitiendo que las agallas de su programa (Modelo) eviten que las preocupaciones de UI se filtren por una capa.

+22

1 Jaja. Un desarrollador de software clásico.Usted le dio al usuario exactamente lo que pidió, pero resulta que no lo benefició en absoluto y probablemente no es lo que realmente quería. (Me hizo reír) = :) –

70

Una frase explicación:

MVVM es una reinvención del patrón bien amado Modelo-Vista-Presentador (MVP) que está diseñado para funcionar especialmente bien con las instalaciones de enlace de datos suministrados con WPF para separar la lógica de aplicación desde el diseño de la interfaz de usuario.

Más largo, más útil, la explicación:

El concepto básico de MVVM es la ruptura, aparte de una aplicación de WPF en componentes separados, cada uno de los cuales tiene una responsabilidad en el proceso de obtención de la información en la pantalla.

Primero tienes el modelo. Esta es una clase con una funcionalidad muy limitada que generalmente se rellena desde alguna fuente externa, como una base de datos o un servicio web. Por ejemplo:

public class MessageModel 
{ 
    public string Message { get; set; } 
} 

En la parte superior de que la capa de los ViewModel, aquí es donde la lógica de la aplicación se encuentra, se notifica a la vista de los cambios en el modelo y asegura la consistencia de datos. Mediante la implementación de la interfaz de enlace de datos INotifyPropertyChanged de dos vías entre el modelo de vista y la vista se da de forma gratuita por WPF:

public class MessageViewModel : INotifyPropertyChanged 
{ 
    private MessageModel _model; 

    public string Message 
    { 
      get { return _model.Message; } 
      set 
      { 
       if (_model.Message != value) 
       { 
        _model.Message = value; 
        OnPropertyChanged("Message"); 
       } 
      } 
    } 
} 

Finalmente tienes la vista.Este es un archivo XAML que describe la disposición de los controles que se utilizan para visualizar y editar los datos en el modelo de vista:

<Canvas> 
    <TextBox Text={"Binding Message"} /> 
</Canvas> 

La razón por la que vas a todo este esfuerzo es que el modelo es muy ligero y fácil de pasar a través límites de dominio. Es simple enviarlo o recibirlo desde un servicio web o asignarlo a una tabla de base de datos. El ViewModel, por otro lado, es complejo, pero tiene pocas dependencias: no importa de dónde proviene el modelo, solo que está allí y no tiene ningún concepto de vista, lo que lo hace muy comprobable (el la lógica de su aplicación no depende de una IU para probar). Finalmente, el xaml está bien compartimentado y puede ser entregado a un diseñador que no necesita saber nada sobre la lógica de la aplicación, solo que ViewModel presentará ciertos datos bajo ciertos nombres. Esta encapsulación hace que sea muy fácil definir roles en proyectos grandes, o armar una interfaz de usuario limitada para probar la lógica mientras se está puliendo la real.

+5

Fantástica respuesta. Gracias por una explicación simple sobre lo que puede ser un tema complejo – Kane

+0

IMO, el ejemplo de MVVM sin comandos no es lo suficientemente completo –

+0

@MartinHarris ¿Dijo que el modelo se obtiene del servicio web o la base de datos? ¿Dónde deberíamos colocar ese código lógico? En el modelo de vista? – onmyway133

0

que diría algo así como: "patrón de presentación para la separación de preocupación entre la interfaz de usuario y es lógico"

8

La simple afirmación de que me ayudó a conseguir mi cabeza alrededor de lo mejor era "¿Podría unidad de prueba mi lógica de negocio sin la interfaz de usuario? " Creo que esta debería ser la pregunta que se hace al aprender y diseñar usando los conceptos de MVVM.

0

Una respuesta mejorada:

MVVM es todo sobre el futuro; desea separar la lógica de la aplicación del marco para que el marco pueda evolucionar, y su aplicación no tenga que cambiar, o su aplicación pueda evolucionar y no tenga que preocuparse tanto por cambiar los aspectos reales de la interfaz de usuario.

En realidad, MVVM es un refinamiento de un patrón que existe desde hace algún tiempo. Recuerdo haber evolucionado el patrón cuando estaba trabajando en MFC. Hay al menos dos razones para hacerlo. MFC o <> es bastante complejo, y mezclar construcciones MFC con la lógica de la aplicación hace que la aplicación sea algo frágil. Ejemplo: reemplazar un listbox con un combobox (o selector en términos modernos) es mucho más difícil si la lógica para soportar el contenido de la lista/selector se combina con la lógica para manipular la lista/selector.

1

un patrón donde la interfaz (vista) y el servidor (modal) se comunican (hacia adelante y hacia atrás) usando un mediador común (vista-modal).

1

El patrón MVVM se produce cuando la UI interactúa con un objeto intermedio compatible con xaml para obtener datos reales poco amigables con xaml.

0

Algunas explicaciones de una frase realmente buenas (o cercanas) ya. Añadiré diciendo que si ha superado el nivel básico y quiere un ejemplo de cómo usar MVVM en una aplicación del mundo real que tiene menús, barra de herramientas, diálogos de opciones, ventanas de herramientas de acoplamiento, etc. , eche un vistazo a SoapBox Core y este demo using SoapBox Core. Es de código abierto para que pueda obtener muchas ideas.

37

MVVM es una relación de estrella-fan. El fan conoce la estrella pero la estrella no conoce al fan. El aficionado ama tanto a su estrella que si la estrella se cambia a sí misma (me refiero a su estilo de vestidor), el ventilador se cambia a sí mismo en consecuencia.

Ahora reemplace "estrella" con "ViewModel" y "fan" con "Ver" y léelo una vez más.

+0

hermosa explicación ... fácil de entender principiantes como yo –

0

porque no se puede datos se unen a su propio código subyacente

(sólo medio en broma aquí)