Question

I’m a novice WPF programmer. I’m trying to add some structure to my code: both User Controls and MVVM.

Researching here, I’ve found that people recommend Caliburn.Micro. On the other hand, I’ve found some complaints here and elsewhere about Caliburn.Micro not playing nicely with UserControls.

So my question is: Does Caliburn.Micro play nicely with User Controls?

Answer 1

Yes, Caliburn.Micro plays nicely with user controls. It’s an opinionated framework, but not to the point of forcing you down a particular development path. As the answers to the linked questions suggest, you can always use plain old WPF binding if you have any particular issues.

In fact, I wouldn’t let those two links deter you at all, the first is describing a way of binding separate properties to a single user control, and the solution is valid. A better solution would probably be to use an ItemsControl with a custom DataTemplate, and then create a collection of DTOs on his view model which contain the property names and values.

The second link is stating how if you create a view (UserControl) and create an instance of the view in XAML, and you wish to bind it to a view model, then that is called view first, and you have to tell Caliburn.Micro where the view model is to bind to:

<UserControl ...
   cal:Bind.Model="EasyPlayer.MediaControl.NowPlayingViewModel" />

So, this conceptually can be thought of as a viewmodel/view rather than a UserControl with dependency properties etc.

In fact, you’ll find when you use Caliburn.Micro, you’ll probably use less and less UserControls to perform view composition. This is because it is very easy to create reusable pieces of UI using view models, views, and the view model first approach.

When you have a ContentControl in a view with the same name as a view model property on your parent view model, then Caliburn.Micro will locate the view of the corresponding view model, inject it into the ContentControl, and bind up the view/view model.

For example:

public class MyParentViewModel : Screen
{
  public MenuViewModel MenuViewModel { get; set; }

  public DetailsViewModel DetailsViewModel { get; set; }

  public MyParentViewModel()
  {
    this.MenuViewModel = new MenuViewModel();
    this.DetailsViewModel = new DetailsViewModel();
  }
}

<Grid> 
  <Grid.ColumnDefinitions> 
    <ColumnDefinition Width=".2*" />
    <ColumnDefinition Width=".8*" />
  </Grid.ColumnDefinitions>

  <ContentControl Grid.Column="0" x:Name="MenuViewModel" />
  <ContentControl Grid.Column="1" x:Name="DetailsViewModel" />

</Grid>