2009-07-20 23 views
34

Ho sentito che è la cosa migliore da fare nella costruzione di interfacce utente WPF, ma tutti gli esempi esistenti di hanno dozzine di righe di codice: posso ottenere un Hello World per MVVM che spiega senza mezzi termini di cosa si tratta? Sono abbastanza nuovo anche in C# /. Net, quindi potrei indicarmi alcune risorse che potrebbero essere d'aiuto?Una spiegazione di frase a MVVM in WPF?

molto apprezzato!

risposta

4

This site ha un grande diagramma che lo spiega.

Fondamentalmente si hanno 3 componenti:
1) Girl - Il modello di dati della vostra applicazione. questo è piuttosto standard e uguale a qualsiasi app MVP o MVC.
2) Visualizza - Lo XAML che definisce la vista/layout della tua app.
3) Visualizza modello - Poiché WPF richiede che la vista si leghi alle cose in determinati modi (come richiede che le raccolte implementino INotifyCollectionChanged e cose del genere) normalmente richiede di massaggiare i dati un po 'per ottenerlo in una forma adatto per la visualizzazione da visualizzare. È qui che entra in gioco il modello di visualizzazione. Riempie i dati in modelli di vista che la vista può facilmente visualizzare. Questo è il tuo punto di vista a cui XAML si legherà. Deve rispondere agli eventi dal livello del modello e aggiornarsi.

(Poi i controller di appendere sul lato da qualche parte - idealmente utilizzando i comandi di WPF - e apportare modifiche al modello, che genera gli eventi per aggiornare il modello di vista)

14

Una frase? Ecco qui.

MVVM è un modello di segregazione dell'interfaccia utente in cui Xaml (vista) si collega a una facciata (modello di vista) che consente alle viscere del programma (modello) di evitare problemi di interfaccia utente in un livello.

+22

+1 Haha. Uno sviluppatore software classico.Hai dato all'utente esattamente ciò che ha chiesto, ma risulta che non gli è affatto giovato e probabilmente non è quello che voleva veramente. (Mi ha fatto ridere però) = :) –

70

Una frase spiegazione:

MVVM è una rivisitazione del modello molto amato Model-View-Presenter (MVP) che è stato progettato per funzionare particolarmente bene con strutture di associazione dati forniti con WPF per separare la logica applicativa dalla progettazione dell'interfaccia utente.

più lungo, più utile, la spiegazione:

Il concetto di base del MVVM è la rottura a parte un'applicazione WPF in componenti separati ciascuno dei quali ha una responsabilità nel processo di ottenere informazioni sullo schermo.

In primo luogo avete il modello. Questa è una classe con funzionalità molto limitate che è generalmente popolata da una fonte esterna come un database o un servizio web. Ad esempio:

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

In cima che utilizzi questa ViewModel, questo è dove la logica dell'applicazione siede, lo comunica la vista modifiche al modello e garantisce la coerenza dei dati. Implementando l'interfaccia INotifyPropertyChanged due databinding strada tra il ViewModel e la vista è dato gratuitamente 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"); 
       } 
      } 
    } 
} 

Infine si ha la vista.Questo è un file XAML che descrive la disposizione dei comandi necessari per visualizzare e modificare i dati nel ViewModel:

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

Il motivo per cui si va in tutto questo sforzo è che il modello è molto leggero e facilmente superato in tutta confini del dominio. È semplice inviarlo o riceverlo da un webservice o mapparlo a una tabella di database. Il ViewModel, d'altra parte, è complesso, ma ha poche dipendenze - non importa da dove il modello ottiene i suoi dati, solo che è lì e non ha alcun concetto di vista che lo rende molto testabile (il la logica della tua applicazione non si basa su un'interfaccia utente per testare). Infine, lo xaml è ben suddiviso in compartimenti e può essere consegnato a un designer che non ha bisogno di sapere nulla della logica dell'applicazione, solo che ViewModel presenterà determinati dati con determinati nomi. Questo incapsulamento semplifica molto la definizione dei ruoli in progetti di grandi dimensioni o l'unione di un'interfaccia utente limitata per testare la logica mentre quella reale viene ottimizzata.

+5

Risposta fantastica. Grazie per una semplice spiegazione su ciò che può essere un argomento complesso – Kane

+0

IMO, esempio MVVM senza comandi non è abbastanza completo –

+0

@MartinHarris hai detto che il modello è ottenuto dal webservice o dal database? Dove dovremmo inserire quel codice logico? Nel modello di vista? – onmyway133

0

vorrei dire qualcosa del tipo: "modello di presentazione per la separazione di preoccupazione tra interfaccia utente ed è la logica"

8

La semplice dichiarazione che mi ha aiutato a ottenere la mia testa intorno ad esso meglio era "Potrei unità di testare la mia logica di business senza l'interfaccia utente? " Penso che questa dovrebbe essere la domanda che fai mentre apprendi e progetta usando concetti MVVM.

0

Una migliore risposta:

MVVM è tutto per il futuro; vuoi separare la logica dell'applicazione dal framework in modo che il framework possa evolversi e l'app potrebbe non dover cambiare, oppure la tua app può evolversi e non dovrai preoccuparti tanto di modificare gli effettivi aspetti dell'interfaccia utente.

In realtà, MVVM è un raffinamento di un modello che è stato in giro per qualche tempo. Ricordo di aver evoluto lo schema quando lavoravo in MFC. Ci sono almeno due ragioni per farlo. MFC o <> è abbastanza complesso e mescolare i costrutti MFC con la logica dell'applicazione rende l'applicazione un po 'fragile. Esempio: sostituire una listbox con una casella combinata (o un selettore in termini moderni) è molto più difficile se la logica per supportare il contenuto della lista/selettore è combinata con la logica per manipolare la lista/selettore stessa.

1

un modello in cui il frontend (vista) e il backend (modale) comunicano (avanti e indietro) utilizzando un mediatore comune (vista-modale).

1

Il pattern MVVM è quando l'interfaccia utente si interfaccia con un oggetto intermedio xaml per ottenere i dati reali ostili xaml.

0

Alcune giuste spiegazioni di una sola frase (o vicino ad essa). Mi limiterò ad aggiungere che se hai superato il livello base e vuoi un esempio di come utilizzare MVVM in un'app reale con menu, barra degli strumenti, finestre di dialogo delle opzioni, finestre degli strumenti di ancoraggio, ecc. , dai un'occhiata a SoapBox Core e questo demo using SoapBox Core. È aperto in modo da poter ottenere molte idee.

37

MVVM è una relazione stella-ventilatore. Il fan conosce la stella ma la stella non conosce la ventola. Il fan ama così tanto la sua stella che se la stella cambia se stessa (intendo il suo stile di vestire), la ventola cambia di conseguenza.

Ora sostituire "stella" con "ViewModel" e "fan" con "View" e leggerlo di nuovo.

+0

bella spiegazione .. facile da capire i principianti come me –

0

Perché non è possibile i dati-bind al tuo codebehind

(solo scherzando metà qui)