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

## やりたいこと
端っこに隠れるパネルを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/ec96689f-b032-b9b5-c617-bfe92397b236.png)

## 環境
* Microsoft Visual Studio Community 2019
* Microsoft .NET Framework Ver.4.8

## 使用するコントロール
使用するのは 3つだけ
* Panel panel1　これが隠れるパネル
* Timer timer1　隠れるアニメーション用タイマー
* Label label1　クリックイベントで閉じたり開いたりさせる
## 作成
### コントロールの配置
form にpanel1を配置します。
[プロパティ]
* BackColor = "ActiveCaption"
* Dock = "Left"
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/e53baf66-c125-7750-dfe8-e80f1011d90d.png)
panel1上にラベルで閉じたり開いたりするための つまみ を作成します。
[プロパティ]
* AutoSize = "False"
* BackColor = "ControlDarkDark"
* Dock = "Right"
* Font = メイリオ, 12pt, style=Bold
* ForeColor = "White"
* text = "<"
* TextAlign = "MiddleCenter"
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/82d1dffa-2a9f-1b80-1d75-28fb62395a1a.png)
timerを設置します。
[プロパティ]
Interval = 10 この数値が小さいほど動きが早くなります。
### コーディング
使用する 変数、定数 の準備

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

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

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

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

``` c#:Form1.cs-Label1_Click()
        private void Label1_Click(object sender, EventArgs e)
        {
            timer1.Start(); // タイマースタート
        }
```

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

``` c#: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; // 表示状況を反転
                }
            }
        }
```

これで、こんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/36f7f0f0-9666-9bf2-720e-ffd9935a9435.png)

少しつまらないので、ボタンでも置いてみます...
あっ!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/30d27639-05f7-f9d9-64de-14c40988af05.png)

ボタンの端が残ってしまっています。
隠しパネル内に配置したコントロールは Anchor を "Top, Right" にすることで解決できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/7e73e601-ccfa-6c95-dd20-70a5b2b2569c.png)
ちゃんとボタンも隠れました。