Create Custom WPF Tab Control Easily

Join me on Google+

Windows Presentation Foundation (or WPF) is a computer-software graphical subsystem for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0. Rather than relying on the older GDI subsystem, WPF utilizes DirectX.

Creating a Tab Control in WPF is pretty simple. Let's get through the steps one by one.

Create a new Project. I am using VB as my language, you may C# if you wish to. :) A WPF Application Project will do fine.

I believe in clean coding. I wish to add a couple of controls to this solution. Instead of adding them to the root, I will right click the solution and click "Add Folder", rename as something like say "Cus Tab Controls".
Add a WPF custom control, name it whatever you wish. This will be the tabItem header. Here goes the code.

I just added a harmless Label, and a Button, which will act as the Close Tab button for the Tab Item.

<UserControl x:Class="cusTabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="25" d:DesignWidth="217" Name="cusTabHeader">
<Grid Name="cusTabHeaderMGrid">
<Button Height="18" Margin="0,2,3,0" Name="closeTabButton" VerticalAlignment="Top" Content="x" HorizontalAlignment="Right" Width="18" FontWeight="ExtraBold" />
<Label Content="Label" Height="26" HorizontalAlignment="Left" Margin="2,1,0,0" Name="tabTitleLabel" VerticalAlignment="Top" Width="151" />
</Grid>
</UserControl>
Now create a new Class as the Tab Item and inherit TabItem.

''' <summary>
''' Simple TabItem with close button
''' </summary>
''' <remarks>Just a scratch, nothing else!</remarks>

Public Class cusTabItem

Inherits TabItem
Sub New()
Dim _cusTabHeader As New cusTabHeader()
Me.Header = _cusTabHeader

'Add event handlers for the code
AddHandler _cusTabHeader.closeTabButton.MouseEnter, New MouseEventHandler(AddressOf button_close_MouseEnter)

AddHandler _cusTabHeader.closeTabButton.MouseLeave, New MouseEventHandler(AddressOf button_close_MouseLeave)

AddHandler _cusTabHeader.closeTabButton.Click, New RoutedEventHandler(AddressOf button_close_Click)

AddHandler _cusTabHeader.closeTabButton.SizeChanged, New SizeChangedEventHandler(AddressOf label_TabTitle_SizeChanged)

End Sub

Private title As String
Public Property setTabTitle() As String

Set(ByVal value As String)
title = value
TryCast(Me.Header, cusTabHeader).tabTitleLabel.Content = title
End Set
Get
Return title
End Get
End Property

'' Button MouseEnter - When the mouse is over the button - change color to Red

Sub button_close_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
TryCast(Me.Header, cusTabHeader).closeTabButton.Foreground = Brushes.Red
End Sub

'' Button MouseLeave - When mouse is no longer over button - change color back to black

Sub button_close_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
TryCast(Me.Header, cusTabHeader).closeTabButton.Foreground = Brushes.Black
End Sub

'' Button Close Click - Remove the Tab - (or raise an event indicating a "CloseTab" event has occurred)
Sub button_close_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
TryCast(Me.Parent, TabControl).Items.Remove(Me)
End Sub

'' Label SizeChanged - When the Size of the Label changes (due to setting the Title) set position of button properly
Sub label_TabTitle_SizeChanged(ByVal sender As Object, ByVal e As SizeChangedEventArgs)
TryCast(Me.Header, cusTabHeader).closeTabButton.Margin = _
New Thickness(TryCast(Me.Header, cusTabHeader).tabTitleLabel.ActualWidth + 5, 3, 4, 0)
End Sub

End Class

Compile the Project and add the Custom control you just created to a TabControl at runtime and you are set. :)

<tabcontrolName>.Items.Add(<nameofCustabItem>)