C# ツールバーを作る(2/3) - テクニカルノート

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

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

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

種類	クラス名	機能
Label	ToolStripLabelクラス	テキスト（及び画像）を表示
Separator	ToolStripSeparatorクラス	アイテムの区切りを示す縦棒を表示
SplitButton	ToolStripSplitButtonクラス	ボタン＋ドロップダウン
DropDownButton	ToolStripDropDownButtonクラス	ドロップダウンメニュー
ComboBox	ToolStripComboBoxクラス	コンボボックスを表示
TextBox	ToolStripTextBoxクラス	TextBoxコントロールを表示
ProgressBar	ToolStripProgressBarクラス	ProgressBarコントロールを表示

クラスはすべて 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つは、機能としては

スプリットボタン(ToolStripSplitButton)	文字列部分をクリックしただけではドロップダウンは表示されない
ドロップダウンメニュー(ToolStripDropDownButton)	文字列部分をクリックしたらドロップダウンが表示される

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