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

My love affair with ThinkPads

I had never used a ThinkPad in my life till 2018. To be honest, I did not really see the benefit of using them anyway. Consumer series laptops (with plastic bodies) were the ones that I had always used before. Then I was introduced to the rugged looks of the T60 and T61 original IBM ThinkPad designs that came out way back in 2004 or so. And I loved it. Finding a ThinkPad that old did not appeal to me. I was impressed with the smaller compact X series laptops and decided to have either an X230 or an X220. Both of these are fairly similar and were launched about 8 years back. But they still sport good processors, plenty of memory upgradability, provision to add a maximum of three hard disks and a decent battery backup to boot. My reasons to get this were simpler -  They are rugged, I like to use my laptops well Memory is not soldered. There are plenty of options to upgrade. The keyboards are probably the best in the world. Why not get the latest ThinkPad? Again, simple.  They come with a

How To: Change Fonts On The 5800, 5233 etc

The font that comes with Nokia is nice. But after six months you are bound to crave for a new look to your phone. Now changing fonts on a phone is usually not an easy task, I mean that was how you must have thought. But you know what you can use custom fonts, yes any font of your choice on your Nokia phone without any software. All you need to do is copy and paste a bunch of files. No replacing of system resources necessary! First to increase your greed, I will post some screenshots, Screenshot Gallery o   Font Style Download o Another Font Style Now let me tell you how I did it. Procedure to apply new Fonts Connect the phone in the ‘Mass Storage’ profile to the computer. Alternatively, you can use the memory card reader. Goto the Memory Card, it shows up as a Removable Disk. Navigate to the ‘resource’ folder and open it. Copy the ‘Fonts’ folder into in. Eject the device and restart. You should see the new fonts applied. Procedure to apply your Fonts Ma

Reaching the peaks of my own stupidity or not

 I have never considered myself to be particularly intelligent. Though I have not had myself clinically diagnosed, anecdotal evidence and day to day activities amply demonstrate how stupid I am. Now wait. This does not mean I am indulging in self pity.  No. Far from it. I have had successes in life. I continue to do well in things that I love to do. I have no complaints there. It is just that I do feel my intelligence lacking. My success is, therefore, despite my stupidity and I take some pride in it. Of course defending the statement - 'I am stupid' is difficult. Especially without a test that ascertains the fact for certain. I will make a more nuanced statement as a result. I have less intelligence than the average person around me. That is a more defensible stance and there are tests (even other than IQ) to confirm it. Aptitude tests are a good example. I do horrible in them.  Okay, there is an exception - I got into IITB. But that was me trying for a third time. In any case