Click here to Skip to main content
14,304,152 members

Header Editable Tab Control in WPF

Rate this:
4.75 (11 votes)
Please Sign up or sign in to vote.
4.75 (11 votes)
20 Dec 2010CPOL
Providing a ControlTemplate so that the Tab Header can be editable


Recently, I needed to develop a Tab Control in WPF where the Tab Headers become editable while user double clicks on that. The main idea is to provide a ControlTemplate for the Tab Header and associate necessary Triggers on that.

Using the Code

At first, we need to design the ControlTemplate for the Tab Header. The Tab Header is simply a TextBlock, double clicking on it will turn it into a TextBox. So, the XAML required for this is very simple:  

<Setter Property="Template">
          <ControlTemplate TargetType="{x:Type local:EditableTabHeaderControl}">
                  <TextBox x:Name="PART_TabHeader" Text="{Binding RelativeSource=
		{RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}" 

                  <TextBlock x:Name="PART_TextBlock" Text="{Binding RelativeSource=
		{RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}"/>
                  <Trigger Property="IsInEditMode" Value="True">
                            <Setter TargetName="PART_TabHeader" Property="Visibility" 

                            <Setter TargetName="PART_TextBlock" Property="Visibility" 


Now, we need to provide the class "EditableTabHeaderControl", which will have the dependency properties and logic to control the visibility of textbox. textblock pair. Here is the class:  

