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

Operational Situational Summary - Ukraine 2 March

From a glance at the map and the news reports, it appears that the Russian advance has been very slow or even checked. However, a deeper look shows the situation has worsened significantly for Ukraine. That this happened as per my expectation in the past few posts makes me feel worse. In the North, the Russian forces have already encircled Chernihiv in the past couple of days. This is not yet fully updated on this map. The two strong armored spearheads from Konotop (which had also fallen) are currently holding in Pryluky and Nizhyn. The Chernihiv garrison probably has a day or two before the Russians reach Kozelets. Then any breakout attempt to Kyiv will become extremely difficult and will likely result in very heavy losses. It is to be expected that this city too, will fall soon without affecting the battle of Kyiv. This is bad for Ukraine. Now that the International Community has rallied for Ukraine, the previous fears of Russia dealing with breakaway republics in the East should be

Growing up

Time affects everything and everyone We all grow up. After college, friends go places, to different states and far away countries. You get less and less time. Some go for higher studies, again, in other states. Parents get older. Then friends start getting married. First it’s usually the girls. One by one, your crushes tie the knot. You dismiss it, you are still young. Then your guy friends start getting married too. Your circle shrinks. In the end you look around. All you are left with are ideological nutjobs, immature imbeciles, idealistic crazies, bohemian hippies, or other misfits. Do you really belong here? Okay, that was too harsh. But you think. You say to yourself, ‘ dil to baccha hai jee ’.  Okay, fair enough. And then... Then, you see a growing pot belly. Something you always despised. Your dad had one (he still does). After taking a shower, you look at the mirror. You are losing hair. You search on Amazon for hair growing products - it is too much of a hassle. Hair transplan

Operation Situation Report Summary - Ukraine 4 March

 Defense Without Strategy Ukraine seems to be hell bent on fighting a static war without almost any flexibility. Their forces may be valiant and defiant, but without a coherent strategy, the best they can hope for is to prolong their own suffering WITHOUT significantly hurting the enemy. Here is how the situation stands as of now. Kherson has fallen. The front in the South was decisively broken day before yesterday with the capture of the railway station and port. Naturally, the Russian forces did not wait and moved straight North to Mykolaiv. All UA forces on the Dnepr facing South are likely to be outflanked. Unless the Russian spearheads are cut off and destroyed in a day or two, it will be too late. The fall of the entire South seems to be inevitable.  To extricate the forces, UA should have withdrawn forces from other sectors (including far away Donetsk front). Now, the best they can try is to win time to reinforce Kyiv. Kharkov is almost surrounded. This battle seems to be fought