SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(PlusPak)

独自のドロップダウンウィンドウを持った.NETアプリケーションの作成

PlusPak for Windows Forms 6.0JのGcComboFrameコントロールを使ったアプリケーションの作成

  • X ポスト
  • このエントリーをはてなブックマークに追加

フォームのデザイン

 では、フォームを組み立てていきます。

 まず、GroupBoxコントロールとLabelコントロール、TextBoxコントロールを配置し、TextBoxコントロールの後ろに、GcComboFrameコントロールを配置します。

TextBoxコントロールの後ろにGcComboFrameコントロールを配置する
TextBoxコントロールの後ろにGcComboFrameコントロールを配置する

 GcComboFrameコントロールのコンテントパネルに、Labelコントロールをドラッグ&ドロップします。AutoSizeプロパティをFalseにし、コンテントパネルにフィットするようにサイズを調整します。

 そして、Textプロパティを「0」にし、TextAlignプロパティをMiddleRightにしておきます。

 続いて、フォームにGcCalculatorコントロールを配置します。今回は、電卓のデザインはデフォルトのまま使用します。GcComboFrameコントロールを選択し、スマートタグを開いて「ドロップダウンコントロール」のリストから「GcCalculator1」を選びます。ドロップダウンコントロールを設定した時点で、フォームからGcCalculatorコントロールが消えます。

この時、GcComboFrameコントロールのDropDownControlプロパティにある「AutoSize」プロパティを「True」に設定することで、電卓のサイズを自動的にGcComboFrameコントロールに合わせることができます。

「ドロップダウンコントロール」に「GcCalculator1」を設定する

「ドロップダウンコントロール」に「GcCalculator1」を設定する

 GcCalculatorコントロールの後ろにComboBoxコントロールを配置し、ドロップダウンリストに設定します。

 作成したGroupBoxコントロールと矢印のラベルをコピー・ペーストして合計3組作成し、合計用のボタンとラベルを作成します。また、GcCalculatorコントロールも2つフォームに配置し、残りの2つのGcComboFrameコントロールの「ドロップダウンコントロール」にそれぞれ追加します。

 最後に[終了]ボタンを作成し、できあがりです。プロジェクトを実行し、GcComboFrameコントロールのサイドボタンをクリックして電卓が表示されれば完成です。

完成したフォーム
完成したフォーム

ビハインドコードの作成

 では、計算処理を行うコードを作成していきます。フォームのLoadイベントハンドラでComboBoxコントロールのドロップダウンリストを作る処理を作成します。

Visual Basic
Public Class Form1

    Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        Dim traffic() As String = {"交通手段", "JR", "私鉄", "リムジンバス", "バス", "タクシー", "地下鉄", "飛行機"}

        ComboBox1.Items.AddRange(traffic)
        ComboBox1.Text = ComboBox1.Items(0).ToString()

        ComboBox2.Items.AddRange(traffic)
        ComboBox2.Text = ComboBox2.Items(0).ToString()

        ComboBox3.Items.AddRange(traffic)
        ComboBox3.Text = ComboBox3.Items(0).ToString()
    End Sub
C#
namespace combo_flame_cs
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            String[] traffic = { "交通手段", "JR", "私鉄", "リムジンバス", "バス", "タクシー", "地下鉄", "飛行機" };

            comboBox1.Items.AddRange(traffic);
            comboBox1.Text = comboBox1.Items[0].ToString();

            comboBox2.Items.AddRange(traffic);
            comboBox2.Text = comboBox2.Items[0].ToString();

            comboBox3.Items.AddRange(traffic);
            comboBox3.Text = comboBox3.Items[0].ToString();
        }

 ドロップダウンした電卓の値をラベルで表示する処理を、GcComboFrameコントロールのDropDownClosedイベントハンドラに作成します。このイベントは、GcComboFrameコントロールのサイドボタンを押して、ドロップダウン領域を閉じた時点で発生します。したがって、ユーザーが電卓で計算したあとサイドボタンを押せば、計算結果がラベルに表示されるようになります。

 この処理は、GcCalculatorコントロールのValueプロパティの値を、LabelコントロールのTextプロパティに代入するだけです。3つのGcComboFrameコントロールのDropDownClosedイベントハンドラに作成します。なお、GcCalculatorコントロールのValueプロパティの値はDecimal型なので、String型に変換して代入します。

