SHOEISHA iD

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

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

ComponentZine(PlusPak)

オリジナルデザインのラジオボタンを使った.NETアプリケーションを作る

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

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

 PlusPak for Windows Forms 5.0JのGcRadioButtonコントロールは、簡単に使えるうえ、チェックマークに好きな画像を組み込むことができる優れたコントロールです。今回は、このコントロールを使って、標準のラジオボタンとは一味違うGUIを持ったアプリケーションを作ってみました。

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

はじめに

 VS標準の各コントロールは、それぞれ機能的なデザインを持っていますが、やや無機質な感じがします。ラジオボタンも、選択・未選択のマークが◎や○という、地味なデザインになっています。このチェックマークを、自分の好きなデザインに変更できればフォームのデザインの幅も広がります。

 PlusPak for Windows Forms 5.0JのGcRadioButtonコントロールは、このチェックマークに好きな画像を組み込むことができる、すぐれたコントロールです。使い方はとてもカンタンで、ユーザーインターフェースをユニークなデザインに仕上げるのに役立ちます。

 今回は、このGcRadioButtonコントロールを使って、標準のラジオボタンとは一味違うGUIを持ったアプリケーションを作ってみました。

マウスポインタを重ねた時や選択時のチェックマークをカスタマイズできる
マウスポインタを重ねた時や選択時のチェックマークをカスタマイズできる

対象読者

 Visual Basic 2005・2008を使ってプログラムを作ったことのある人

必要な環境

 Visual Basic 2005、2008、Visual C# 2005、2008、Visual Studio 2005、2008でプログラムが作れる環境。

 なお、本プログラムはWindows Vista上で動作するVisual Studio 2005を使用して作成し、動作確認を行っています。

プログラム実行時の注意事項

 PlusPak for Windows Forms 5.0Jを使って作成したアプリケーションを配布する場合、PlusPak for Windows Forms 5.0Jのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。

 本記事のサンプルアプリケーションを正常に動作させるためには、次の4つのファイルをインストールする必要があります。

ファイル名 説明
GrapeCity.Win.PlusPak.v50.dll 本体コンポーネント
GrapeCity.Framework.PlusPak.v20.dll 製品のフレームワーク
GrapeCity.Win.PlusPak.v50.resources.dll 本体コンポーネントのサテライトリソース
GrapeCity.Framework.PlusPak.v20.resources.dll 製品フレームワークのサテライトリソース

 これらのファイルを、プログラムを実行する「bin」フォルダに格納します。

 .NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。

コンポーネントのインストール

 はじめてPlusPak for Windows Forms 5.0Jを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にPlusPak for Windows Forms 5.0Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできます。ユーザー情報を登録すると送られてくるメールにダウンロード用のURLが記載されているので、ここからダウンロードしてインストールしてください。ファイルはzip形式で圧縮されています。

 有償のコントロールですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 PlusPak for Windows Forms 5.0Jをインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、「.NET Frameworkコントロール」のアセンブリ名が「GrapeCity.Win.PlusPak」で始まるコンポーネント「GcRadioButton」です。

アセンブリ名が「GrapeCity.Win.PlusPak」で始まる「GcRadioButton」コントロールを選択する
アセンブリ名が「GrapeCity.Win.PlusPak」で始まる「GcRadioButton」コントロールを選択する

GUIのデザイン

 今回作成するGUIは、ショッピング用アプリケーションのフォームですが、具体的な処理は持っていません。あくまでも、GcRadioButtonコントロールの使い方のサンプルという形態になっています。

 使用するコントロールは、標準コントロールのGroupBox、Label、Button、NumericUpDownと、GcRadioButtonです。標準コントロールは、よく使うプロパティの設定を行う程度です。フォームとGroupBoxコントロールの[BackColor]プロパティに白色を設定しておきます。

 「Size」GroupBoxのGcRadioButtonコントロールには、[Image]プロパティにJPEG画像を組み込んでいます。GcRadioButtonの設定については、後ほど説明します。

GUIの画面
GUIの画面

 また、次の画像ファイルをプロジェクトリソースとしてインポートしておきます。

  • check.jpg
  • blank.jpg
  • checked arrow.jpg
  • LL.jpg
  • L.jpg
  • M.jpg
  • S.jpg
  • T white.jpg
  • T red.jpg
  • T green.jpg
  • T orange.jpg
  • T navy.jpg
  • T pink.jpg
このプログラムで使用する画像ファイル
このプログラムで使用する画像ファイル

GcRadioButtonコントロールについて

 GcRadioButtonコントロールは、Visual Studio 標準RadioButtonコントロールより、さまざまな外観設定やチェックボックスのカスタマイズ機能を追加した拡張ラジオボタンコントロールです。

 カスタム画像を用いてチェックマークを自由に定義でき、チェックの状態やマウスホバー、押下の動作に応じてそれぞれ独自のイメージを設定し、表示させることができます。

 マウスの状態ごとに画像を設定可能で、かなり細かなチェックマークの入れ替えが行えるため、アニメーションのような効果を使うことができるようになります。

 チェックマークの画像設定は、次のプロパティに設定します。

