Monday, February 9, 2009

How to use the controls from NavigationWindow in your own Window

I've made a control containing back and forward buttons and a history menu in the style of IE 7. The XAML has been lifted directly from the WPF NavigationWindow template and converted to a control so it can be used in the normal way.

Here's a screenshot of the controls I am talking about (magnified 2x here):

These are the step I went through to do this:

  • A new Custom Control was created named NavigationControl. This was changed to derive from System.Windows.Controls.Selector as the control will contain a list of items of which one can be selected.
  • The BAML Viewer plugin for Reflector was used to extract the default style for the Navigation Window. The template XAML was copied and pasted to the template for NavigationControl.
  • The various components were extracted out into separate resource dictionaries for the different components to aid readability.
  • The button XAML was repeated for the two buttons. This was converted into one and a trigger was added to switch between the two.
  • A class called ThemedResourceDictionarySelector was created to assist in defining the themed parts of the template. This meant that the entire template did not need to be repeated for each theme.
  • Code behind was added so that the menu was correctly populated when the items of NavigationControl changed.

Download source code

1 comment:

Irish Rover said...

Love it - exactly what I was looking for!