WPF - Swapping in and out xaml files to create different screen designs

Question

I am creating an application that uses the MS Ribbon Control. The ribbon has a several tabs. The first tab is labeled "View", the next is labeled "Configure".

Under View I show a view of our system, which is laid out in the Window1.xaml file. When I press the Configure tab, I would like the View to go away and be replaced by different xaml, preferably with different xaml than what is in Window1.xaml. The Ribbon control does not go away, but serves as a navigator for the different screens. Currently, when I press the Configure tab, I collapse the grid that contains all of the controls for the View screen (except for the Ribbon) and make visible the grid that contains the controls for the Configure screen.

When I add the xaml for the Configure screen to the Window1.xaml file, which is what I currently do, it of course is displayed in the Designer along with the View screen. Adding the xaml for the screens that would appear for the other tabs makes this impractical.

I am wondering a good way to do this. I would like to create xaml files for each of the "tab" screens and activate them when the tabs are pressed, as if each one were its own application that could come and go.

I don't know alot about Page navigation yet (I am only a few months old in WPF), but am thinking that might be a way to go. Not sure if the Ribbon plays very well in this scenario.

I would appreciate any direction. Thank you.

Answer 1

You should create make the contents of your View and Configure tabs into their own UserControls. That will still allow you to programatically swap them in and out but will give yout the advantage of being able to edit each one seperately in your designer.

If you are using Expression Blend you can right click on any child container control in the Interaction Pane and the be given an option to "Make Control". If you do that on your Configure and View tabs most of the work will be done for you.

Answer 2

This is usually referred to as "skinning" your application, here is one article about skinning just part of your app. If you google skinning and WPF you will get a lot of example code on good ways to do this.

Answer 3

this could perfectly be achieved by using CompositeWPF's RegionManager by adding the views to the regions and Deactivate them when another view should be display. At least that's what i did in a quite similar scenario and it worked great. and as you stated that you want them to behave "as if each one were its own application", modularity comes for free with compositewpf.

Answer 4

I would use a Frame element. It allows you to load XAML from other pages using the source property like this:

<Frame Source="Configure.xaml"/>

This way when you press the configure button, you can set up an event that creates a new TabItem with a frame element as content which will load the XAML you want to see.