プロパティ 説明
CheckedHoverImage チェックの状態がチェックで、マウスカーソルがコントロールの上に置かれている場合のチェックマーク イメージ
CheckedNormalImage チェックの状態がチェックで、コントロールが通常の状態の場合のチェックマーク イメージ
CheckedPressedImage チェックの状態がチェックで、マウスボタンがコントロールの上でクリックされた場合のチェックマーク イメージ
UncheckedHoverImage チェックの状態が未チェックで、マウスカーソルがコントロールの上に置かれている場合のチェックマーク イメージ
UncheckedNormalImage チェックの状態が未チェックで、コントロールが通常の状態の場合のチェックマーク イメージ
UncheckedPressedImage チェックの状態が未チェックで、マウスボタンがコントロールの上でクリックされた場合のチェックマーク イメージ

 デフォルトのチェックマークは、標準コントロールと同様のデザインで、削除できないようになっているので、マークを消したい場合はフォームやGroupBoxの背景色と同色の画像ファイルを用意して設定します。

 デフォルトのマークを使う場合でも、FlatStyleプロパティを使うことで、デザインを変更できます。

FlatStyleプロパティで設定できるスタイル(ヘルプファイルより抜粋)
FlatStyleプロパティで設定できるスタイル(ヘルプファイルより抜粋)

 さらに、チェックマークのサイズを文字のフォントに揃えたり、好きなサイズに指定できます。VS標準のRadioButtonコントロールでは、文字のサイズは変えられてもチェックマークのサイズまでは変えられません。しかし、GcRadioButtonコントロールは、文字のサイズに合わせてチェックマークのサイズも変更できます。

チェックマークのサイズも変更できる
チェックマークのサイズも変更できる

 また、GcRadioButtonコントロールで表示する文字列の向きや均等割り付け、3D表示などの特殊効果もプロパティで設定できます。

文字列の特殊効果(ヘルプファイル)
文字列の特殊効果(ヘルプファイル)

 デフォルトのイベントはCheckedChangedイベントで、チェックマークが入れ替わるたびに発生します。

色選択のチェックマークの設定

 このプログラムでは、デフォルトのマークを消して、チェックとマウスポインタを重ねた時の画像を、オリジナルの画像イメージに入れ替えます。

 デフォルトのマークを消すことで、マウスポインタがGcRadioButtonコントロールの上を移動するたびに、矢印の画像が移動していくように見える効果が出ます。このような表示は、VS標準のRadioButtonでは作れません。

矢印画像のチェックマークが移動していくように見える
矢印画像のチェックマークが移動していくように見える

 チェックマーク画像は、プロパティウィンドウで[CheckMark]をクリックすると表示される、プロパティ設定画面で指定します。

 このプログラムでは、「UncheckedNormalImage」プロパティにGroupBoxコントロールの背景色と同じ白色に塗りつぶした画像をセットしておきます。これで、非選択状態のときに表示されるマークを消すことができます。

 また、「UncheckedHoverImage」プロパティに矢印画像を、それ以外のプロパティにはチェックの画像を設定します。

CheckMarkプロパティと各プロパティ
CheckMarkプロパティと各プロパティ
画像設定のダイアログ
画像設定のダイアログ

 設定したチェックマークのサイズを変更するには、CheckMarkSizeプロパティで「Width」と「Height」プロパティの値を使用します。デフォルトでは、設定値が「13」になっているので、「16」に変更しました。

 1つのGcRadioButtonコントロールが設定できたら、後はコピー&ペーストで残りのGcRadioButtonコントロールを作成します。

サイズ選択のチェックマークの設定

 GcRadioButtonコントロールの基本的な設定は、色設定のGcRadioButtonコントロールと同じです。

 GcRadioButtonコントロールに画像を表示するには、VS標準のRadioButtonと同じように、Imageプロパティに画像を設定します。

サイズ選択のチェックマークの設定
サイズ選択のチェックマークの設定

GcRadioButtonコントロールのイベント処理

 GcRadioButtonコントロールのデフォルトのイベントは、CheckedChangedイベントです。チェックマークが入れ替わるたびに、このイベントがGcRadioButtonコントロールに発生します。

 また、チェックマークが付いているかどうかはCheckedプロパティを使用します。値は論理値で、Trueでチェック、Falseでチェックなしになります。値の取得と設定が行えます。

 色の選択グループでは、各GcRadioButtonコントロールのCheckedChangedイベントで、Checkedプロパティの値を調べ、Imageコントロールの画像をそれぞれの色の画像に入れ替えます。

 サイズ選択のグループでは、GcRadioButtonコントロールの文字列を取得し、変数に格納します。

Visual Basic
Public Class Form1
    Private t_color As String
    Private t_size As String

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        t_color = "White"
        t_size = "M"
    End Sub
    Private Sub GcRadio_white_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_white.CheckedChanged
        If sender.Checked = True Then
            PictureBox1.Image = Global.myradiobtn_vb.My.Resources.Resources.T_white
            t_color = sender.Text
        End If
    End Sub

    Private Sub GcRadio_Red_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_Red.CheckedChanged
        If sender.Checked = True Then
            PictureBox1.Image = Global.myradiobtn_vb.My.Resources.Resources.T_red
            t_color = sender.Text
        End If
    End Sub

    Private Sub GcRadio_green_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_green.CheckedChanged
        If sender.Checked = True Then
            PictureBox1.Image = Global.myradiobtn_vb.My.Resources.Resources.T_green
            t_color = sender.Text
        End If
    End Sub

    Private Sub GcRadio_orange_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_orange.CheckedChanged
        If sender.Checked = True Then
            PictureBox1.Image = Global.myradiobtn_vb.My.Resources.Resources.T_orange
            t_color = sender.Text
        End If
    End Sub

    Private Sub GcRadio_navy_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_navy.CheckedChanged
        If sender.Checked = True Then
            PictureBox1.Image = Global.myradiobtn_vb.My.Resources.Resources.T_navy
            t_color = sender.Text
        End If
    End Sub

    Private Sub GcRadio_Pink_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_Pink.CheckedChanged
        If sender.Checked = True Then
            PictureBox1.Image = Global.myradiobtn_vb.My.Resources.Resources.T_pink
            t_color = sender.Text
        End If
    End Sub
    Private Sub GcRadio_s_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_s.CheckedChanged
        If sender.Checked = True Then
            t_size = sender.text
        End If
    End Sub

    Private Sub GcRadio_m_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_m.CheckedChanged
        If sender.Checked = True Then
            t_size = sender.text
        End If
    End Sub

    Private Sub GcRadio_l_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_l.CheckedChanged
        If sender.Checked = True Then
            t_size = sender.text
        End If
    End Sub

    Private Sub GcRadio_ll_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcRadio_ll.CheckedChanged
        If sender.Checked = True Then
            t_size = sender.text
        End If
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Label11.Text = t_color
        Label13.Text = t_size
        Label15.Text = NumericUpDown1.Value
        Label17.Text = (NumericUpDown1.Value * 980).ToString & " 円"
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        Me.Close()
    End Sub

    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
        MessageBox.Show("ご注文を受け付けました。ありがとうございました。")
        Me.Close()
    End Sub
End Class
C#
public partial class Form1 : Form
{
    private String t_color;
    private String t_size;

    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        t_color = "White";
        t_size = "M";
    }

    private void gcRadio_white_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_white.Checked == true)
        {
           pictureBox1.Image = global::myradiobtn_cs.Properties.Resources.T_white;
           t_color = gcRadio_white.Text;
        }
    }

    private void gcRadio_red_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_red.Checked == true)
        {
            pictureBox1.Image = global::myradiobtn_cs.Properties.Resources.T_red;
            t_color = gcRadio_red.Text;
        }
    }

    private void gcRadio_green_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_green.Checked == true)
        {
            pictureBox1.Image = global::myradiobtn_cs.Properties.Resources.T_green;
            t_color = gcRadio_green.Text;
        }
    }

    private void gcRadio_orange_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_orange.Checked == true)
        {
            pictureBox1.Image = global::myradiobtn_cs.Properties.Resources.T_orange;
            t_color = gcRadio_orange.Text;
        }
    }

    private void gcRadio_navy_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_navy.Checked == true)
        {
            pictureBox1.Image = global::myradiobtn_cs.Properties.Resources.T_navy;
            t_color = gcRadio_navy.Text;
        }
    }

    private void gcRadio_pink_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_pink.Checked == true)
        {
            pictureBox1.Image = global::myradiobtn_cs.Properties.Resources.T_pink;
            t_color = gcRadio_pink.Text;
        }
    }

    private void gcRadio_s_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_s.Checked == true)
        {
            t_size = gcRadio_s.Text;
        }
    }

    private void gcRadio_m_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_m.Checked == true)
        {
            t_size = gcRadio_m.Text;
        }
    }

    private void gcRadio_l_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_l.Checked == true)
        {
            t_size = gcRadio_l.Text;
        }
    }

    private void gcRadio_ll_CheckedChanged(object sender, EventArgs e)
    {
        if (gcRadio_ll.Checked == true)
        {
            t_size = gcRadio_ll.Text;
        }
    }

    private void button1_Click(object sender, EventArgs e)
    {
    label11.Text = t_color;
    label13.Text = t_size;
    label15.Text = Convert.ToString(numericUpDown1.Value);
    label17.Text = Convert.ToString(numericUpDown1.Value * 980) + " 円";
    }

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

    private void button3_Click(object sender, EventArgs e)
    {
        MessageBox.Show("ご注文を受け付けました。ありがとうございました。");
        this.Close();
    }
}

まとめ

 ユーザーにとって、GUIはアプリケーションの使い勝手を決める最も重要な要素です。ラジオボタンのチェックマークのデザインが変わるだけで、フォームのイメージもかなり変わります。

 単純なデザインを変えるだけでも視覚効果が上がりますが、チェックマークが移動するようなデザインにすると、より一層「使って楽しいアプリケーション」に仕上げることができるのではないでしょうか。

製品情報

修正履歴

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3889 2009/05/28 13:53

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング