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

  
  
                { 

  
  
                    thisthis.textBox.Text = this.oldText; 

  
  
                } 

  
  
                 

  
  
                thisthis.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(); 

  
  
            thisthis.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}"> 

  
  
            <!-- The template specified earlier will come here !--> 

  
  
        </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> 
 
 

许可证

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

源码下载

EditableTabHeaderSolution.zip

本文转自 powertoolsteam 51CTO博客，原文链接：http://blog.51cto.com/powertoolsteam/469126，如需转载请自行联系原作者