TabControlのタブヘッダを（半ば強引な方法で）直接編集してみよう

目的

タブコントロールのタブヘッダのテキストを直接編集したくなりました。
そう、Excelのシート名変更のような操作感を実現したい訳ですね。

これです、この「tabPage1」とか云うのを、まさにこの場所で編集したいんです。

あーそうそう、以前やったListViewのカラム直接変更にちょっと似ているんですが、実現の仕方にはちょっと工夫が必要でした。

直接編集の仕組み

ListViewのカラムには直接編集の機能がありません。
なので、編集したいカラムの上にTextBoxをぴったり重ねて表示して、操作者を謀ろうと云うのがざっくりした仕組みの説明です。

あれ？
簡単に終わってしまった…

じゃ、タブの編集も同じ方針で

タブの直接編集機能も無い様なので、タブの上にTextBox重ねて表示すれば良いよね。
一番問題になりそうなのは、編集したいタブの位置をどうやって取得するのかなぁー
ま、ちょっと調べればちょちょい、で出来るんじゃないの？

と思いました、最初は。
ま、方向性は間違ってないんですけどね。


結果、ダメでした…
いや、単純な水平展開、って訳には行きませんでした、ってのが正解かな。

問題はどこに？

一応、おさらいしておくと、コンテナであるTabControlの配下に複数のTabPageが入ります。

其々のTabPageがタブ(ヘッダ)を持っている様なイメージがありますが（私だけ？）、実際の所TabPageはただの四角です。複数のTabPageの切換えのセレクタであるタブを持っているのはコンテナの方(TabControl)だったんですね。

なのでタブの上に編集用コントロールを乗っけるには、対象となるTextBoxをTabControlの子コントロールとして追加する必要があります。
んが、コンテナであるTabControlは狭量で、自分の子供はTabPageだけ、と決めつけている中々の頑固者です。

これでは、タブの上での直接編集が実現できません…
何か策はないのー

一筋の光明

TabControl家への養子入りはかなり無理そう…

ParentにあたるFormの配下ではTabControlの前面に出る事は出来ませんし、ChildになるTabPageの下では、その範囲は親のTabControlの領域までは手が届きません。

塞がったなー…

となれば、もう親類縁者に頼る事は諦めて、赤の他人としてTabControlの前に立ちはだかる方法を探っ…


あぁぁ、そうか。

もういっその事新しいFormを作っちゃうってのでどうでしょう？
中身はTextBox一個、FormBorderStyle.Noneにしてサイズはタブの耳と同じ大きさにする…
みたいな感じで。

実際の所、どんな見た目になるのかや、動きにぎこちなさが残らないのか―
微妙に心配のタネはあるものの、思いついたが百年目、じゃねーや
思い立ったが吉日と云う事で、取り敢えず手を動かしてみましょう。

こんな感じになりました

いきなり、サブクラス化してみた結果です。

コンポーネントを追加して拡張したので、Designer.csのthis.AutoScaleMode = ～～をコメントアウトする必要があります。

TabControlEx.Designer.cs

namespace TestTabControl {
    partial class TabControlEx {
        /// <summary> 
        /// 必要なデザイナー変数です。
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary> 
        /// 使用中のリソースをすべてクリーンアップします。
        /// </summary>
        /// <param name="disposing">マネージ リソースを破棄する場合は true を指定し、その他の場合は false を指定します。</param>
        protected override void Dispose(bool disposing) {
            if(disposing && (components != null)) {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region コンポーネント デザイナーで生成されたコード

        /// <summary> 
        /// デザイナー サポートに必要なメソッドです。このメソッドの内容を 
        /// コード エディターで変更しないでください。
        /// </summary>
        private void InitializeComponent() {
            components = new System.ComponentModel.Container();
        //  this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        }

        #endregion
    }
}

肝心のコードの方です。
ごめん…
コメントも何も一切無かったけど、長いコードじゃないので雰囲気で掴んでください。

TabCntrolEx.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace TestTabControl {
    public partial class TabControlEx : TabControl {
        public TabControlEx() {
            InitializeComponent();
        }

        public void EditTabText() {
            placeHolder = new Form();
            placeHolder.SuspendLayout();

            textbox = new TextBox();
            textbox.BackColor = SystemColors.InactiveCaption;
            textbox.BorderStyle = BorderStyle.None;
            textbox.TextAlign = HorizontalAlignment.Center;
            textbox.KeyPress += Textbox_KeyPress;

            placeHolder.AutoScaleMode = AutoScaleMode.Font;
            placeHolder.AutoSizeMode = AutoSizeMode.GrowAndShrink;
            placeHolder.Controls.Add(textbox);
            placeHolder.FormBorderStyle = FormBorderStyle.None;
            placeHolder.TopMost = true;
            placeHolder.Load += PlaceHolder_Load;
            placeHolder.Deactivate += PlaceHolder_Deactivate;

            placeHolder.ResumeLayout(false);
            placeHolder.PerformLayout();

            placeHolder.Show();
        }

        private void PlaceHolder_Load(object sender, EventArgs e) {
            Rectangle tabRect = this.GetTabRect(this.SelectedIndex);
            tabRect.Location = this.FindForm().PointToScreen(tabRect.Location);
            placeHolder.DesktopBounds = tabRect;
            textbox.Bounds = new Rectangle(0, (tabRect.Height - textbox.Height) / 2, tabRect.Width, tabRect.Height);
            textbox.Text = this.SelectedTab.Text;
        }

        private void PlaceHolder_Deactivate(object sender, EventArgs e) {
            if(!string.IsNullOrEmpty(textbox.Text))
                this.SelectedTab.Text = textbox.Text;
            placeHolder.Close();
        }

        private void Textbox_KeyPress(object sender, KeyPressEventArgs e) {
            switch((Keys)e.KeyChar) {
            case Keys.Escape:
                textbox.Text = string.Empty;
                goto case Keys.Enter;

            case Keys.Enter:
                e.Handled = true;
                placeHolder.Hide();
                return;
            }
        }

        Form placeHolder = null;
        TextBox textbox = null;
    }
}

使い方は、FormにTabControlExを貼り付けてからの、以下のコード。
基本は以下の通り、MouseDoubleClickイベント捕まえて、EditTabText()を呼ぶだけ。
現在アクティブなタブの上に、小さなFormが乗っかってテキスト入力できるようになります。

namespace TestTabControl {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();
        }

        private void tabControlEx1_MouseDoubleClick(object sender, MouseEventArgs e) {
            tabControlEx1.EditTabText();
        }
    }
}

実行結果はこんな感じ…

ここで、問題(?)と云うか奇妙な特性に気が付いてしまいました。
フォームを表示しているので、入力している最中のアクティブウィンドウのスクショは、そこしか映らないという…
ま、そこはしょうがないと思って、諦める事にしました。


真面目に使うには、入力可能文字のチェックしたり、テキストの長さを制限したりしないといけないと思うけど、これを肉付けしていけば良いでしょう。
きっと。