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.
<TabControl>
<TabItem Header="Item1" Content="Item1"/>
<TabItem Header="Item2" Content="Item2"/>
<TabItem Header="Item3" Content="Item3"/>
<TabItem Header="Item4" Content="Item4"/>
</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.
private void PopulateTabControl()
{
tabControl.Items.Add(new TabItem() { Header = "Item1", Content = "Item1" });
tabControl.Items.Add(new TabItem() { Header = "Item2", Content = "Item2" });
tabControl.Items.Add(new TabItem() { Header = "Item3", Content = "Item3" });
tabControl.Items.Add(new TabItem() { Header = "Item4", Content = "Item4" });
}
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.
<TabControl Height="100">
<TabControl.Resources>
<Style x:Key="tabItemStyle" TargetType="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<TabItem Header="Item1" Style="{DynamicResource tabItemStyle}" Content="ssasdasfasfaszxcasfs"/>
<TabItem Header="Item2" Content="Coasdasntasdasdasdent"/>
<TabItem Header="Item3"/>
</TabControl>
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.
public MainWindow()
{
InitializeComponent();
PopulateTabControl();
}
private void PopulateTabControl()
{
for (int i = 1; i <= 30; i++)
{
tabControl1.Items.Add(new TabItem() { Header = "Item " + i });
}
}
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.
<TabControl Height="100" Template="{DynamicResource TabControlControlTemplate1}">
<TabControl.Resources>
<ControlTemplate x:Key="TabControlControlTemplate1" TargetType="{x:Type TabControl}">
<Grid x:Name="Grid" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Grid.Column="0" x:Name="ContentPanel" BorderBrush="#FFD0CEBF" BorderThickness="0,0,1,1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained">
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border Background="{TemplateBinding Background}" x:Name="Border1">
<ContentPresenter DataContext="{x:Null}" Margin="{TemplateBinding Padding}" x:Name="PART_SelectedContentHost" Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}" ContentSource="SelectedContent"/>
</Border>
</Border>
</Border>
<ScrollViewer x:Name="HeaderPanel" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled">
<ScrollViewer.Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Margin="0,0,0,0" Grid.Row="0" Grid.Column="0" x:Name="HeaderPanel">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<RepeatButton Grid.Column="0" Content="<" Command="ScrollBar.LineLeftCommand" Style="{DynamicResource TabScrollerRepeatButtonStyle}"/>
<ScrollContentPresenter Grid.Column="1" Content="{TemplateBinding ScrollViewer.Content}" />
<RepeatButton Grid.Column="2" Content=">" Command="ScrollBar.LineRightCommand" Style="{DynamicResource TabScrollerRepeatButtonStyle}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ScrollViewer.Style>
<StackPanel IsItemsHost="true" Orientation="Horizontal" Background="{x:Null}" KeyboardNavigation.TabIndex="1" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</TabControl.Resources>
<TabItem Header="Item1" Content="ssasdasfasfaszxcasfs"/>
<TabItem Header="Item2" Content="Coasdasntasdasdasdent"/>
<TabItem Header="Item3"/>
<TabItem Header="Item4"/>
<TabItem Header="Item5"/>
<TabItem Header="Item1"/>
<TabItem Header="Item2"/>
<TabItem Header="Item3"/>
<TabItem Header="Item4"/>
<TabItem Header="Item5"/>
<TabItem Header="Item1"/>
<TabItem Header="Item2"/>
<TabItem Header="Item3"/>
<TabItem Header="Item4"/>
<TabItem Header="Item5"/>
<TabItem Header="Item1"/>
<TabItem Header="Item2"/>
<TabItem Header="Item3"/>
<TabItem Header="Item4"/>
<TabItem Header="Item5"/>
</TabControl>
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]