If you have ever used Microsoft Outlook 2007 or even earlier versions (and the chances for that are pretty high), then you are already familiar with the concept of the navigation pane.
Navigation pane consists of two major parts content and buttons. Depending on the selected button, the content part will be changed. The content part can host a number of different controls, such as tree view.
 |
In this recipe, I will show you how easy it is to use tab control from WPF and create a basic navigation pane control that resembles the look and feel of the Outlook's navigation pane.
However, be sure to understand that this is not a replacement for third-party navigation pane controls, which offer much better and richer functionalities; but of course, all those goodies come at some price.
So, if you need a really simple navigation pane, let's say for your prototyping efforts, then you can use this recipe and create one. If you are creating a commercial, line-of-business application, then you should consider getting one of those fully blown controls available on the market.
That being said, this recipe is useful even if you go and buy third-party controls because general usage ideas and guidelines are equally applicable. And, it does seem surprising at the moment, but basic guidelines used for tabs may be applicable to a navigation pane pattern too.
Start your Expression Blend 4 and then select New project... From the dialog that appears, select WPF and then WPF Application. Make sure that Language is set to C# and Version is 4.0. At the end hit OK.
1. After your new WPF project has been created, you should notice that under the Objects and Timeline pane, Window and LayoutRoot grid controls are visible.
2. Go to Asset Library and draw a TabControl on top of LayoutRoot. With TabControl selected, go to the Properties pane and set all margin values to 0 and Width to 250. This will align the tab control to the left-hand side and stretch it from the top to the bottom of your window, giving it a specified width.
3. Right-click on TabControl under the Objects and Timeline pane and from the drop-down menu, click on Add TabItem. Repeat this once again so that you end up with four tab item controls added under the TabControl parent. Your visual tree should look somewhat similar to the following screenshot:
 |
4. Now select each TabItem and under the Properties pane, locate the Common Properties section and Header property. For each tab item, type the header value. You can go with the values found in Outlook 2007, for example, Mail, Calendar, Contacts, and Tasks.
5. Select TabControl and under the Common Properties section, change TabStripPlacement to Bottom. If you now go and press F5 to test your application, you will notice that tabs are located at the bottom. We are still fairly far away from the complete navigation pane found in Outlook but you can start to see where we are heading.
 |
6. The next step is modifying the control template of the tab control. Right-click on TabControl and from the drop-down menu, click on Edit Control Parts (Template) | Edit a Copy... a new dialog Create Style Resource will appear. Keep the default Name (Key). Notice the possibility to define this template on an application- or document-wide scope. Also, you can create a separate resource dictionary and use that file for all specific styles and templates. I will choose that approach this time and will use the same file for all other styles that I am going to create in this recipe. So, click on New... and accept the defaults from the new dialog. Now hit OK on the first dialog, and just make sure that under the Define in section, the resource dictionary is selected with the name of the RD file that you have just created.
7. Now you are in template editing mode. If you now take a look at the Objects and Timeline pane, you will notice that the scope has been set to TabControlStyle1 our TabControl template. This enables us to modify the look of our controls without making an impact and destroying their functionality.
8. Click on HeaderPanel and notice that HeaderPanel is of the TabPanel type. You can see that at the very top under the Properties pane. We need to change TabPanel to StackPanel. To do that, press F11 to switch to "XAML" or "Split" view, which will enable you to edit the XAML code. Locate the following line:
<TabPanel Margin="2,2,2,0" x:Name="HeaderPanel" Grid.Column="0" Grid.Row="0" IsItemsHost="true" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
And change it to:
<StackPanel Margin="2,2,2,0" x:Name="HeaderPanel" Grid.Column="0" Grid.Row="0" IsItemsHost="true" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
9. Now save all your files and go to the
Window1.xamlfile (basically, your main file).10. Press F5 to test your application now and notice that the tabs are now stacked pretty much in the same way as they are in Outlook 2007: one above the other.
 |
11. Let's go and make more changes. Select all tab item controls (CTRL + click) and then change their height to 32. Also, change the left and right margin values to -2. Now, your navigation pane is starting to look like a real one from Outlook.
12. Take a look at the There's more... section (of this part) for further possibilities of customization and changes.
The key for understanding how this pattern and recipe works is pretty simple. The navigation pane control seen in Outlook is nothing more than TabControl with tabs stacked vertically, and that's the whole truth. We have added simple TabControl to our artboard and decided to change its control template.
Once we were there, everything became pretty simple and straightforward. First step was to change TabPanel to StackPanel. Literally, we just changed one thing in the whole of XAML code and our tabs have stacked vertically one above other, which is the basic characteristic of StackPanel as a control.
After that everything else was pretty much just cosmetics treatment. We've changed the tab item's height to 32 and we have made some changes to the Margin property in order to align and stack each and every tab item nicely.
Again, I find it necessary to repeat that this is not a replacement for third-party navigation pane controls that are offering better and richer functionalities.
In this section, I will show you how to add more functionalities and even further customize your navigation pane.
Remember that we have changed the control template of our TabControl but that the functionality has been preserved completely. As a consequence, the process of hosting and adding different content to tabs is the same as it is for regular tabs.
1. Let's continue from the last step in our recipe. If you expand any TabItem under the Objects and Timeline pane, you will notice that it is comprised of two major parts Header and Grid. Click on Grid to make it active.
2. Now you can add any control from Asset Library or any other object like you would on any other grid-like control. Try experimenting by adding different controls. In the code sample that you can download from this book's website, I've added a simple TreeView control under the Mail tab.
 |
