How to define the usercontrols in mvvm pattern?

Question

I using from mvvm in my application. I want know how to define my user control in mvvm pattern.

Must I define it by using from mvvm, or I can define it generally?

Answer 1

Let's just call the control that embeds the user control MainWindow, and the user control UserControl. Since you are in MVVM pattern, you have at least one View Model for the outer view - I usually use the name MainVm. You have two choices for the user control: They can share the same View Model, or you could have a sub view model, just for the UserControl, i.e. UserVm.

For your first choice, you do nothing. You define UserControl (Visual Studio 'add new item' -> User Control is a pretty good start). Then, you simply embed it in Main Window.

<Window
    x:Class="SO.MainWindow"
    ...
    xmlns:src="clr-namespace:SO"
    ...
    >
    ...
    <src:UserControl />
    ...
</Window>

UserControl will inherit the same DataContext from MainWindow, and do all the {Binding} as you would do in the MainWindow.

If you want to have a sub view model (UserVm) - it would typically be a public property of the MainVm (say, userVm). In that case, you'll set the DataContext of the UserControl when you reference it.

<src:UserControl DataContext="{Binding Path=userVm}" />

Another popular paradigm would be to declare the DataTemplate instead of the UserControl. If you do that, you just need to put the UserVm (either instantiate it in the XAML, or through binding):

<Window x:Class="MainWindow" ...>
    <Window.Resources>
        <DataTemplate x:Key="UserDt">   <!-- or user TargetType instead of x:Key -->
            ...
        </DataTemplate>
    </Window.Resources>

    ...

    <!-- You can put in a ContentControl like here: -->
    <ContentControl Content="{Binding Path=userVm}" 
                    ContentTemplate="{StaticResource UserDt}" />

    <!-- or, if you defined TargetType for the DT, you can simply instantiate
         the sub VM here. I don't like this apporach but it exists. -->
    <src:UserVm />
</Window>

Answer 2

I think that depends on the user control. The user control can be just a view, in which case you would compose a larger control or page which has this user control as part of the whole. The larger control or page would provide the view and the view model parts for this view.

Or you could create a self contained user control which has all of mvvm and use events to interact with the larger user control that it is a part of.

I suspect you'll get better reuse and modularisation with the second approach.

In short: it depends.