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}">
			<!-- 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>

开发工具

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

许可证

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

源码下载

EditableTabHeaderSolution.zip

英文链接:Header Editable Tab Control in Wpf

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

测试用户的网络环境

这个其实是一个hta文件,目的是测试用户本机请求资源、hosts文件、当前所处的位置。参考stone的checknetwork4qqfarm: http://c...

27510
来自专栏BY的专栏

iOS定时器,你真的会使用吗?前言正文结语

58750
来自专栏技术博客

使用Spire.Office for .NET(Word、Excel、PPT、PDF等)的初步感受

  本文大部分内容来自http://www.codeproject.com/Articles/710747/First-thoughts-on-Spire-Do...

70630
来自专栏互联网开发者交流社区

窗体应用程序防腾讯QQ源码

21040
来自专栏王大锤

IOS开发中滑动页面时NSTimer停止的问题

40190
来自专栏hbbliyong

WPF中播放声音媒体文件

这段时间我们小组要给部门的Annual Meeting準备一个WPF的抽奖程序,为了增加程序的有趣性,我们在程序中需要播放背景音乐等。由於对之前从未使用过WPF...

46560
来自专栏菩提树下的杨过

如何对动态创建控件进行验证以及在Ajax环境中的使用

首先给一个常规的动态创建控件,并进行验证的代码 [前端aspx代码] <%@ Page Language="C#" AutoEventWireup="true"...

20850
来自专栏lgp20151222

debug的一些按钮意义

9930
来自专栏木宛城主

SharePoint 中时间轴 Timeline的实现

客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态。就像Facebook的Ti...

24260
来自专栏逆向技术

PE文件格式详解,第三讲,可选头文件格式,以及节表

          PE文件格式详解,第三讲,可选头文件格式,以及节表 一丶可选头结构以及作用 typedef struct _IMAGE_OPTIONAL_H...

29690

扫码关注云+社区

领取腾讯云代金券