By default the Okra App Framework will display pages full screen, with each navigation replacing the previous
page with the next. There are some occasions however where it makes sense to have an application shell that
takes up the full screen, with the page navigation occurring in a region within this.
A typical example would consist of a fixed region dedicated to navigation at the top of the screen, with the
page content filling below. The end result looks like,
The key to creating an application shell in Cocoon is the INavigationTarget interface. This has only a
single method named NavigateTo(…). When implemented by an application, any calls to the navigation framework
will result in a call to this method with the page to display. The framework itself will handle the creation
and wiring up of views and view-models, the navigation stack, persistence and other aspects of navigation.
In our example application we will use the MVVM pattern to define our application shell, hence we have a ShellViewModel,
The ShellViewModel exposes a ‘Content’ property that will contain the page to display and will
be bound to in the view. In our NavigateTo(…) method we firstly create the associated view if
required. We then set the ‘Content’ property to the supplied page and this ensure that the view
is displayed in the window. Finally we mark the class as a shared export of INavigationTarget
using the MEF attributes. Note that since we will never be navigating explicitly to the shell
then we do not need to decorate this with a ViewModelExport attribute.
The ShellPage.xaml file contains the view for the application shell. This simply contains the
required elements for the upper portion of the screen, with a ContentControl bound to the view
models ‘Content’ property. It is within this ContentControl that the pages will be displayed.
The key elements are shown below,
When the application is run the NavigationManager will automatically locate the INavigationTarget
through the MEF export and direct all navigation through the newly defined shell.