One sentence explanation to MVVM in WPF?

Question

I heard its the next best thing in building WPF UIs, but all existing examples have dozens of lines of code - can I get a Hello World for MVVM that explains in no uncertain terms what its all about? I'm fairly new to C#/.net as well, so maybe point me to some resources that could help too?

Much appreciated!

Answer 1

One sentence explanation:

MVVM is a reimagining of the well loved Model-View-Presenter (MVP) pattern that is designed to work especially well with databinding facilities supplied with WPF to separate application logic from UI design.

Longer, more useful, explanation:

The basic concept of MVVM is the break apart a WPF application into separate components each of which has one responsibility in the process of getting information on screen.

Firstly you have the model. This is a class with very limited functionality that is generally populated from some outside source such as a database or webservice. For example:

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

On top of that you layer the ViewModel, this is where the logic of the application sits, it notifies the view of changes to the model and ensures data consistency. By implementing the INotifyPropertyChanged interface two way databinding between the ViewModel and the view is given for free by 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");
              }
          }
     }
}

Finally you have the View. This is a xaml file that describes the layout of the controls used to display and edit the data in the ViewModel:

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

The reason that you go to all this effort is that the Model is very lightweight and easily passed across domain boundaries. It is simple to send or receive it from a webservice or map it to a database table. The ViewModel, on the other hand is complex, but has few dependencies - it doesn't care where the model gets it's data from, only that it is there and it has no concept of a view at all which makes it very testable (the logic of your application doesn't rely on a UI to test). Finally the xaml is well compartmentalised and can be handed off to a designer who needs to know nothing about the logic of the application, only that the ViewModel will present certain data under certain names. This encapsulation makes it very easy to define roles in large projects, or put together a limited UI to test logic against while the real one is being polished.

Answer 2

MVVM is a star-fan relationship. The fan knows the star but the star does not know the fan. The fan loves his star so much that if the star changes himself ( I mean his dressing style ), the fan changes himself accordingly.

Now replace "star" with "ViewModel" and "fan" with "View" and read it once again.

Answer 3

One sentence? Here goes.

MVVM is a UI segregation pattern where the Xaml (View) binds to a facade (View Model) allowing the guts of your program (Model) to avoid having UI concerns leak down a layer.

Answer 4

The simple statement that helped me get my head around it best was "Could I unit test my business logic without the user interface?" I think this should be the question you ask while learning and designing using MVVM concepts.

Answer 5

This site has a great diagram that explains it.

Basically you have 3 components:
1) Model - The data model of your application. this is pretty standard and the same as any MVP or MVC app.
2) View - The XAML that defines the view/layout of your app.
3) View Model - Because WPF demands that the view attach to things in certain ways (like requires that collections implement INotifyCollectionChanged and stuff like that) it normally requires that you massage your data a little bit to get it in a form suitable for the view to display. This is where the view model codes in. It packages up the data into view models that the view can easily display. This is what your view XAML will bind to. It must respond to events from the model layer and update itself.

(Then your controllers hang on the side somewhere - ideally using WPF commands - and make changes to the model, which fires events to update the view model)

Answer 6

前端（视图）和后端（模态）使用公共中介（视图-模态）进行通信（来回）的一种模式。

Answer 7

MVVM 模式是当 UI 与 xaml 友好的中间对象交互以获取您的 xaml 不友好的实际数据时。

Answer 8

我会说：“用于分离用户界面及其逻辑之间的关注点的呈现模式”

Answer 9

An improved answer:

MVVM is all about the future; you want to separate your application logic from the framework so that either the framework can evolve, and your app may not have to change, or your app can evolve and you won't have to worry so much about changing the actual UI aspects.

Actually, MVVM is a refinement of a pattern that has been around for some time. I can remember evolving the pattern when I was working in MFC. There are at least two reasons for doing so. MFC or <> is fairly complex, and mixing MFC constructs in with your application logic makes the application kind of brittle. Example: replacing a listbox with a combobox (or selector in modern terms) is much more difficult if the logic for supporting the content of the list/selector is combined with the logic to manipulate list/selector itself.

Answer 10

Some really good one-sentence (or close to it) explanations already. I'll just add to it by saying that if you're past the basic level and you want an example of how to use MVVM in a real-world app that has menus, tool bar, options dialogs, docking tools windows, etc., take a look at SoapBox Core and this demo using SoapBox Core . It is open sourced so you can get lots of ideas.

Answer 11

Because you can't data-bind to your own codebehind

(only half joking here)