C# ツールバーを作る(2/3)

ツールバーの土台になるToolStripの上に乗せることができるコントロールを紹介していきます。

ツールバーに追加できるコントロール

下表のようなコントロールに対するクラスがあります。

クラスはすべて System.Windows.Forms名前空間 のクラスです。

ラベル(ToolStripLabel)とセパレータ(ToolStripSeparator)

ラベル(ToolStripLabel)は、フォームに乗せるフォームと基本は同じですが、こちらは画像も表示できます。
セパレータ(ToolStripSeparator)は、文字通り「区切り」です。

ラベルとセパレータを追加するサンプルコードです。
(前にボタンがあります。ToolStripに追加した順に左から表示されていく感じになります)
このコードの場合、「ボタン」「セパレータ」「ラベル」で表示されます。

private System.Windows.Forms.ToolStrip toolStrip1;  // ツールバーの土台となるオブジェクト
private System.Windows.Forms.ToolStripButton toolStripButton1;  // ツールバーのボタン1

private System.Windows.Forms.ToolStripSeparator toolStripSeparator1;    // ツールバーのセパレータ
private System.Windows.Forms.ToolStripLabel toolStripLabel1;  // ツールバーのラベル1

private void frmMain_Load(object sender, EventArgs e)
{
    // フォームをロードした時の処理
    // レイアウトを一時停止
    this.SuspendLayout();

    // ToolStripクラスを生成します
    this.toolStrip1 = new ToolStrip();

    // ツールバーのレイアウトを一時停止
    this.toolStrip1.SuspendLayout();

    //
    // ツールバーの中に追加するコントロールを生成する
    // ここから --->

    // ToolStripButtonを作成
    this.toolStripButton1 = new ToolStripButton();
    // テキストを設定
    this.toolStripButton1.Text = "開く(&O)";
    // 画像を設定
    this.toolStripButton1.Image = Image.FromFile(@"btn_open.gif");
    // 画像だけを表示するボタンにします
    this.toolStripButton1.DisplayStyle = ToolStripItemDisplayStyle.Image;

    // ToolStripにボタンを追加します
    this.toolStrip1.Items.Add(this.toolStripButton1);

    // ToolStripSeparatorを作成
    this.toolStripSeparator1 = new ToolStripSeparator();
    // ToolStripにセパレータを追加します
    this.toolStrip1.Items.Add(this.toolStripSeparator1);

    // ToolStripLabelを作成
    this.toolStripLabel1 = new ToolStripLabel("らべるです");
    // イメージを設定
    this.toolStripLabel1.Image = Image.FromFile(@"btn_open.gif");
    // ToolStripにラベルを追加します
    this.toolStrip1.Items.Add(this.toolStripLabel1);

    // フォームにToolStrip(ツールバー)を追加
    this.Controls.Add(this.toolStrip1);

    // ---> ここまで
    // ツールバーの中に追加するコントロールを生成する
    //

    // ツールバーのレイアウトを再開
    this.toolStrip1.ResumeLayout(false);
    this.toolStrip1.PerformLayout();

    // レイアウトを再開
    this.ResumeLayout(false);
    this.PerformLayout();

}

スプリットボタン(ToolStripSplitButton)

スプリットボタンは文字列部分をクリックするとボタンとして動作し、右の矢印ボタンをクリックすると、ドロップダウンリストが表示されます。

サンプルコードは下記のようになります。

private System.Windows.Forms.ToolStrip toolStrip1;  // ツールバーの土台となるオブジェクト
private System.Windows.Forms.ToolStripButton toolStripButton1;  // ツールバーのボタン1

private System.Windows.Forms.ToolStripSeparator toolStripSeparator1;    // ツールバーのセパレータ
private System.Windows.Forms.ToolStripSplitButton toolStripSplitButton1;    // ツールバーのスプリットボタン

