WPF下可编辑Header的Tab控件实现

介绍

有这样一个需求，当用户双击Tab控件Header区域时，希望可以直接编辑。对于WPF控件，提供一个ControlTemplate在加上一些Trigger就可以实现。效果如下：

代码

首先，我们需要给Tab Header设计一个ControlTemplate。类似一个TextBlock，双击进入编辑状态。所以Xaml如下：

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type local:EditableTabHeaderControl}">

<Grid>

<TextBox

x:Name="PART_TabHeader" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}" Visibility="Collapsed"/>

<TextBlock x:Name="PART_TextBlock" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsInEditMode" Value="True">

<Trigger.Setters>

<Setter TargetName="PART_TabHeader" Property="Visibility" Value="Visible"/>

<Setter TargetName="PART_TextBlock" Property="Visibility" Value="Collapsed"/>

</Trigger.Setters>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

接下来，我们需要定义个“EditableTabHeaderControl”类，它具有控制TextBox和TextBlock的能力。如下：

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), typeof(EditableTabHeaderControl));

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

{

get

{

return (bool)this.GetValue(IsInEditModeProperty);

}

set

{

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

{

base.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;

this.timer.Start();

}

private void TimerTick(object sender, EventArgs e)

{

this.timer.Stop();

this.MoveTextBoxInFocus();

}

private void MoveTextBoxInFocus()

{

if (this.textBox.CheckAccess())

{

if (!string.IsNullOrEmpty(this.textBox.Text))

{

this.textBox.CaretIndex = 0;

this.textBox.Focus();

}

else

{

this.textBox.Dispatcher.BeginInvoke(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)

{

this.SetEditMode(true);

}

这里有一个问题，当控件进入编辑状态，TextBox变为可见状态时，它不能自动获得focus。一种解决办法是挂一个Timer，每1毫秒轮询一次，检查状态并控制focus。

现在就来添加一个WPF TabControl，并应用ItemContainerStyle。然后双击Header，可以编辑啦～

<Window x:Class="EditableTabHeaderDemo.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:EditableTabHeaderDemo"

Title="EditableTabHeaderDemo" Height="300" Width="500">

<Window.Resources>

<Style x:Key="EditableTabHeaderControl" TargetType="{x:Type local:EditableTabHeaderControl}">

</Style>

<Style x:Key="ItemContainerStyle" TargetType="TabItem">

<Setter Property="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<local:EditableTabHeaderControl

Style="{StaticResource EditableTabHeaderControl}">

<local:EditableTabHeaderControl.Content>

<Binding Path="Name" Mode="TwoWay"/>

</local:EditableTabHeaderControl.Content>

</local:EditableTabHeaderControl>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

<DataTemplate x:Key="ContentTemplate">

<Grid>

<TextBlock HorizontalAlignment="Left" Text="{Binding Name}"/>

<TextBlock HorizontalAlignment="Center" Text="{Binding City}"/>

</Grid>

</DataTemplate>

</Window.Resources>

<Grid>

<TabControl

Grid.Row="0" ItemsSource="{Binding Data}" ItemContainerStyle="{StaticResource ItemContainerStyle}" ContentTemplate="{StaticResource ContentTemplate}" />

</Grid>

</Window>

开发工具

ComponentOne Studio WPF 是专为桌面应用程序开发所准备的一整套控件包，崇尚优雅和创新，以“触控优先”为设计理念，内含轻量级高性能表格控件，和大量类型丰富的2D和3D图表控件，能使开发的应用程序更富创意。

许可证

本文以及示例代码文件遵循The Code Project Open License(CPOL)。

源码下载

EditableTabHeaderSolution.zip

英文链接：Header Editable Tab Control in Wpf