Removing UserControl code behind for use with MVVM

Question

I am trying to create a user control using MVVM. Basically I am trying to wrap a combobox that will pull data from a respository. This will allow me to use the same combobox in many different views in my application. There will be many of the wrapped comboboxes throughout the application.

I was easily able to create this control using a DependencyProperty and code-behind. I am now trying to convert this to MVVM and am having trouble figuring out how to get the value back to /from the ViewModel that in bound to the View where my combobox is located.

Any ideas or suggestions would be greatly appreciated at this point.

Thanks, Eric

Answer 1

It is perfectly acceptable to use a UserControl that has code behind in it when using MVVM. If you really want to move the functionality out of the UserControl, then move it to whichever parent view models will require it. If you don't want to have the same code repeated in several places, you could encapsulate it in a class and add an instance of that class as a property to each of the relevant view models.

Answer 2

if you have a viewmodel that will pull data from a respository - you can use the same viewmodel in many different viewmodels in your application :)

and if you use a datatemplate your views know how to render this viewmodel

 <DataTemplate DataType="{x:Type local:MyPullDataViewmodel}">
   <view:MyCoolPullDataShowComboboxUserControl />
 </DataTemplate>

Answer 3

It's pretty easy.

Let's say you have:

MyUserControlView.xaml

MYUserControlViewModel.cs

MyMainWindowView.xaml - For your MainWindow view (the one containing the UserControl)

MyMainWindowViewModel.cs - Your MainWindow ViewModel.

And you want to bind List<string> MyListToBind And leave the code-behind completely empty.

MyUserControlViewModel.cs

public class MyUserControlViewModel
{
private List<string> _MyListToBind;
public List<string> MyListToBind { get; set;}
}

MyMainWindowViewModel.cs

public class MyUserControlViewModel
{
private MyUserControlViewModel _MyControlViewModel;
public MyUserControlViewModel MyControlViewModel { get; set;}
}

MyMainWindowView.xaml

<Window ...
xmlns:my="clr-namespace:NamespaceContainingYourUserControlView>
<my:MyUserControlView DataContext = "{Binding Path= MyControlViewModel}"/>
</Window>

MyUserControlView.xaml

<UserControl ...>
<DataGrid ItemsSource = "{Binding Path= MyListToBind}" .../>
...
</DataGrid>
</UserControl>

• This doesn't support ViewModel updating View. To do that You have to use either DependencyProperties as you did instead of normal variables (as i did) or use INotifyPropertyChanged(google it, you'll get tons of examples) and OnPropertyChanged event.
• You might read up on DataTemplates they are really useful in data binding.

You can find this usefeul:

http://www.youtube.com/watch?v=BClf7GZR0DQ

I sure as hell did ! Good luck.