Skip to main content

Create Custom WPF Tab Control Easily


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>)

Comments

Popular posts from this blog

A Good Day

I have a beautiful small house in the hills. It is about 3 km from Manali, in Himachal Pradesh. It is not much. Probably calling it a cottage is stretching it too far. I have got a couple of bedrooms, a small drawing room cum kitchen where we dine as well. There is storage and a small garage that is mostly empty. I have got another small room with just a single bed and a study built on the first floor. It is just about ten feet by ten feet but it has got a retractable ceiling and a wall made of glass with the rest of the roof being something of a balcony. This is the place where I like to spend most of my time.
In the front, there is a garden with some flowers in the front and trees lining the boundary wall. My mother has planted a few vegetables in the back that we regularly use in the kitchen. We mostly require only rice and eggs from the market.

A typical day starts with me waking up and going for a morning stroll. I often spend my nights in the room on the roof. So the first thing I…

My Little Wife

Amar choto bou chole bake bake... If you are looking for some meaning in the words written above - please stop. It is of no use.

This is a short dedicated to my wife whom I did not get to marry.

Being typically Bengali, she is puchu to me.

If you are reading this, please keep in my mind that I am not one bit drunk. And I don't particularly feel like writing either. This you see here is not prose. Just an open faucet. Or a gaping wound sp... okay. Scratch that. Open faucet it is.

She has got a small round face. Her eyes are symmetrical. A bit like almonds. They look lively and restless when open and calm or serene when closed. The nose is neither pointed not large. It sits right in the middle of the face with even elevations on both sides. It is not too small to notice nor is it too large to get in the way. Her lips are small, but not thin. There is an amount of volume to them that you would not usually expect.

Her face looks normal something from a distance. It looks small from c…

The suffocating roadblocks and dead end jobs

Life throws new challenges everytime you decide to do something new.

When you plan to try anything new, you area aware of the challenges that you are likely to face. But Life usually will have other plans. When you expect a right turn, Life will show you a left. When you least expect x to turn up at your door, you find y.

And then there is a dead end job.

This is one job that I at times enjoy. Because I get to work directly in the technologies that I like to work with. At the same time, I feel terrible about the senior management and my future prospects here. What is the worst is that I don't see any way out of this either.

It is not that I have not forwarded my resume over to the other firms. I have. But I have not received any meaningful reply yet. Any response that I have so far been able to elicit are of no interest to me whatsoever.

I feel I have to chalk out a path for myself again. Problem is, the task becomes more and more difficult with age. I can take less risk than I c…