WPF Caliburn.Micro / mvvm Navigation

Question

I am creating a project, and one of the biggest problems that I have encountered so far is navigation.
For a while I was looking for caliburn.micro / mvvm navigation examples, but they all seem very long, and I couldn't figure it out (starting here!).

Information about my project:
I want there to be an external window / shell with links / menu tabs that open pages according to the button clicked inside the inner part of the shell, and be able to open a page change from one.

Currently I have: ShellViewModel.cs, MainViewModel.cs, my models and my views. For now, all I need to know is to make the MainViewModel load inside the shellviewmodel at startup (using contentcontrol / frames ...) and how to navigate from one page to another.

You can also just write it in paragraphs and connect me with some useful examples, and I believe that I can continue from there. It would be better to get a detailed explanation of the material , if possible .

Answer 1

Read about conductors and screens in official documentation.

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

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

You can then install ActiveItem from Conductor into the instance of the view model that you want to activate at the moment:

 this.ActivateItem(myMainViewModel); 

The Conductor collection type also provides an Items collection that you can populate when creating new windows. The view models in this Items collection may be those that are currently deactivated but not yet closed, and you can activate them using ActivateItem , as described above. It also makes it easy to create open window menus using ItemsControl with x:Name="Items" in your ShellView .

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

 <ContentControl x:Name="ActiveItem" /> 

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

Answer 2

In ShellView, you use a content control similar to 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 simple example. But, as you can see, your ShellView provides a ContentControl that shows a child view. This ContentControl 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.