private void frmMain_Load(object sender, EventArgs e)
{
    // フォームをロードした時の処理
    // レイアウトを一時停止
    this.SuspendLayout();

    // ToolStripクラスを生成します
    this.toolStrip1 = new ToolStrip();

    // ツールバーのレイアウトを一時停止
    this.toolStrip1.SuspendLayout();

    //
    // ツールバーの中に追加するコントロールを生成する
    // ここから --->

    // ToolStripButtonを作成
    this.toolStripButton1 = new ToolStripButton();
    // テキストを設定
    this.toolStripButton1.Text = "開く(&O)";
    // 画像を設定
    this.toolStripButton1.Image = Image.FromFile(@"btn_open.gif");
    // 画像だけを表示するボタンにします
    this.toolStripButton1.DisplayStyle = ToolStripItemDisplayStyle.Image;

    // ToolStripにボタンを追加します
    this.toolStrip1.Items.Add(this.toolStripButton1);

    // ToolStripSeparatorを作成
    this.toolStripSeparator1 = new ToolStripSeparator();
    // ToolStripにセパレータを追加します
    this.toolStrip1.Items.Add(this.toolStripSeparator1);

    // ToolStripSplitButtonを作成する
    this.toolStripSplitButton1 = new ToolStripSplitButton("スプリット");
    // ドロップダウンのリストを用意します
    this.toolStripSplitButton1.DropDownItems.Add("選択肢1");
    this.toolStripSplitButton1.DropDownItems.Add("選択肢2");
    this.toolStripSplitButton1.DropDownItems.Add("選択肢3");
    // ToolStripにスプリットボタンを追加します
    this.toolStrip1.Items.Add(this.toolStripSplitButton1);

    // フォームにToolStrip(ツールバー)を追加
    this.Controls.Add(this.toolStrip1);

    // ---> ここまで
    // ツールバーの中に追加するコントロールを生成する
    //

    // ツールバーのレイアウトを再開
    this.toolStrip1.ResumeLayout(false);
    this.toolStrip1.PerformLayout();

    // レイアウトを再開
    this.ResumeLayout(false);
    this.PerformLayout();

}

ドロップダウンメニュー(ToolStripDropDownButton)

スプリットボタンは右にドロップダウンの矢印ボタンがあり、クリックすると
リストが表示されます。

サンプルコードは下記のようになります。

private System.Windows.Forms.ToolStrip toolStrip1;  // ツールバーの土台となるオブジェクト
private System.Windows.Forms.ToolStripButton toolStripButton1;  // ツールバーのボタン1

private System.Windows.Forms.ToolStripSeparator toolStripSeparator1;    // ツールバーのセパレータ
private System.Windows.Forms.ToolStripDropDownButton toolStripDropDownButton1;    // ツールバーのドロップダウンボタン

private void frmMain_Load(object sender, EventArgs e)
{
    // フォームをロードした時の処理
    // レイアウトを一時停止
    this.SuspendLayout();

    // ToolStripクラスを生成します
    this.toolStrip1 = new ToolStrip();

    // ツールバーのレイアウトを一時停止
    this.toolStrip1.SuspendLayout();

    //
    // ツールバーの中に追加するコントロールを生成する
    // ここから --->

    // ToolStripButtonを作成
    this.toolStripButton1 = new ToolStripButton();
    // テキストを設定
    this.toolStripButton1.Text = "開く(&O)";
    // 画像を設定
    this.toolStripButton1.Image = Image.FromFile(@"btn_open.gif");
    // 画像だけを表示するボタンにします
    this.toolStripButton1.DisplayStyle = ToolStripItemDisplayStyle.Image;

    // ToolStripにボタンを追加します
    this.toolStrip1.Items.Add(this.toolStripButton1);

    // ToolStripSeparatorを作成
    this.toolStripSeparator1 = new ToolStripSeparator();
    // ToolStripにセパレータを追加します
    this.toolStrip1.Items.Add(this.toolStripSeparator1);

    // ToolStripDropDownButtonを作成する
    this.toolStripDropDownButton1 = new ToolStripDropDownButton("ドロップダウン");
    this.toolStripDropDownButton1.DropDownItems.Add("選択肢1");
    this.toolStripDropDownButton1.DropDownItems.Add("選択肢2");
    this.toolStripDropDownButton1.DropDownItems.Add("選択肢3");
    // ToolStripにスプリットボタンを追加します
    this.toolStrip1.Items.Add(this.toolStripDropDownButton1);

    // フォームにToolStrip(ツールバー)を追加
    this.Controls.Add(this.toolStrip1);

    // ---> ここまで
    // ツールバーの中に追加するコントロールを生成する
    //

    // ツールバーのレイアウトを再開
    this.toolStrip1.ResumeLayout(false);
    this.toolStrip1.PerformLayout();

    // レイアウトを再開
    this.ResumeLayout(false);
    this.PerformLayout();

}

スプリットボタン(ToolStripSplitButton)とドロップダウンメニュー(ToolStripDropDownButton)の違い

「スプリットボタン」と「ドロップダウンメニュー」を見ると、この二つは「何が違うの？」と思われるかもしれません。

この2つは、機能としては

という動きになり、画面上での違いは下記の画面キャプチャを参考にしてください。

スプリットボタン

ドロップダウンボタン

ボタン右の▼に区切りがあるかないかの違いです。