namespace EditableTabHeaderDemo
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using System.Windows.Threading;

    /// <summary>
    /// Header Editable TabItem
    /// </summary>
    [TemplatePart(Name = "PART_TabHeader", Type = typeof(TextBox))]
    public class EditableTabHeaderControl : ContentControl
        /// <summary>
        /// Dependency property to bind EditMode with XAML Trigger
        /// </summary>
        private static readonly DependencyProperty IsInEditModeProperty = 
		DependencyProperty.Register("IsInEditMode", typeof(bool), 
        private TextBox textBox;
        private string oldText;
        private DispatcherTimer timer;
        private delegate void FocusTextBox();

        /// <summary>
        /// Gets or sets a value indicating whether this instance is in edit mode.
        /// </summary>
        public bool IsInEditMode
                return (bool)this.GetValue(IsInEditModeProperty);
                if (string.IsNullOrEmpty(this.textBox.Text))
                    this.textBox.Text = this.oldText;
                this.oldText = this.textBox.Text;
                this.SetValue(IsInEditModeProperty, value);

        /// <summary>
        /// When overridden in a derived class, is invoked whenever 
        /// application code or internal processes call 
        /// <see cref="M:System.Windows.FrameworkElement.ApplyTemplate"/>.
        /// </summary>
        public override void OnApplyTemplate()
            this.textBox = this.Template.FindName("PART_TabHeader", this) as TextBox;
            if (this.textBox != null)
                this.timer = new DispatcherTimer();
                this.timer.Tick += TimerTick;
                this.timer.Interval = TimeSpan.FromMilliseconds(1);
                this.LostFocus += TextBoxLostFocus;
                this.textBox.KeyDown += TextBoxKeyDown;
                this.MouseDoubleClick += EditableTabHeaderControlMouseDoubleClick;

        /// <summary>
        /// Sets the IsInEdit mode.
        /// </summary>
        /// <param name="value">if set to <c>true</c> [value].</param>
        public void SetEditMode(bool value)
            this.IsInEditMode = value;

        private void TimerTick(object sender, EventArgs e)

        private void MoveTextBoxInFocus()
            if (this.textBox.CheckAccess())
                if (!string.IsNullOrEmpty(this.textBox.Text))
                    this.textBox.CaretIndex = 0;
		(DispatcherPriority.Render, new FocusTextBox(this.MoveTextBoxInFocus));

        private void TextBoxKeyDown(object sender, KeyEventArgs e)
            if (e.Key == Key.Escape)
                this.textBox.Text = oldText;
                this.IsInEditMode = false;
            else if (e.Key == Key.Enter)
                this.IsInEditMode = false;

        private void TextBoxLostFocus(object sender, RoutedEventArgs e)
            this.IsInEditMode = false;

        private void EditableTabHeaderControlMouseDoubleClick
		(object sender, MouseButtonEventArgs e)
            if (e.LeftButton == MouseButtonState.Pressed)

One problem arises when the control become editable. That is, when the visibility of the textbox turns to visible from collapsed, it does not get focus automatically. To achieve that, I have added a timer which fires after 1 millisecond of the textbox became editable and brings it to focus. Now, we are ready to use our Editable Header Template. We will add a WPF TabControl and provide ItemContainerStyle to the control. Then, when we double click the Header, it will be editable.

<Window x:Class="EditableTabHeaderDemo.MainWindow"




    Title="EditableTabHeaderDemo" Height="300" Width="500">
        <Style x:Key="EditableTabHeaderControl" 

	TargetType="{x:Type local:EditableTabHeaderControl}">
			<!-- The template specified earlier will come here !-->
        <Style x:Key="ItemContainerStyle" TargetType="TabItem">
            <Setter Property="HeaderTemplate">

                   Style="{StaticResource EditableTabHeaderControl}">
                                <Binding Path="Name" Mode="TwoWay"/>
        <DataTemplate x:Key="ContentTemplate">
                <TextBlock HorizontalAlignment="Left" Text="{Binding Name}"/>
                <TextBlock HorizontalAlignment="Center" Text="{Binding City}"/>
        <TabControl Grid.Row="0" ItemsSource="{Binding Data}" 

	ItemContainerStyle="{StaticResource ItemContainerStyle}" 

	ContentTemplate="{StaticResource ContentTemplate}" />


  • 20th December, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Amit Kumar Dutta
Student University of Alabama at Birmingham
United States United States

A very simple guy, who codes with his heart (and with his brain, of course).

View my profile on Linkedin:

Comments and Discussions

QuestionHow to trigger a renaming from outside the control? Pin
Tobias Walter17-Oct-11 21:56
memberTobias Walter17-Oct-11 21:56 
AnswerRe: How to trigger a renaming from outside the control? Pin
Amit Kumar Dutta17-Oct-11 22:25
memberAmit Kumar Dutta17-Oct-11 22:25 
GeneralRe: How to trigger a renaming from outside the control? Pin
Member 123744398-Mar-16 22:12
memberMember 123744398-Mar-16 22:12 
GeneralMy vote of 5 Pin
prasad0222-Dec-10 3:42
memberprasad0222-Dec-10 3:42 
GeneralRe: My vote of 5 Pin
Amit Kumar Dutta22-Dec-10 5:44
memberAmit Kumar Dutta22-Dec-10 5:44 
QuestionData not persistance.... Pin
arithforu20-Dec-10 18:15
memberarithforu20-Dec-10 18:15 
AnswerRe: Data not persistance.... Pin
Amit Kumar Dutta20-Dec-10 18:45
memberAmit Kumar Dutta20-Dec-10 18:45 
GeneralMy vote of 5 Pin
SledgeHammer0120-Dec-10 5:22
memberSledgeHammer0120-Dec-10 5:22 
GeneralRe: My vote of 5 Pin
Amit Kumar Dutta22-Dec-10 15:56
memberAmit Kumar Dutta22-Dec-10 15:56 
Generalgood trick.. Pin
Sazzad Hossain20-Dec-10 3:57
memberSazzad Hossain20-Dec-10 3:57 
GeneralRe: good trick.. Pin
Amit Kumar Dutta22-Dec-10 15:57
memberAmit Kumar Dutta22-Dec-10 15:57 
GeneralSuggestion Pin
Venkatesh Mookkan20-Dec-10 0:47
memberVenkatesh Mookkan20-Dec-10 0:47 
GeneralRe: Suggestion Pin
Amit Kumar Dutta20-Dec-10 18:54
memberAmit Kumar Dutta20-Dec-10 18:54 
GeneralMy vote of 5 Pin
jakaria_bd19-Dec-10 23:59
memberjakaria_bd19-Dec-10 23:59 
GeneralRe: My vote of 5 Pin
Amit Kumar Dutta22-Dec-10 15:58
memberAmit Kumar Dutta22-Dec-10 15:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 19 Dec 2010


22 bookmarked