NavPane

DevComponents.Silverlight.Controls.NavigationPane is modeled closely on the navigation pane in Microsoft Outlook.

NavigationPane currently supports 5 different color schemes: Office 2010 Blue and Silver and Office 2007 Blue, Silver and Black.

NavigationPane is an ItemsHostControl. The native container for items in its Items collection is NavigationPaneItem. The items collection can be populated directly, in Xaml or in code, or it can be populated indirectly through the ItemsSource property. Items can be NavigationPaneItem or they can be regular Clr objects. If the latter, then it is necessary to supply a DataTemplate which shows how the items are rendered in the UI. Supply the data template via property ItemTemplate. Alternatively, you can define a typed data template.

NavigationPane has an expanded state and a collapsed state. In the collapsed state content for selected item can be viewed by opening the popup. Property IsExpanded is used to get or set whether the control is expanded. If the control is collapsed, then IsPopupOpen gets or sets whether the popup is open. Default fixed widths are set for both the expanded and collapsed states. To set alternative width for either collapsed or expanded state, use CollapsedWidth and ExpandedWidth properties.

By default, the selected NavigationPaneItem title is displayed at the top of the control. The title display can be turned off by setting AlwaysShowSelectedItemTitle to false. To set a data template for showing how to display the title for all pane items, use the SelectedItemTitleTemplate property.

Content of selected tab item is displayed in the area just below the title when expanded and in the popup when collapsed. Use SelectedItemContentTemplate to set a data template which is applied to all navigation pane items.

Get or Set the currently selected item via the SelectedItem property.

NavigationPaneItem

The container for items in the Items collection of NavigationPane is the NavigationPaneItem. Available pane items are displayed below the selected item content display. There are two areas, a main area and an overflow area. The end user can move items from one to the other by dragging the splitter that is between the content and the pane items. To set the initial number of items in the main display, use property NavigationPane.LargeItemsCount.

Each NavigationPaneItem should have a value for its Header property which is displayed when it is listed in the main area. The Title is optional, if not supplied, then the item’s Header is used as its Title. ImageSource should refer to the location of an icon 24×24 pixels in size. This image is displayed next to the header in the main items list. SmallImageSource is an optional value providing a reference to a 16×16 pixel image to be displayed in the overflow area. If this value is not provided, then the larger image is resized to fit into this space.

The value of the Content property of the currently selected pane item is displayed by the navigation pane in its content area.

Examples

Here is a simple example for adding a Navigation Pane in Xaml:

(dc = namespace DevComponents.Silverlight.Control)

<dc:NavigationPane>
    <dc:NavigationPaneItem Header="Contacts" ImageSource="images/Contacts24.png">
        <Border Background="Red"/>
    </dc:NavigationPaneItem>
    <dc:NavigationPaneItem Header="Tasks" ImageSource="images/Tasks24.png">
        <Border Background="Yellow" />
    </dc:NavigationPaneItem>
    <dc:NavigationPaneItem Header="Mail" ImageSource="images/Mail24.png">
        <Border Background="Blue"/>
    </dc:PaneItem>
</dc:NavigationPane>

The same thing in code (c#) looks like this:

NavigationPane navigationPane = new NavigationPane();
navigationPane.Items.Add(
    new NavigationPaneItem
        {
            Header = "Contacts",
            ImageSource = new Uri("images/Contacts24.png", UriKind.Relative)
        });
navigationPane.Items.Add(
    new NavigationPaneItem
        {
            Header = "Tasks",
            ImageSource = new Uri("images/Tasks24.png", UriKind.Relative)
        });
navigationPane.Items.Add(
    new NavigationPaneItem
        {
            Header = "Mail",
            ImageSource = new Uri("images/Mail24.png", UriKind.Relative)
        });

Be sure to check out the sample projects: NavigationPaneSample and NavigationPaneMVVMSample as these each provide extensive examples of how to use the NavigationPane.

Related posts:

  1. Rating Control for Silverlight Quick Start Guide
  2. Ribbon Quick Start Guide (Silverlight)
  3. Silverlight Toolbar Quick Start Guide
  4. Silverlight Schedule Control Quick Start Guide
  5. Schedule Control Quick Start Guide (Silverlight)