This project is read-only.

NavigationPane Documentation





How do I use the control

The control consists of two controls, NavigationPane and NavigationPaneExpander, both defined in a namespace named “NavigationPane”.
Once the NavigationPane.dll is referenced in your project and a xmlns is defined for the namespace, you can start using the controls.
Both NavigationPane and NavigationPaneExpander are HeaderedItemsControls, both having NavigationPaneItem control as expected child controls.
You can use other controls as child but in most cases loosing the capabilities of the NavigationPaneItem ( as an example: the ability to control the displayed icon ).

NavigationPane, has a single items container, and you control which items are shown in the buttons bar below simply changing a property: LargeItems.
If you have 10 NavigationPaneItems in the control, setting the LargeItems property to 2 will tell the control to fully display only the first 2 items, and to display the remaining items as small buttons.

Items can be Excluded ( not shown by control ) with the attached property NavigationPane.IsItemExcluded.

<Window 
... 
xmlns:s="NavigationPane" 
> 
  ... 
  ... 
  <s:NavigationPane HorizontalAlignment="Left" LargeItems="1"> 
    <s:NavigationPaneItem Header="Mailbox" Image="mail.ico"> 
    </s:NavigationPaneItem> 
    ... 
    ... 
  </s:NavigationPane> 
... 
</Window>

Creating Items programmatically

Refer to the example in demo app
http://navigationpane.codeplex.com/SourceControl/changeset/view/62164#1212892

Data Binding

Showing items from a data source.
Being a ItemsControl descendant the items in the control can be controlled with the ItemsSource, as would be done with any other ItemsControl descendant.

This xml file:
<?xml version="1.0" encoding="utf-8" ?>
	<workflow>
		<section name="section 1">
	<subsection name="subsection 1" />
		<subsection name="subsection 2" />
		<subsection name="subsection 3" />
	</section>
	<section name="section 2">
		<subsection name="subsection 1" />
 	</section>
	<section name="section 3">
		<subsection name="subsection 1" />
		<subsection name="subsection 2" />
	</section>
	<section name="section 4">
		<subsection name="subsection 1" />
		<subsection name="subsection 2" />
		<subsection name="subsection 3" />
	</section>
</workflow>
can be used to populate the Control:
<Window xmlns:s="NavigationPane">
	<Window.Resources>
		<XmlDataProvider x:Key="XMLFile1DataSource" Source="XMLFile.xml"/>
 
		<DataTemplate x:Key="DataTemplate1">
			<TextBlock Text="{Binding XPath=@name}"></TextBlock>
		</DataTemplate>
		<DataTemplate x:Key="DataTemplate2">
			<StackPanel>
				<TextBlock Text="{Binding XPath=@name}"></TextBlock>
				<ListBox	ItemsSource="{Binding XPath=subsection}"
					ItemTemplate="{DynamicResource DataTemplate3}">
				</ListBox>
			</StackPanel>
		</DataTemplate>
		<DataTemplate x:Key="DataTemplate3">
			<TextBlock Text="{Binding XPath=@name}"/>
		</DataTemplate>
 
	</Window.Resources>     
	<Grid DataContext="{Binding Source={StaticResource XMLFile1DataSource}}">  
		<s:NavigationPane	HorizontalAlignment="Left" Width="216"
				ItemsSource="{Binding XPath=/workflow/section}"
				ItemTemplate="{DynamicResource DataTemplate1}"
				ContentTemplate="{DynamicResource DataTemplate2}">
		</s:NavigationPane>
	</Grid>
</Window>

As seen in the example, to show the data, the control templates should be used.

ContentTemplate controls how the data in the xml file for each item should be shown to the user
ItemTemplate controls how the item button is displayed

However there is a problem with this approach: no icon can be specified for the button ( LargeIcon or SmallIcon )
This can be solved by adding an image to the ItemTempate. However the aspect of the button will not be the best, since it will remain an empty space for the icon in the left side of the button.

Tips when you are using MEF or you have need to dynamically load NavigationPaneItems in the NavigationPane

The NagivationPaneItem Style is done so that if the item is not in a NavigationPane Control, the item show up his contents.
This means that if you create a UserControl and then you replace the base class from UserControl to NavigationPaneItem (after updating the xaml of UserControl too )
You will be able to edit the NavigationPaneItem Contents in the IDE as if it was a UserContorl.
And then simply put in the NavigationPane the class you derived from NavigationPaneItem.

Here an example:

NavigationPane in the Window.xaml file

<Window xmlns:s="NavigationPane" ...
               xmlns:local="clr-namespace:MyAppNamespace"
>
  ...
  <s:NavigationPane HorizontalAlignment="Left" LargeItems="1">
    <local:MyNavigationPaneItem />
  </s:NavigationPane>
</Window>
MyNavigationPaneItem.xaml

<s:NavigationPaneItem 
    x:Class="MyNavigationPaneItem.MyNavigationPaneItem" 
    xmlns:s="NavigationPane" ...
    Header="Mailbox" Image="mail.ico">
  <Grid>
    <TextBox Text="Here the contents of you component" />
  </Grid>
</s:NavigationPaneItem>
MyNavigationPaneItem.xaml.cs the code behind file

namespace MyAppNamespace
{
 [Export("NAVIGATIONPANE_ITEMS"", typeof(NavigationPaneItem))]
 public partial class MyNavigationPaneItem: Stema.Controls.NavigationPaneItem
 {
  public MyNavigationPaneItem()
  {
    this.InitializeComponent();
  }
 }
}

Somewhere else in your project you create the Collection that will contain the NavigationPaneItems

...
 private Lazy<NavigationPaneItem, ITypeProviderMetadata>[] sections;
 [ImportMany("NAVIGATIONPANE_ITEMS")]
 public Lazy<NavigationPaneItem>[] Sections 
 {
  get { return sections; }
  set { sections = value; }
 }
...
For further explanations, see documentation about MEF on MSDN

How To Use the Design Time Dll

NavigationPane.Design.dll is a IDE integration dll. It will work both in Visual Studio 2010 and Expression Blend 4.
Just put NavigationPane.Design.dll in the same directory where you reference in your project NavigationPane.dll.

The main scope of the dll, is to have some default behavior only active when working in the designer.
A sample application is included in the project.

Where can I find some examples ?

Download the Latest Sources to run or analyze the sample application.

Last edited Jan 16, 2013 at 4:29 PM by 0xfefi, version 13

Comments

EricJilot Mar 12, 2012 at 7:45 PM 
One problem is that you sample app does not actually show using NavigationPane with MVVM. No instance of ObservableCollection<NavigationPaneItem>.