Tabs provide a simple way of presenting sets of controls or documents on separate, labeled pages. They are quite popular and most commonly associated with typical property windows. On the Web, they are also very popular as a means for content organization.
As a very general guideline, tabs are used when you are dealing with too much information on one page (it doesn't matter if it is a web or desktop application), which basically creates confusion making the specific content difficult to find and focus on.
Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application. Make sure that Language is set to C# and Version is 4.0. At the end hit OK.
In this example, we will add the Tab control as a part of our Silverlight 4 project:
1. After you have created your new project, under the Objects and Timeline pane, you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
2. The Tab control is not a part of the "default" Silverlight controls, so in order to use it, we have to add a reference to it. After you installed the Silverlight 4 SDK, you have obtained a library that contains a number of controls, among them TabControl.
3. Under the Project tab, go to References | Add Reference....
4. The Add Reference dialog box will appear. Navigate to a file called
System.Windows.Controls.dll, which is usually located in a path similar to:C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client.5. Select the file and click Open.
6. Now you will see
System.Windows.Controls.dllunder your References folder.7. Now, go to Asset Library available on the toolbox. Be sure to check Show All. Now you should be able to locate TabControl.
 |
 |
10. Let's add the third TabItem to our TabControl. Right-click on TabControl under the Objects and Timeline pane and from the drop-down menu, click on Add TabItem. Now you should see the third TabItem added to your TabControl.
11. Click on the first TabItem and under the Properties pane, locate the Header property (located under Miscellaneous section), and type in First tab. Do the same for the second and third TabItem typing Second Tab and Third Tab, respectively. Your tab control should look like the one in the following screenshot:
 |
12. As you will have noticed under the visual tree, each TabItem is comprised of the Header part and Grid. The Grid part is basically the Grid control in which we can put any content we want.
13. Select First tab and add two buttons (add them from the toolbox or Asset Library). Change their content (Properties pane, Common Properties section, Content property) to Button 01 and Button 02. Be sure that you have selected the Grid element of the specific TabItem to ensure that the buttons will be added to exactly that TabItem.
14. Repeat the same procedure: adding one button to the Second tab and one to Third tab. Set their content to Button 03 and Button 04 respectively.
15. With this, you must have got a pretty clear understanding of how you can add controls to different TabItems and how to add TabItems as well.
16. Now hit F5 or go to Project | Test Solution.
17. Your default web browser will start and you will see your tab control. Try clicking on different tabs and notice that you can see only the content that you have added to a specific Grid under specific TabItem.
 |
As TabControl is not a "default" Silverlight 4 control; we had to add a reference to the System.Windows.Controls.dll file (that file is part of the Silverlight 4 SDK pack). After adding the reference, TabControl has been added to our Asset Library and is available for use from there like all other controls.
Right after you have drawn TabControl on the artboard, you will notice two tab items (colloquially called just "tabs"). By right-clicking on TabControl and using the option Add TabItem you get the opportunity to add more tab items.
It is a general suggestion that you don't add more than seven tabs. Take a look at the There's more... section where I will go deeper into general guidelines for using tab as a control.
The next step was adding titles for specific tabs. As shown earlier, specific TabItem is comprised of Header and Grid parts. By clicking on TabItem and locating the Header property, you have got the possibility to change the title for a specific TabItem. We have used just provisional titles, First tab, Second Tab, and so on.
The next step was adding the specific content to specific tabs. Technically speaking, that content is hosted within the Grid control. That, of course, means that all layout, formatting, and other Grid-related mechanisms and properties are applied to all controls hosted. Grid is, without doubt, the most powerful layout control available in WPF and Silverlight.
By hitting F5 and starting your web browser you got the opportunity to explore tabs and associated buttons (controls).
In the first part, you've been introduced to the tab control and its main characteristics. Now, you'll learn how to further customize the control itself and also get the professional and insightful guidelines for using the tabs in your real life applications - no matter what are you using, WPF or Silverlight.
Tabs are most commonly oriented horizontally, but TabControl, which is used in our example, supports different orientations.
I will assume that you are continuing from the previous TabControl example.
1. Select your TabControl under the Objects and Timeline pane. Under the Properties pane, locate the TabStripPlacement property under Miscellaneous. The drop-down list offers you the following options: Left, Top, Right, and Bottom.
2. Select Left.
3. You will notice that the tab orientation has been changed. Hit F5 and investigate a new look within your browser.
 |
As a small digression, Last.fm, a popular music and radio community website, uses this kind of layout for its profile page's design and I find it to be highly usable and pleasing.
In the When to use tabs? paragraph, I will give guidelines regarding the usage of icons in tabs, so be sure to understand when it is correct and acceptable to use icons in tabs.
Again, I will take it from our initial example where we have added TabControl and three TabItem elements (tabs).
Currently, there is no property like Icon for each TabItem, but we can add them manually by modifying the Header part of TabItem.
1. Let's just modify the Header for the First tab and you can apply the same method for the rest of them.
2. The idea is to add Image control and TextBlock into Header and then to place an icon into Image control and set the content of TextProperty to First tab. We want Image and TextBlock controls to be stacked horizontally, so we will put them in the StackPanel container.
3. Double-click on Header under the first TabItem; this will make it active. Now from the toolbox or Asset Library add StackPanel. Set its Height and Width to Auto and Orientation to Horizontal. You can do this by going to the Properties pane and locating them under the Layout section.
4. Now select the newly added StackPanel and add Image control and TextBlock. The easiest way do to that is just by locating them under the toolbox or Asset Library and double-clicking on them. They will be automatically added to the selected container, StackPanel in our case.
5. Select Image control and under Properties locate the Common Properties section. Find the Source property and click on Choose an image button (ellipses). From the dialog box, select an image the one that you want to add as an image. I suggest using the PNG image with dimensions of about 16x16 pixels.
6. Now select TextBlock and change its Text property, which is under the Common Properties section within the Properties pane. Set it to First tab.
7. If you now take a look at the XAML code of the selected TabItem, it should look similar to this:
<basics:TabItem.Header> <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal"> <Image Width="16" Height="16" Source="Help and Support.png"/> <TextBlock Text="First Tab" TextWrapping="Wrap"/> </StackPanel> </basics:TabItem.Header>
8. Structure, as can be seen under the Objects and Timeline panel, looks like this:
 |
I've already mentioned that tabs are usually good in situations when we are dealing with large amounts of information on a single page or window and, as a consequence, users are having difficulties finding, using, and focusing on specific content and possibly, tasks. Tabs are really handy in such situations, as they allow us to break up related pieces of information and organize them on individual tabs, making them available one at a time.
According to Microsoft's own Windows user experience guidelines, there are several questions that are to be asked when deciding whether you should use the tabs as control. They can be summarized as follows:
Can all your controls comfortably fit on a single page? If so, there's no need for tabs, and the same. The same holds true if you are using just one tab do not use tabs just to use them. You might be tempted to do so thinking that this would make your application or web application more professional, but the reality is quite the opposite.
Are you using tabs to organize settings and numerous options? Be sure to check if the changing of the options on one tab affects options and settings on other tabs. Each and every tab must be mutually independent. If that is not the case, use wizard pattern.
From the hierarchical point of view, ask yourself: Are the tabs mostly peers (on the same levels) or do you have a clear hierarchy organization among them? Tabs must have a peer relationship, never hierarchical. Just think about it: they are linearly represented an orientation that is implying the same hierarchy levels.
Are you using tabs for wizard-like step-by-step processes where the first tab represents starting point and tabs that follow are next steps in the process? If that is the case, again, wizard is the appropriate pattern.
This list, of course, is far from comprehensive but offers you some initial guidelines.
Tabs are taken from the real world and they do aim to leverage familiarity that most users have from tabbed folders. As we do use tabs in the real world to group related documents, the same idea must be used in the world of user interfaces.
We benefit from organizing related elements and content onto individual tabs. Furthermore, you should think about the order of your tabs and set them in a way that will make sense to your users. Among other things, that is the reason why tabs are pretty popular events on the Web as navigational controls, although that is not and should not be their primary role.
In most cases, tabs will be presented horizontally or vertically. How do we decide? Again, Microsoft's and other UI guidelines suggest, among other things, the following:
Horizontal tabs should be used if you plan to use seven or fewer tabs and all tabs fit in one row.
Vertical tabs are good for cases when you are dealing with eight or more tabs or if using the horizontal tabs would require more than one row (the case might be that you have five tabs but with very long labels in their header).
Forget about using scroll bars for horizontal tabs. This pattern has poor discoverability while usage of scrolling for vertical tabs is acceptable. General idea is to have all tabs always visible. If you have too much content which must fit on a single tab, then put a scrollbar on that specific tab, not on the window that is hosting your tab control.
By default, make your first tab selected in all cases. Exclusion from this can be only a specific case when users are likely to start from the last tab that they have selected before dismissing a window or page with tabs. In that case, make the last tab selected to persist on a per-window, per-user basis. My personal experience is that your exceptions like these are extremely rare and you will probably do a better job just by ensuring that the first tab is always selected for users.
Don't use and put icons on tabs' headers. They add visual clutter and consume screen space. You might be tempted to use them hoping that they will improve users' comprehension but that is rarely the case.
However, there are some cases when icons might be fitting:
Icons you are using are standard symbols, well known, and widely recognizable, and understandable
Use icons if there is not enough space to display significant labels
Place the terminating buttons (OK, Cancel, Apply, and so on) on the area outside the tabbed area, onto the dialog. A good example for this is given in the following screenshot:
 |
By doing that you will avoid confusion in respect to the scope of the actions being carried away when user clicks on those buttons. Actions triggered by clicks on terminating buttons placed outside the tabbed area are applied to the whole page or window.