how to build MVVM style User Control?

2
votes

WPF: how to build MVVM style User Control?

In WPF we can design user controls, similar to Asp.Net or Winform.

In WPF we have MVVM design pattern, similar to MVC.

But in WPF is it possible to build MVVM style User Control?

I just can't get it - if it's a user control, it could be loaded in the toolbox bar, and drag-n-drop to a WPF page, how can it be MVVM? a WPF page is only a "View", so the user control is also only "View", no "ViewModel", right?

Thanks for your guys' replies. Is there a good simple example that I could read through the codes to understand?

4
wpfmvvmuser-controls

4 Answers

3
votes

Usually I create a WPF UserControl with the expectation that it will be used with a specific ViewModel.

For example, I might have a CalendarControl and a CalendarViewModel. The CalendarControl never references the CalendarViewModel directly, however it does expect to bind to a CalendarViewModel so will specify CalendarViewModel Properties in the bindings

In the WPF application, a ParentViewModel will usually expose a property of type CalendarViewModel and it is in charge of creating the CalendarViewModel. The Parent View will typically contain code that looks similar to this:

<Window.Resources>
    <DataTemplate DataType="{x:Type local:CalendarViewModel}">
        <local:CalendarControl />
    </DataTemplate>
</Window.Resources>

... 

<ContentControl Content="{Binding CalendarViewModelProperty}" />

An alternative (if using Drag/Drop) markup might look like this:

<local:CalendarControl DataContext="{Binding CalendarViewModelProperty}" />
1
votes

A well designed UserControl should be able to be used in many architectures including MVVM.

Generally speaking, you are not going to need to use an MVVM framework to build a UserControl. It would probably be overkill. MVVM is an architectural pattern that has a broader scope than most design patterns.

In designing your UserControl, there are good lessons from MVVM that you can follow:

  • Have a clear understanding of the data model that the UserControl is going to use.
  • Keep the presentation logic and data model decoupled in your design.
  • Using WPF, ensure that you can easily bind your model to the user control.
0
votes

Generally I use UserControl Views for my detail page alongside some kind of ItemsControl (ListBox/TreeView etc). My items controls are populated with objects that are wrapped in ViewModels. The detail page (UserControl) has it's datacontext set to the selected item property of the ItemsControl so that when an item is selected, the user controls datacontext is handed a SuchAndSuch ViewModel.

There are other ways to do this, it all depends on how you want to go. You can instance the control in code and assign it's viewmodel, you can set the viewmodel in the XAML definition. It all depends on what you want to use it for, and how your application is structured.

0
votes

A UserControl can have a ViewModel like every other View. When you use your UserControl in another Window, the ViewModel is instantiated when the UserControl is loaded. But which MVVM Framework do you use? I really suggest you to use one. (like CinchV2)