介绍

有这样一个需求，当用户双击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;/// /// Header Editable TabItem/// [TemplatePart(Name = "PART_TabHeader", Type = typeof(TextBox))]public class EditableTabHeaderControl : ContentControl{/// /// Dependency property to bind EditMode with XAML Trigger/// 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();/// /// Gets or sets a value indicating whether this instance is in edit mode./// 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);}}/// /// When overridden in a derived class, is invoked whenever application code or internal processes call ./// 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;}}/// /// Sets the IsInEdit mode./// /// if set to true [value].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}"><!-- The template specified earlier will come here !--></Style><Style x:Key="ItemContainerStyle" TargetType="TabItem"><Setter Property="HeaderTemplate"><Setter.Value><DataTemplate><local:EditableTabHeaderControlStyle="{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> 

许可证

 

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

源码下载

EditableTabHeaderSolution.zip

 

英文链接：Header Editable Tab Control in Wpf