MVVM WPF design related query : use of UserControls

Question

I have one query related to designing WPF using MVVM

Here is the scenario :

1> I have one WPF screen which contains various user controls which are reusable in some other screens too.

2> Can i have separate ViewModel class for each of those user controls , what could be ideal design in this scenario

3> Should i separate my Viewmodel based on individual screen or on UserControls .

4> If i create separate viewmodels based on UserControls how i should integrate it .

Is there any design guidelines around this !!

Urgent Help appreciated ..

Answer 1

This post describes what I do in certain scenario, I don't know if it is a best practice or not but it works for me.

I create ViewModel for my Window that holds all the user controls, so this called ContainerViewModel and I create an instance of that Viewmodel and put it in the DataContext of the Window. From that moment all the UserControls can access that ViewModel with Binding. The next thing to do is to create a property on my ContainerViewModel for everty UserControl that holds the ViewModel for each UserControl. Then use binding to attach the usercontrols ViewModel to the DataContext property of the Usercontrol.

example of the viewmodels and a window with 2 listboxes instead of usercontrols: Viewmodel classes without any implementation but just empty classes to show the concept:

public class ContainerViewModel
{
    public ContainerViewModel()
    {
        ViewModelForControl1 = new Control1ViewModel();
        ViewModelForControl2 = new Control2ViewModel();
    }

    public Control1ViewModel ViewModelForControl1 { get; set; }
    public Control2ViewModel ViewModelForControl2 { get; set; }
}
public class Control1ViewModel { }
public class Control2ViewModel { }

Window xaml:

<Window x:Class="ConfigHellp.UI.Windows.ContainerWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="clr-namespace:ConfigHellp.UI.ViewModel"
        mc:Ignorable="d"
        DataContext="{DynamicResource ContainerViewModel}"  >
    <Window.Resources>
        <vm:ContainerViewModel x:Key="ContainerViewModel" d:IsDataSource="True" />
    </Window.Resources>
    <StackPanel>

        <ListBox DataContext="{Binding ViewModelForControl1}" />
        <ListBox DataContext="{Binding ViewModelForControl2}" />
    </StackPanel>
</Window>

Answer 2

Hi,

this depends on how complex the embedding of the UserControl into the environment is. If you think that its to much effort to build the view model logic for your user control again and again (which is also a very nice source for mistakes), you should infact encapsulate the logic in a single viewmodel for your control. If the user control will be an ListItem for example, i generally suggest you to build an own viewmodel for the control.

The infrastructure will be than:

A general viewmodel for your WPF screen, which holds instances of the viewmodels for your usercontrols. That DataContext of the screen will be the general viewmodel. The users controls's DataContext will be a Binding to the PropertyPath of the user control viewmodel in your general viewmodel. e.g:

In WPF Screen:

<ListBox  DataContext="{Binding}" ItemsSource="{Binding Path=ItemList}">
    <ListBox.ItemTemplate>
         <yourControls:YourUserControl />
    </ListBox.ItemTemplate>
</ListBox>

In the general viewmodel:

public class ScreenViewModel : INotifyPropertyChanged
{
    private ObservableCollection<YourUserControlViewModel> _itemList = 
        new ObservableCollection<YourUserControlViewModel>();

    public ObservableCollection<YourUserControlViewModel> ItemList
    {
        get { return _itemList; }
        set { _itemList = value; }
    }
}

This will automatically generate a your user control for each viewmodel in the ItemList of your general view model.