Creating a Ribbon-like experience using nRoute

Apr 19, 2010 at 9:16 AM
Edited Apr 19, 2010 at 9:19 AM

Hi, I've been working on a prototype using nRoute (WPF) and so far I found it REALLY cool. However I'd like to get your opinion on my current approach for creating a Ribbon-like experience using nRoute features and any suggestions for other ways to go.

My goal for the prototype is to have a composable UI, kind of like with Prism.

So I have a Shell and then some modules. Ideally I would like the Shell to define the base layout and the modules inject content into it (specifically the Ribbon). My UI is quite simple, it has a "ribbon" area and two content areas (one which is single-active-content kind of area and one which is a tabbed document area, think Visual Studio - Solution Explorer + open files).

My design so far:

  • Infrastructure (has IRibbonService and RibbonItem class)
  • Shell (View has TabControl which will "be" the ribbon)
  • Module1
  • Module2

The workflow is like so for a concrete example:

  1. 1. Module1 contains a class decorated with [MapModule] attribute, whose Initialize() method is called
  2. 2. The Initialize() method gets a reference to the IRibbonService and calls its .AddRibbonItem(ribbonItem) method. The parameter is an instance of RibbonItem, which has, let's say, a Title property and an Url property.
  3. 3. The implementation of IRibbonService is just a class which exposes an ObservableCollection of RibbonItems at this point.
  4. 4. The Shell's ViewModel re-exposes the RibbonItems.
  5. 5. The Shell's View contains the TabControl which is bound to the RibbonItems exposed by the VM
  6. 6. The TabControl's ContentTemplate contains a NavigationContainer whose Url is bound to the Url property of the RibbonItem.
  7. 7. This triggers the loading of the apropriate ribbon view UI (each Module contains its necessary ribbon views/view-models which it "injected" at step 2)

While this works ok and seems quite disconnected, it's quite likely that I'm missing out on some nRoute specific features which could make my life even easier (navigation adapters?). So, if you have any ideas about this please share. The only thing is that I'd really like for the conceptual composition model to remain the same, namely that each module is disconnected from the shell and just injects its UI as needed. Thanks a lot :)