windows form で 隠れるパネルを作成する

やりたいこと

端っこに隠れるパネルを作成する

環境

• Microsoft Visual Studio Community 2019
• Microsoft .NET Framework Ver.4.8

使用するコントロール

使用するのは 3つだけ

• Panel panel1　これが隠れるパネル
• Timer timer1　隠れるアニメーション用タイマー
• Label label1　クリックイベントで閉じたり開いたりさせる

作成

コントロールの配置

form にpanel1を配置します。
[プロパティ]

• BackColor = "ActiveCaption"
• Dock = "Left"
  
  panel1上にラベルで閉じたり開いたりするための つまみ を作成します。
  [プロパティ]
• AutoSize = "False"
• BackColor = "ControlDarkDark"
• Dock = "Right"
• Font = メイリオ, 12pt, style=Bold
• ForeColor = "White"
• text = "<"
• TextAlign = "MiddleCenter"
  
  timerを設置します。
  [プロパティ]
  Interval = 10 この数値が小さいほど動きが早くなります。

コーディング

使用する 変数、定数 の準備

Form1.cs

    public partial class Form1 : Form
    {
        const int PITCH = 10; // 閉じる(開く)移動幅 小さくするとなめらかになります。
        bool _is_hide = false; // 表示状況 true:非表示状態 false:表示状態
        int _hidePanelWidth; // 現在の隠れるパネルの幅

Form の Loadイベントで隠れるパネルの現状の幅を取得

Form1.cs-Form1_Load()

    private void Form1_Load(object sender, EventArgs e)
    {
        _hidePanelWidth = this.panel1.Width; // 隠れパネルの幅を取得
    }

ラベルの Clickイベント を記述します。
クリックされるごとにタイマーをスタートします。

Form1.cs-Label1_Click()

        private void Label1_Click(object sender, EventArgs e)
        {
            timer1.Start(); // タイマースタート
        }

タイマーの Tickイベント を記述します。
タイマーがスタートされると、 Interval で設定されている時間(ms)ごとにTickイベントが実行されます。

Form1.cs-Timer1_Tick()

        private void Timer1_Tick(object sender, EventArgs e)
        {
            // 表示状況により分岐
            if (_is_hide)
            { // 閉じているとき
                this.panel1.Width = this.panel1.Width + PITCH; // 幅をピッチ分増やす
　　　　　　　　　
　　　　　　　　　// 増加後の幅が当初の幅を超えたか 
                if (this.panel1.Width >= _hidePanelWidth)
                {
                    timer1.Stop(); // タイマーをストップ
                    this.panel1.Width = _hidePanelWidth; // 当初の幅に再設定
                    label1.Text = "<"; // つまみの方向を反転
                    _is_hide = false; // 表示状況を反転
                }
            }
            else
            { // 開いているとき
                this.panel1.Width = this.panel1.Width - PITCH; // 幅をピッチ分減らす
　　　　　　　　　
　　　　　　　　　// 減少後の幅がつまみの幅を下回った場合 
                if (this.panel1.Width <= label1.Width)
                {
                    timer1.Stop(); // タイマーをストップ
                    this.panel1.Width = label1.Width; // つまみ分の幅に再設定
                    label1.Text = ">"; // つまみの方向を反転
                    _is_hide = true; // 表示状況を反転
                }
            }
        }

これで、こんな感じになります。

少しつまらないので、ボタンでも置いてみます...
あっ!

ボタンの端が残ってしまっています。
隠しパネル内に配置したコントロールは Anchor を "Top, Right" にすることで解決できます。

ちゃんとボタンも隠れました。