MVVM View vs. Control

November 3, 2013

no comments

In the MVVM world, Views are attached to ViewModels. How can a view be implemented? Typical answers for say, WPF, are: Window, User Control and Data Template. Similar answers exist for Windows Phone and Windows 8, where “Window” may be dropped or replaced by Page.

This is certainly true, but about that User Control? Can any user control automatically be considered a View? Not quite.

The distinction between view and control (user control or otherwise) is based on reusability and dependency. A View requires a ViewModel to give it context. A View cannot function without a ViewModel. Typical XAML View would hook up to properties exposed by the ViewModel like the following:

<TextBox Text=”{Binding ItemName, Mode=TwoWay}” />

The lack of Source or ElementName in the binding indicates that the source is the closest DataContext, which is typically the ViewModel instance attached to the View.

The View is completely dependent on that ViewModel for data (and possibly commands to invoke), and is not intended to be reused in other applications. This is regardless of the actual implementation object, whether that is a Window, User Control or Data Template.

A User Control, on the other hand, when built as a control (and not a view) is independent and hopefully reusable. If it has any binding expressions in its XAML, they bind to its own properties, which of course are meant to be set by the control’s client. Such a control can typically be reused in many apps. A View may, for instance, use the Control as part of its user interface.

Here’s a simple example: login control/view.

Such a control, when built as a view would have a TextBox for username, similar to the following:

<TextBox Text=”{Binding UserName, Mode=TwoWay}” … />

When built as a control, that same TextBox would have markup similar to the following:

<TextBox Text=”{Binding UserName, ElementName=This, Mode=TwoWay}” … />

Assuming “This” is the x:Name of the User Control itself (not an external name), and UserName is a dependency property that the control exposes.

For the latter case, a Login View would be able to use the Login User Control as part of its UI, perhaps adding a “Forgot password” button to the UI. The aforementioned username would be hooked up as follows:

<mycontrols:LoginControl UserName=”{Binding UserName, Mode=TwoWay}” … />

Where the second UserName is a property of the ViewModel; in this simple case, with the same name as the property of the login control itself; this is certainly not necessary.

To summarize, a true control is independent of any ViewModel, and is built as such for maximum reusability. A View is much more specific, serving the purpose of a particular application, where reusability is not necessary nor needed; it’s tuned to the specific app’s requirements.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>