複合ゲージを持つ.NETアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

2013/08/29 14:00

ポスト

ダウンロードサンプルファイル（バイナリ） (200.1 KB)
ダウンロードサンプルコード（C#） (17.5 KB)
ダウンロードサンプルコード（VB） (18.5 KB)

　「ComponentOne Studio 2013J」のC1Gaugesコントロール（Gauges for WinForms）を使ってゲージの中にもう一つのゲージを組み込み、さらにテンプレートでデザインを変更したアプリケーションを作成してみます。

ポスト

はじめに

　今回も、引き続き「ComponentOne Studio 2013J」のC1Gaugeコントロール（Gauges for WinForms）を使ったアプリケーションを作成します。

　前回の記事『グラフィカルな円形・直線ゲージを持つ.NETアプリケーションの作成』では、テンプレートを使ったゲージを作成しましたが、記事でも紹介したようにC1Gaugeコントロールはかなり細かい部分までカスタマイズできるようになっています。

　そこで今回は、テンプレートを使って1つのゲージの中にもう一つゲージを組み込み、これをベースにデザインを変えたゲージを作成してみます。

1つのゲージの中にもう一つゲージを組み込む

カラーやシャドウでデザインを修正

対象読者

　Visual Basic 2010/2012、またはVisual C# 2010/2012を使ってプログラムを作ったことがある人。

必要な環境

　Visual Basic 2010/2012、Visual C# 2010/2012、Visual Studio 2010/2012でプログラムが作れる環境。

　なお、本プログラムは次の環境で開発・動作確認を行っています。

OS：Windows 7
開発Tool：Visual Studio 2010、.NET Framework 4

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

　本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4でのみご使用いただけます）。

ファイル名	内容
C1.Win.C1Gauge.4.dll	本体アセンブリ

　このファイルを、実行プログラムと同じフォルダに格納します。

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

　トライアル版は、グレープシティのWebページから申し込みできます。

　トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

　制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

　「ComponentOne Studio 2013J」をインストールしたら、プロジェクトにコントロールを追加します。

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Win.C1Gauge.4」の「C1Gauges」コントロールです。

アセンブリ名が「C1.Win.C1Gauge.4」の「C1Gauges」コントロールを選択する

　これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル	内容
C1.Win.C1Gauge.4	本体アセンブリ

　また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル	内容
C1.Win.C1Gauge.4.dll	本体アセンブリ

　なお、.NET Framework 4が必要です。

C1Gaugeコントロールのカスタマイズ

　C1Gaugeコントロールは、コンテナコントロール「C1Gauges」コントロールの中に「C1RadialGauge」「C1LinearGauge」コンポーネントが組み込まれて1つのコントロールの形になります。

　そして、「C1RadialGauge」「C1LinearGauge」コンポーネントは、FaceShapes、CoverShapes、Decoratorsなどのクラスで構成されています。これらのクラスのメンバプロパティを使うことで、ゲージの細部にわたりカスタマイズが可能になっています。

　今回作成するゲージは、テンプレートを使って作成したゲージをベースに、ラベルや目盛線、ポインタなどいくつかの部位をカスタマイズしたゲージを作成します。

　具体的に、どのようなクラスを使ってパーツを構成しているのかは、前回の記事『グラフィカルな円形・直線ゲージを持つ.NETアプリケーションの作成』を参照してください。

カスタマイズに使用する主なサブクラスとプロパティ
クラス、プロパティ	説明
Decorator	ラベルや目盛記号など、各種デコレータのコレクション。
FaceShapes/CoverShapes	ゲージの最背面（FaceShapes）および最前面（CoverShapes）に表示される形状の2つのコレクション。
Pointer	ゲージのメインポインタ。メインポインタは非表示にできますが、削除できません。
MorePointers	その他のポインタのコレクション。
Value	メインポインタの現在値。
Minimum/Maximum	スケール調整された値など、すべてのポインタ値の下限と上限を指定します。
Viewport	ゲージの作業領域の範囲を指定します。

