How can I implement MVVM in Silverlight with Navigation service?

Question

I'm about to start my first silverlight project (Silverlight 4.0) and have spent some time researching best approaches etc. I'm going to be using MVVM and have spent last few days looking at navigation.

First of all, I noticed that a lot of MVVM examples don't implement the MainPage as a View/View Model. The MainPage contains the nav frame and Uri Mappings and then navigate to pages which follow view/view model. Is it standard when using MVVM and the navigation service that the main page is not implemented as a View/View Model? For example, the Silverlight 4 training kit contains the event manager sample and the Main Page there has lots of code behind, i.e. handling navigation events like Navigated and NavigatedFailed. But all other pages are View/View Models.

Second, with the navigation service the logic to change the navigation is now done by the View and not controlled by the View Model (which goes against some of the ideas behind MVVM). Some approaches on the net use messaging from the ViewModel to the View, or pass the Navigation service to the ViewModel and the navigation controlled there. Are either of these approaches better than the other?

Ideally, I'd like to find an example where the Main Page follows View/ViewModel and the ViewModel controls the navigation and the Views are free from code behind. Am I asking too much??!

FYI I'm not using PRISM or MVVM Light.

Cheers

Vinicius Vinicius · Accepted Answer · 2012-05-30T17:21:04

In my project we have created a container inside MainPage and every view is loaded there. This way we don't need to put any code in code-behind. When the main page is initiated as RootVisual on App, MainPage receive as DataContext a class where we've created a shell. The container receive a DP from this class and we use events from shell to load views.

Here is the code of the container:

<ContentControl Name="region1ContentControl" Content="{Binding Path=MainContent}" Style="{StaticResource ContentControlStyle}" Grid.Row="1" Margin="0,30" />

The MainContent property :

public static readonly DependencyProperty MainContentProperty =
        DependencyProperty.Register("MainContent", typeof(System.Windows.Controls.Control),
        typeof(MainPagePresenter), null);
    public System.Windows.Controls.Control MainContent
    {
        get { return (System.Windows.Controls.Control)GetValue(MainContentProperty); }
        set { SetValue(MainContentProperty, value); }
    }

The shell + where the views are loaded

var presenter = (Bxf.IPresenter)Bxf.Shell.Instance;

        presenter.OnShowView += (view, region) =>
        {
            if (region.Equals("MainContent", StringComparison.InvariantCultureIgnoreCase))
                MainContent = view.ViewInstance;
            else if (region.Equals("DetailContent", StringComparison.InvariantCultureIgnoreCase))
                DetailContent = view.ViewInstance;
            else
                throw new ArgumentException(string.Format(AppStrings.InvalidRegionName, region));
        };

MainPage code-behind :

    public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }
}

Did you see? Note: I'm not using Prism nor MVVM light too.

How can I implement MVVM in Silverlight with Navigation service?

1 Answers