[转载]WPF下可编辑Header的Tab控件实现 – 葡萄城控件技术团队博客 – 博客园.
介绍
有这样一个需求，当用户双击Tab控件Header区域时， 希望可以直接编辑。对于WPF控件，提供一个ControlTemplate在加上一些Trigger就可以实现。效果如下：
代码
首先，我们需要给Tab Header设计一个ControlTemplate。类似一个TextBlock，双击进入编辑状态。 所以Xaml如下：
<Setter Property="Template"> |
<ControlTemplate TargetType="{x:Type local:EditableTabHeaderControl}"> |
<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}"/> |
<ControlTemplate.Triggers> |
<Trigger Property="IsInEditMode" Value="True"> |
<Setter TargetName="PART_TabHeader" Property="Visibility" Value="Visible"/> |
<Setter TargetName="PART_TextBlock" Property="Visibility" Value="Collapsed"/> |
</ControlTemplate.Triggers> |
接下来，我们需要定义个“EditableTabHeaderControl”类，它具有控制TextBox和TextBlock的能力。如下：
namespace EditableTabHeaderDemo |
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 DispatcherTimer timer; |
private delegate void FocusTextBox(); |
/// Gets or sets a value indicating whether this instance is in edit mode. |
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); |
/// When overridden in a derived class, is invoked whenever application code or internal processes call <see cref="M:System.Windows.FrameworkElement.ApplyTemplate"/>. |
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; |
/// Sets the IsInEdit mode. |
/// <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) |
this.MoveTextBoxInFocus(); |
private void MoveTextBoxInFocus() |
if (this.textBox.CheckAccess()) |
if (!string.IsNullOrEmpty(this.textBox.Text)) |
this.textBox.CaretIndex = 0; |
this.textBox.Dispatcher.BeginInvoke(DispatcherPriority.Render, new FocusTextBox(this.MoveTextBoxInFocus)); |
private void TextBoxKeyDown(object sender, KeyEventArgs e) |
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) |
这里有一个问题，当控件进入编辑状态，TextBox变为可见状态时，它不能自动获得focus。一种解决办法是挂一个Timer，每1毫秒轮询一次，检查状态并控制focus。
现在就来添加一个WPF TabControl，并应用ItemContainerStyle。然后双击Header，可以编辑啦～
<Window x:Class="EditableTabHeaderDemo.MainWindow" |
xmlns:local="clr-namespace:EditableTabHeaderDemo" |
Title="EditableTabHeaderDemo" Height="300" Width="500"> |
<Style x:Key="EditableTabHeaderControl" TargetType="{x:Type local:EditableTabHeaderControl}"> |
<Style x:Key="ItemContainerStyle" TargetType="TabItem"> |
<Setter Property="HeaderTemplate"> |
<local:EditableTabHeaderControl |
Style="{StaticResource EditableTabHeaderControl}"> |
<local:EditableTabHeaderControl.Content> |
<Binding Path="Name" Mode="TwoWay"/> |
</local:EditableTabHeaderControl.Content> |
</local:EditableTabHeaderControl> |
<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}" /> |
许可证
本文以及示例代码文件遵循The Code Project Open License(CPOL)。
源码下载
EditableTabHeaderSolution.zip
英文链接：Header Editable Tab Control in Wpf
Mikel
