HighOnCoding.com: Introduction to TabControl and Scrollable Tabs

Introduction to TabControl and Scrollable Tabs

AzamSharp
Published Date: 12/13/2008 7:15:13 PM
Views: 5138

Abstract:
Windows Presentation Foundation includes the TabControl which is used to display the data in tabular way. In this article we are going to take a look at the TabControl. We are going to see many different ways in which TabControl can be used. We will also implement a scrollable TabControl which can be used to display lots of TabItems in less space.
Introduction:

Windows Presentation Foundation includes the TabControl which is used to display the data in tabular way. In this article we are going to take a look at the TabControl. We are going to see many different ways in which TabControl can be used. We will also implement a scrollable TabControl which can be used to display lots of TabItems in less space.

Creating a Simple TabControl:

let's see how we can create a simple TabControl with few items. Here is the XAML code for the TabControl.

Here is the screenshot of the TabControl.

Populating the TabControl Programmatically:

The above code shows how you can add the items to the TabControl using the XAML code. Let's see how this can be accomplished using C# code.

Attaching the Style to the TabControl:

Let's see how we can attach Style to the TabItem. First we will create a Style tag in the TabControl item which will work on the control of type TabItems.

And here is the screenshot of the style triggering as the item is selected.

Creating a TabItem Mess:

TabControl can easily display a small number of TabItems but if you have many TabItems then the TabControl is hard to use and ugly to look at. Let's take a look at the scenario where the TabControl has many items.

The following code adds 30 TabItems to the TabControl.

And here is the screenshot:

As you can see in the screenshot the items are cutting of and it is really hard to tell that which item is selected.

Creating a Scrollable TabControl:

To solve the above problem we are going to create a scrollable TabControl. The control will use forward and back arrows to move through the items. The scrolling is achieved by using the ScrollViewer control and rending the TabControl in a different way using the ControlTemplate.

In the above code we can see that the ScrollViewer is using the ControlTemplate feature to add the RepeatButtons to itself. The RepeatButtons are used to move forward and backward.

Check out the scrolling effect in the animation below:

References:

How to prevent TabControl from doing multi rows?

Conclusion:

In this article we learned how to use the TabControl available in Windows Presentation Foundation. We also learned how to create a scrollable TabControl using the ScrollViewer control. The scrollable TabControl allows to view more TabItems using less space.

[Download Sample]

Comments/Feedbacks


	Subject: Scrolling Tabs Name: vanitha Date: 1/20/2009 1:34:47 AM Comment: Thats the exact one which i am trying for. Thanks to highoncoding.