Again, I will take it from the last step. So, our next challenge is to left-align labels such as Mail, Calendar, and others. To do this, we will need to edit a control template for the TabItem control.
1. Right-click on any tab item, let's say the first one with the Mail label. From the drop-down menu, click on Edit Control Parts (Template) | Edit a Copy..., and the Create Style Resource dialog will appear. Accept the suggested Name ( Key) and under the Define in section, select Resource dictionary. You'll remember that we defined our resource dictionary earlier as a single location where we will keep all our templates and styles. When ready, click on OK.
2. Now we are able to edit the template for our tab item. If you take a look at the Objects and Timeline pane, you will see the visual tree for our TabItemStyle1. Expand all nodes until you can see an object called Content (which is of ContentPresenter type). Click on it and go to the Properties pane. Locate the Layout section and you will see the HorizontalAlignment and VerticalAlignment properties. They are surrounded with a yellow border, and from them, you can see a little, yellow square, which indicates that these values have been bounded to the control template.
3. We want to set our own bindings. Click on the little square and from the drop-down menu click on Reset. Do this for both the HorizontalAlignment and VerticalAlignment properties.
4. Now, set Left as the value for HorizontalAlignment and Center for the VerticalAlignment property.
 |
5. If you now go and hit F5, you will notice that the Mail label has been left-aligned, but that is not the case for the rest of the labels. The reason for this is the fact that in previous steps we have edited a copy of the control template and applied it to only the first tab item.
6. In order to get all labels left-aligned, go to your
Window1.xamlfile and under the Objects and Timeline pane, right-click on the next tab item. From the drop-down menu, select Edit Control Parts (Template) | Apply Resource | TabItemStyle1.
 |
7. Repeat the same procedure for the rest of the tab item controls and then hit F5 to test your application. Now all the labels are left-aligned.
8. Note that you can also add other controls in our TabItem style, for example, images. To do that, refer to the Tabs recipe in this book and follow the instructions given there for adding icons to tabs.
As its name implies, the navigation pane is a control or pattern (if you like) that is focused on navigation. But what type of navigation? Is it the same as journal navigation?
First and foremost, a pattern or control (if you prefer calling it that) is never used alone. It is (or should I say, it must be) used as part of a wider navigation concept. While a regular tab control with specific tabs is useful for property pages, dialogs, and different types of content organization, the navigation pane is great for application-specific navigation.
In the real world, it means the following you will position the navigation pane on the left-hand side of your application. When you click on specific buttons (tabs that is), they will expose content in their upper "container" part. In our recipe, that was the TreeView control added on the Mail tab.
The most relevant and interesting things happen when users click on different items within the container part of a navigation pane. Then, application-wise navigation occurs. If you have challenges picturing this, go to Outlook and simply try clicking on Mail, and after that on the Inbox, Outbox, or Sent Items folders. You will notice that the right-hand part of your application changes. Virtually the same pattern is available in Microsoft Dynamics products such as NAV or AX, and many others as well.
I've mentioned earlier that most guidelines and suggestions that I've outlined for tabs hold true for the navigation pane as well. However, I will reiterate some of them and also point out some differences right here:
Tabs (or buttons) such as Mail, Calendar, and so on must be linear in their structure, which means that there is no hierarchy in their organization Mail is not a parent of Calendar and so on. Simply put, each and every tab or button must be mutually independent. But you are free to host hierarchy-based controls such as a "tree view" within your navigation pane.
The navigation pane is for navigation. It's not a regular tab control used for organizing your content, controls, and properties. It's not a wizard too: don't ever use it as a control that should guide users through wizard-like processes.
The first tab or button should be the one that is most likely to be most used and it should be selected by default. Again, using Outlook as a sample, the first tab is Mail the one that is being used the most.
Feel free to use icons. That was not something that I've been encouraging in the case of tabs, but here, you have enough space and you don't have to be afraid that you will make too much of a visual clutter. Sure, that holds true only if you use nice, clear, recognizable, and understandable icons.
Don't use any kind of terminating or similar type of button within the container part of a navigation pane; no OK, Cancel, or Apply buttons here. It's called the "navigation pane" and it should do just that help your users to navigate to or expose different parts of your application and help them get their jobs done quickly.
Have I mentioned that in your real life applications, you should use full-blown, third-party navigation pane controls and not this? We've created a really basic one here? This was a nice learning example and all of the suggestions stated here are applicable to real-world commercial navigation pane controls. And yes, I'm not really able to give you any suggestions on which control you should use, but there are numerous vendors offering them and I'm sure you will find them easily on the Internet.