WPF Navigation Window Control Template

After posting some LINQ posts I decided to return where I really belong, WPF…

So I was wondering on what I should experiment a bit with and I found out that there are not much resources on the Navigation Window. The Navigation window is a really cool component in WPF. Did you ever have a Page and put it as the StartupUri in the App.XAML, if yes definitely you have seen the Navigation window because by default WPF uses the Navigation Window as the parent control, for you to navigate the pages. This does not imply that you can only use the Navigation Window to navigate through the pages, you can also use the Frame control. It is important to state that the navigation work is not done by the Navigation Window, the navigation is done via the NavigationService.

In this post I am not going to talk much about how the navigation service works, I will focus on how one can create a ControlTemplate for the Navigation Window. Lets start by looking at some interesting properties of the Navigation Window. I will only mention 2 of these propertiessince we are only going to use these 2 for our ControlTemplate

Properties
– BackStack – Returns a list JournalEntryUri that represent all pages that you have a visited. Unfortunatly the JournalEntryUri is an internal class so you cannot actually cast to this type. Yet since we will use binding we will by pass this problem becuase binding works with reflection so all you need to know is the propeties that you need from this class which are the Name property (which gives you the name of the page in the BackStack) and the Source property which gives you a URI for the page.

– ForwardStack – Returns a list of JornalEntryUri that represent all pages that you have returned from by using the Back command or the NavigateJournal.

Commands (for more info on commands visit this post)
NavigationCommands.BrowseBack
This command does not take any parameters. All you have to do is execute it or in case you are using a button (or any other controls that have the Command property) set the Command property to the NavigationCommands.BrowseBack. The Can Execute of this command will return true only if you have a page in the BackStack.

NavigationCommands.BrowseForward
Basically this command is the the same as the BrowseBack command but it takes the navigation forward instead of backwards

– NavigationCommands.NavigateJournal
This command is used to navigate to a specific page. As a parameter this command takes a FrameworkElement that as DataContext has a JournalEntry. Yes quites strange but this is usually what you will have at hand when trying to execute the command (we will look at this later on)

Ok, so now that we are armed with some commands and properties that we can use let’s go ahead and start building our own template for a Navigation Window that has bread crumbs🙂

Lets start off by creating a basic control template with a back and forward button…

navwindow1.jpg

Ok, so what we created here is basically a control template for a Navigation Window that has 2 buttons for Back and Forward. Please note that I have a ContentPresenter that has the name of PART_NavWinCP. This is very important because the Navigation Window will look for a ContentPresenter of that name in order to show the pages inside it. Another important thing that we did in the code above is to set the NavigationCommands.BrowseBack to the Command property of the back button and the same for the forward button.

Now let us create our beloved bread crumbs…

navwindow3.jpg

I choose to use an ItemsControl for the bread crumbs. The ItemsSource for the ItemsControl is the BackStack property of the Navigation Window since this list has all the JournalEntries. I then forced the ItemsContol to use a WrapPanel as an Items host. The important part is the DataTemplate that I am creating. Basically I a creating a button that as Commands executes the NavigationCommands.NavigateJournal command. I am passing this command the Button object itself since this button object has the journal entry as data context (the data context for the button is “set” by the data template).

As you can see it is relativly easy to create a Control Template for a Navigation Window…. I created a nicer Control Template for the Navigation Window that you can go ahead and download…

P.S There is a problem with this. The problem is that the BackStack will give you the pages in the opposite order that you would want them🙂 so the bread crumbs would look like this

Page3 >> Page2 >> Page1

instead of this

Page1 >> Page2 >> Page3

I created my own WrapPanel so that it inverts the elements… All I had to do is open Reflector disassemble the code and change the order of the ArrangeOverride… You can find this in the download… Any questions please contant me – marlongrech@gmail.com

Have loads of WPF fun….

Downlaod Sources for sample

9 thoughts on “WPF Navigation Window Control Template

  1. I am not able to download the solution
    Can you please make the solution available.
    One question what i have here is where are u adding the control template. IS it in app.xaml ? How will the NavigationWindow pick and use this template?

  2. Marlon,

    Nice example. You are using some things that I want to do in my own application. The problem that I am running into is that I have a NavigationWindow class which is my StartupUri in the App.xaml. Unfortunately, I cannot get the templates and styles to be used in that scenario.

    If I change my StartupUri to be a Page, it works; however I have need of the NavigationWindow class in order to handle some of the navigation events. Do you have any ideas that may get me going again?

  3. I want to add a header (sort of like a title bar replacement) and change the colors of the navigation controls and add in breadcrumbs.

    The reason I need (I think) a NavigationWindow class is to handle some events when pages are finished doing their tasks which may include various data input and manipulation functions.

  4. Is it possible to open a page.xaml as a pop up window. i donot want to navigate within the browser, i want to move to a new page in new window. Is it possible.

    The problem is i have created all as pages and cant find a way to open a page as pop up window?
    Thanks

  5. How to implement the Bread-crumb-trail in XBAP?
    by changing the Type to Page i could see the arrow buttons but not the bread-crumb

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s