Visual Basic
Private Sub GcComboFrame1_DropDownClosed(sender As Object, e As GrapeCity.Win.Common.DropDownClosedEventArgs) Handles GcComboFrame1.DropDownClosed
Label4.Text = GcCalculator1.Value.ToString
End Sub

Private Sub GcComboFrame2_DropDownClosed(sender As Object, e As GrapeCity.Win.Common.DropDownClosedEventArgs) Handles GcComboFrame2.DropDownClosed
Label6.Text = GcCalculator2.Value.ToString
End Sub

Private Sub GcComboFrame3_DropDownClosed(sender As Object, e As GrapeCity.Win.Common.DropDownClosedEventArgs) Handles GcComboFrame3.DropDownClosed
Label10.Text = GcCalculator3.Value.ToString
End Sub
C#
private void gcComboFrame1_DropDownClosed(object sender, GrapeCity.Win.Common.DropDownClosedEventArgs e) {     
label4.Text = gcCalculator1.Value.ToString(); 
}  

private void gcComboFrame2_DropDownClosed(object sender, GrapeCity.Win.Common.DropDownClosedEventArgs e) {
 label6.Text = gcCalculator2.Value.ToString(); 
}  

private void gcComboFrame3_DropDownClosed(object sender, GrapeCity.Win.Common.DropDownClosedEventArgs e) {
 label10.Text = gcCalculator3.Value.ToString(); 
}  

 なお、GcComboFrameコントロールで電卓をドロップダウンした時に、すぐにキーボードで電卓が操作できるようにフォーカスをGcCalculatorコントロールに移しておきます。 これは、GcComboFrameコントロールのDropDownOpenedイベントハンドラを使用します。

Visual Basic
Private Sub GcComboFrame1_DropDownOpened(sender As Object, e As System.EventArgs) Handles GcComboFrame1.DropDownOpened
    GcCalculator1.Focus()
End Sub

Private Sub GcComboFrame2_DropDownOpened(sender As Object, e As System.EventArgs) Handles GcComboFrame2.DropDownOpened
    GcCalculator2.Focus()
End Sub

Private Sub GcComboFrame3_DropDownOpened(sender As Object, e As System.EventArgs) Handles GcComboFrame3.DropDownOpened
    GcCalculator3.Focus()
End Sub
C#
private void gcComboFrame1_DropDownOpened(object sender, EventArgs e)
{
    gcCalculator1.Focus();
}

private void gcComboFrame2_DropDownOpened(object sender, EventArgs e)
{
    gcCalculator2.Focus();
}

private void gcComboFrame3_DropDownOpened(object sender, EventArgs e)
{
    gcCalculator3.Focus();
}

 「合計」ボタンのClickイベントハンドラで、3つのラベルに表示されている値を合計して表示します。LabelコントロールのTextプロパティはString型なので、これを整数に変換しTextから計算します。最後に「終了」ボタンの処理を組み込んで完成です。

Visual Basic
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    Dim ttl As Integer = Integer.Parse(Label4.Text) + Integer.Parse(Label6.Text) + Integer.Parse(Label10.Text)

    Label13.Text = ttl.ToString("c")
End Sub

Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
    Me.Close()
End Sub
C#
private void button1_Click(object sender, EventArgs e)
{
    int ttl = int.Parse(label4.Text) + int.Parse(label6.Text) + int.Parse(label10.Text);
    label13.Text = ttl.ToString("c");
}

private void button2_Click(object sender, EventArgs e)
{
    this.Close();
}

まとめ

 今回のサンプルと同様の画面はInputManの数値コントロールを使うとプロパティ設定で実現できます。しかし、GcComboFrameの魅力は、電卓に限らず、データグリッドやテキスト、各種ボタンなどの多様なコントロールをアタッチできるところです。もちろん、標準コントロールも適用できます。

 使い方によっては、最近のWebサイトでよく見かけるメガメニューのようなナビゲーションや、InputManの入力コントロールと組み合わせて、ユーザーIDとパスワードを入力するフィールドをドロップダウンさせる画面なども実現できます。

 使い方も難しくないので、フォームのレイアウトに頭を悩ませている方は、導入を検討してみてはいかがでしょうか。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(PlusPak)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6579 2012/05/23 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング