WPF Caliburn.Micro/mvvm Navigation

Question

I\'m building a project, and one of the biggest problems I\'ve come across until now is navigation.
I\'ve been looking for some time now for examples of caliburn.micro/mvvm

Answer 1

Have a read about Conductors and Screens on the official documentation.

As a simple example, your ShellViewModel could be a Conductor of one active screen (i.e. only one screen becomes active/inactive at a time):

public class ShellViewModel : Conductor<IScreen>.Collection.OneActive

You can then set the ActiveItem of the Conductor to the view model instance that you wish to be currently active:

this.ActivateItem(myMainViewModel);

A collection Conductor type also provides an Items collection which you can populate as you instantiate new windows. Viewmodels in this Items collection may be those that are currently deactivated but not yet closed, and you can activate them by using ActivateItem as above. It also makes it very easy to create a menu of open windows by using an ItemsControl with x:Name="Items" in your ShellView.

Then, to create the ShellView, you can use a ContentControl and set its name to be the same as the ActiveItem property, and Caliburn.Micro will do the rest:

<ContentControl x:Name="ActiveItem" />

You can then respond to activation/deactivation in your MainViewModel by overriding OnActivate/OnDeactivate in that class.

Answer 2

In ShellView you use a content control like this:

<ShellView xmlns:cal="http://caliburnproject.org/">
     <StackPanel>
           <Button Content="Show other view" cal:Message.Attach="ShowOtherView" />
           <ContentControl cal:View.Model="{Binding Child}" />
     </StackPanel>
</ShellView>

ShellViewModel:

public class ShellViewModel : Screen
{
     private object Child;

     public object Child
     {
           get{ return child; }
           set
           {
                if(child == value)
                     return;
                child = value;
                NotifyOfPropertyChange(() => Child);
           }
     }

     public ShellViewModel()
     {
         this.Child = new MainViewModel();
     }

     public void ShowOtherView()
     {
           this.Child = new FooViewModel();
     }
}

So this is a very basic example. But as you see, your ShellView provides a ContentControl, which shows the child view. This ContentControl is bound via View.Model to the Child property from your ShellViewModel.

In ShellView, I used a button to show a different view, but you can also use a menu or something like that.