GUIの作成

　では、さっそくアプリケーションを作成していきます。

　今回は、テンプレートを利用して1つのC1Gaugeコントロール内に2つの円形ゲージ（C1RadialGauge）を組み込みます。そして、以下の項目をカスタマイズします。

部位	設定内容
動作範囲	最大値、最小値、現在地
マーカー	前面色、シャドー
ラベル	前面色、シャドー
ポインタ	前面色、シャドー
ビュー	X、Y座標位置

　また、デモとしてゲージを動かすために、タイマーを使って2秒ごとにゲージを動かします。

フォームのレイアウト

コントロールの作成と配置

　では、順番に各コントロールを配置しゲージを作成していきましょう。

　① ツールボックスから、C1Gaugeコントロールのアイコンをフォームにドラッグ＆ドロップします。

　「新しいギャラリー」が表示されますので、「円形ゲージ」タブから「Fuelmeter」をクリックします。

　OKボタンをクリックすると、このタイプの円形ゲージが作成されます。

「円形ゲージ」タブから「Fuelmeter」をクリック

　② サイズを大きくし、「C1Gaugeタスク」から「新しいゲージの追加」メニューをクリックします。

「C1Gaugeタスク」から「新しいゲージの追加」メニューをクリック

　③ 再び「新しいゲージギャラリー」が表示されますので、「円形ゲージ」タブから「Auto Clamshell」をクリックします。これで、ゲージ「Fuelmeter」の中にゲージ「Auto Clamshell」が組み込まれ、複合ゲージが作成されます。

「円形ゲージ」タブから「Auto Clamshell」をクリック

ゲージ「Fuelmeter」の中にゲージ「Auto Clamshell」が組み込まれた複合ゲージが作成される

「Auto Clamshell」ゲージのカスタマイズ

　最初に、「Auto Clamshell」ゲージのカスタマイズを行います。このゲージはサイズを小さくして、「Fuelmeter」ゲージの右下に配置します。また、目盛の数字（ラベル）の色をオレンジに変えます。

　サイズ変更は、「ビュー」を変更して行います。C1RadialGaugeクラスのサブクラスである「C1GaugeViewport」クラスのメンバプロパティを使用し、見た目を小さくすることでゲージのサイズを小さくします。

　① プロパティウィンドウのオブジェクトリストから「C1RadialGauge2」を選びます。

　② プロパティウィンドウの「C1GaugeViewport」プロパティをクリックして展開します。ここには表示関係のプロパティが並んでいますので、次のプロパティの値を変更します。

プロパティ	設定値
X	230
Y	370

　これらのプロパティは、ゲージのXY軸方向の位置を設定するプロパティですが、コンテナ内の位置に収まるように自動的にゲージがリサイズされます。

「Auto Clamshell」ゲージが小さくなりコンテナの左下に収まる

「C1GaugeViewport」クラスのメンバプロパティ
名前	説明
AspectPinX	縦横比を維持するためにビューポートの移動時に固定状態にする相対X位置を取得または設定します。
AspectPinY	縦横比を維持するためにビューポートの移動時に固定状態にする相対Y位置を取得または設定します。
AspectRatio	ビューポートの幅と高さの固定比率を設定します。
Bounds	親コントロールに相対したビューポートのサイズと位置（ピクセル単位）を取得または設定します。
Height	ビューポートの高さをピクセル単位で取得または設定します。
MarginX	左および右余白（ピクセル単位）を取得または設定します。
MarginY	上および下余白（ピクセル単位）を取得または設定します。
ScaleX	ビューポートの幅を指定の相対量だけ拡大縮小します（移動後）。
ScaleY	ビューポートの高さを指定の相対量だけ拡大縮小します（移動後）。
TranslateX	ビューポートをX軸に沿って指定の相対量だけ移動します（拡大縮小する前）。
TranslateY	ビューポートをY軸に沿って指定の相対量だけ移動します（拡大縮小する前）。
Width	ビューポートの幅をピクセル単位で取得または設定します。
X	ビューポートのXオフセット（ピクセル単位）を取得または設定します。
Y	ビューポートのYオフセット（ピクセル単位）を取得または設定します。

　③ 続いて動作範囲を変更します。このゲージでは、「0」から「240」まで動作するようにします。

　引き続き「C1RadialGauge2」のプロパティウィンドウで、次のプロパティを変更します。「Maximum」「Minimum」のプロパティで、ゲージの動作範囲が決まります。また、「Value」プロパティが現在の値を表すプロパティです。

プロパティ	設定値
Maximum	240
Minimum	0
Value	240

　④ 最後に目盛の文字色を変えます。これは、「Decorators」コレクションオブジェクトのサブクラス「C1GaugeLabels」クラスのメンバを操作します。

　「Decorators」プロパティの値欄にある「...」ボタンをクリックします。「Decorators」コレクションエディタが起動しますので、「メンバー」から「[1]Labels」をクリックし、右ペインのプロパティリストで次のプロパティを変更します。これで、ゲージの文字色がオレンジに変わります。

プロパティ	設定値
Color	Coral

ゲージの文字色がオレンジに変わる

　なお、操作対象のオブジェクト名を知りたい場合は、ゲージのその部位にマウスポインタを重ねると、その部位がハイライト表示になり、オブジェクト名がツールチップで表示されます。

オブジェクト名がツールチップで表示される

「Fuelmeter」ゲージのカスタマイズ

　次に、「Fuelmeter」ゲージをカスタマイズしていきます。

　このゲージでは、ポインタ、マーカーラベルの色を変えシャドーを設定します。また、動作範囲はそのままで現在値を変えます。

　① 最初に大きいマーカーをカスタマイズします。

　プロパティウィンドウのオブジェクトリストから「C1RadialGauge1」を選び、「Decorators」プロパティの値欄にある「...」ボタンをクリックします。「Decorators」コレクションエディタが起動しますので、「メンバー」から「[0]Marks」をクリックし、右ペインのプロパティリストで次のプロパティを変更します。

　C1GaugeFillingクラスのColorプロパティは、マーカーの色を設定します。

　C1GaugeShadowクラスは影の設定を担当するクラスで、Colorプロパティで影色を、OffsetX、OffsetYプロパティで影の位置を設定し、Opacityプロパティで色の透明度を設定します。そして、VisibleプロパティをTrueにすると影が表示されます。

クラス	プロパティ	設定値
Filling	Color	Aquamarine
Shadow	Color	Black
	OffsetX	0.5
	OffsetY	0.5
	Opacity	50％
	Visible	True

マーカーラベルの色を変えシャドーを設定

　② 次に小さいマーカーをデザインします。同じく「Decorators」コレクションエディタの「メンバー」から「[1]Marks」をクリックし、右ペインのプロパティリストでC1GaugeFillingクラスのColorプロパティを「DarkCyan」に変更します。このマーカーでは表示がごちゃごちゃしてしまうので、影はつけません。

クラス	プロパティ	設定値
Filling	Color	DarkCyan

小さいマーカーの色を変更

　③ 同じく「Decorators」コレクションエディタの「メンバー」から「[2]Labels」をクリックし、右ペインのプロパティリストで次のプロパティを変更します。

　これで、ラベルの色が変更され影が付きます。

クラス	プロパティ	設定値
Labels	Color	MediumBlue
Shadow	Color	Black
	OffsetX	0.5
	OffsetY	0.5
	Opacity	50％
	Visible	True

ラベルの色が変更され影が付く

　④ 最後に、「C1RadialGauge1」のValueプロパティを「100」に設定します。

「Fuelmeter」ゲージのポインタと「F」「E」文字の色のカスタマイズ

　ポインタのカスタマイズは、「C1GaugePointer」クラスのメンバを使用します。ここでは、ポインタの形状とサイズ、色を変更します。

　また、「F」と「E」の文字は、カバーの文字になるので、covershapesコレクションに属するのC1GaugeCaptionクラスのメンバを使用します。

　① 「C1RadialGauge1」のPointerプロパティをクリックして展開します。

　そして、次のプロパティを設定します。

　BorderクラスのColorプロパティはポインタの枠線を、FillingクラスのColorはポインタの塗りつぶし色を、BrushTypeはその塗りつぶし方法を設定するプロパティです。グラデーションで塗りつぶす場合は、BrushTypeプロパティを「Gradient」に設定し、Color/Color2プロパティでグラデーションに使用する2色を設定します。

　また、Shadowプロパティは影の設定を行い、Shapeプロパティでポインタの形状を設定します。そして、Widthプロパティでポインタの幅を設定します。

クラス	プロパティ	設定値
Border	Color	OrangeRed
Filling	BrushType	Gradient
	Color	MediumVioletRed
	Color2	Violet
Shadow	OffsetX	1
	OffsetY	1
	Opacity	100
	Visible	True
Pointer	Shape	Thumb
Pointer	Width	3

ポインタの形状と色が変更された

　② 次に「F」と「E」の文字色を変えます。これらの文字はC1GaugeCaptionクラスのメンバを使用しています。C1GaugeCaptionクラスにアクセスするには、「C1RadialGauge1」のCoverShapesプロパティをクリックして表示されるCoverShapesコレクションエディタを使用します。

　このエディタの「メンバー」リストにある2つの「Caption」オブジェクトが「F」と「E」の文字を表していますので、これらのColorプロパティの値を次のように設定します。

文字（Textプロパティ）	プロパティ	設定値
F	Color	RoyalBlue
E	Color	DarkRed

CoverShapesコレクションエディタで「Caption」オブジェクトのColorプロパティの値を設定する

　③ 続いて、ポインタの根元にあるキャップも変えます。これは、C1GaugeCapクラスのメンバを使用し、プロパティウィンドウにある「Cap」プロパティを展開して設定します。

　ここでは、グリーン系のグラデーションで、少し小さい円の形状に変えます。

　キャップの色はFillingプロパティを、円の直径はRadiusプロパティを使用します。

クラス	プロパティ	設定値
Filling	BrushType	Gradient
	Color	ForestGreen
	Color2	64,64,64（デフォルト）
Cap	Radius	7
Shadow	Color	Transparent
Shadow	Visible	True

　以上で出来上がりです。

完成したゲージ

ゲージの動作処理

　ゲージの動作を確認するために、簡単な動作処理を組み込みます。これは、タイマーコントロールを使用し、2秒ごとに2つのゲージを値が減る方向に動かします。

　ここでは、モバイル機器のバッテリー容量を表示するアプリケーションとして作成しますので、ラベルでバッテリー残量と使用可能時間を表示するようにします。

　フォームにLabelコントロールを4つと、Timerコントロールを1つ配置します。そして、TimerコントロールのTickイベントハンドラで、ゲージの現在値を減らす処理を組み込みます。

Visual Basic

Public Class Form1
    Private time As Integer = 240
    Private percent As Integer = 100
    Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
        If percent = 0 Then
            Timer1.Enabled = False
        Else
            percent -= 5
            Label2.Text = percent & "%"
            C1RadialGauge1.Value = percent

            time -= 12
            Label4.Text = time & "分"
            C1RadialGauge1.Value = time
        End If
    End Sub
End Class

namespace Gauge_winform_2_cs
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private int time = 240;
        private int percent = 100;
        private void timer1_Tick(object sender, EventArgs e)
        {
            if(percent == 0)
            {
                timer1.Enabled = false;
            }
            else
            {
                percent -= 5;
                label2.Text = percent.ToString() + "%";
                c1RadialGauge1.Value = percent;

                time -= 12;
                label4.Text = time.ToString() +  "分";
                c1RadialGauge2.Value = time;
            }
        }
    }
}

完成したアプリケーション