This project is read-only.

Support for a Shell in Metro Application

Jul 9, 2012 at 3:00 PM

Hi Andy,

Great project works wonderfully... But is there someway to have a Shell Page/Window which will be the container of the metro app and then navigate between views within the Shell? I was trying to play around with the Bootstrapper but to no avail.

Thanks in advance,


Jul 10, 2012 at 9:54 AM

Hi Kuda,

Great question!

By default the Cocoon framework fills the full window with the view to be consistent the way that the Visual Studio templates are designed. There is however an extensibility point to allow you to alter this behaviour. All you need to do is to create a custom INavigationTarget implementation and export this via MEF (assuming you are using the default composition container). The NavigationManager will then use this to display each page rather than using the default WindowNavigationTarget (which just calls "Window.Current.Content = (UIElement)page;"). If you set up the shell page as the INavigationTarget implementation then you can manually set this to be the window content in the bootstrapper, and implement the NavigateTo(...) method to place each page into the relevant location in the shell.

Hopefully this points you in the right direction. This is something that would be best explained with some sample code so I'll try to put this together and write a blog post sometime in the next week or so.



Jul 11, 2012 at 9:04 AM

Thanks for the reply Andy,

It does point me in the right direction, implementation wise i'm not sure how to go about it. I will do some exploring, some sample code would be greatly appreciated.

Thanks again for your great work.

Jul 18, 2012 at 5:33 PM
Edited Jul 18, 2012 at 5:37 PM

Hi Kuda,

I'm still working on a full sample to post on my blog, however I've got a proof of concept working and I can share some of the code with you to get you going with this.

I have added a "ShellPage.xaml" to my project that contains the application shell (Note that you do not need to attribute this with a PageExportAttribute as we will not by navigating to this through Cocoon). I took the Visual Studio "Basic Page" template and added a ContentControl into the portion of the page where I wish my navigation to occur. This is bound to a "Content" property in my view model

<ContentControl Content="{Binding Content}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

I have also added a "ShellViewModel.cs" file which derives from BindableBase (this should be added in the "Common" folder by most of the Visual Studio templates). This implements INavigationTarget and also exports this interface via MEF. The NavigateTo(...) method then simply ensures that the view is created and bound to the viewmodel and then sets the content property.

using Cocoon.Navigation;
using System.Composition;
using Windows.UI.Xaml;

namespace CocoonShellSample.Pages.Shell
    public class ShellViewModel : BindableBase, INavigationTarget
        // *** Fields ***

        private object content;
        private ShellPage shellPage;

        // *** Properties ***

        public object Content
                return content;
                if (content != value)
                    content = value;

        // *** INavigationTarget Methods ***

        public void NavigateTo(object page)
            if (shellPage == null)
                shellPage = new ShellPage();
                shellPage.DataContext = this;

            this.Content = page;

            Window.Current.Content = shellPage;

Jul 19, 2012 at 8:30 AM

Hey Andy,

Thank you for this post, I was on the right track exploring different scenarios but was not quite there yet, this post from you just put me in the right direction.

Thank you kindly,


Aug 6, 2012 at 9:06 PM

Hi Kuda,

Just to let you know that I've posted the blog entry on implementing an application shell using the Cocoon framework.

The blog entry is here and the sample code available from the CodePlex downloads here.

Hope this helps,