はじめに
今回も、引き続き「ComponentOne Studio 2013J」のC1Gaugeコントロール（Gauges for WinForms）を使ったアプリケーションを作成します。
前回の記事『グラフィカルな円形・直線ゲージを持つ.NETアプリケーションの作成』では、テンプレートを使ったゲージを作成しましたが、記事でも紹介したようにC1Gaugeコントロールはかなり細かい部分までカスタマイズできるようになっています。
そこで今回は、テンプレートを使って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 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| 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ボタンをクリックすると、このタイプの円形ゲージが作成されます。
② サイズを大きくし、「C1Gaugeタスク」から「新しいゲージの追加」メニューをクリックします。
③ 再び「新しいゲージギャラリー」が表示されますので、「円形ゲージ」タブから「Auto Clamshell」をクリックします。これで、ゲージ「Fuelmeter」の中にゲージ「Auto Clamshell」が組み込まれ、複合ゲージが作成されます。
「Auto Clamshell」ゲージのカスタマイズ
最初に、「Auto Clamshell」ゲージのカスタマイズを行います。このゲージはサイズを小さくして、「Fuelmeter」ゲージの右下に配置します。また、目盛の数字（ラベル）の色をオレンジに変えます。
サイズ変更は、「ビュー」を変更して行います。C1RadialGaugeクラスのサブクラスである「C1GaugeViewport」クラスのメンバプロパティを使用し、見た目を小さくすることでゲージのサイズを小さくします。
① プロパティウィンドウのオブジェクトリストから「C1RadialGauge2」を選びます。
② プロパティウィンドウの「C1GaugeViewport」プロパティをクリックして展開します。ここには表示関係のプロパティが並んでいますので、次のプロパティの値を変更します。
| プロパティ | 設定値 |
|---|---|
| X | 230 |
| Y | 370 |
これらのプロパティは、ゲージのXY軸方向の位置を設定するプロパティですが、コンテナ内の位置に収まるように自動的にゲージがリサイズされます。
| 名前 | 説明 |
|---|---|
| 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 |
| Width | 3 |
② 次に「F」と「E」の文字色を変えます。これらの文字はC1GaugeCaptionクラスのメンバを使用しています。C1GaugeCaptionクラスにアクセスするには、「C1RadialGauge1」のCoverShapesプロパティをクリックして表示されるCoverShapesコレクションエディタを使用します。
このエディタの「メンバー」リストにある2つの「Caption」オブジェクトが「F」と「E」の文字を表していますので、これらのColorプロパティの値を次のように設定します。
| 文字（Textプロパティ） | プロパティ | 設定値 |
|---|---|---|
| F | Color | RoyalBlue |
| E | Color | DarkRed |
③ 続いて、ポインタの根元にあるキャップも変えます。これは、C1GaugeCapクラスのメンバを使用し、プロパティウィンドウにある「Cap」プロパティを展開して設定します。
ここでは、グリーン系のグラデーションで、少し小さい円の形状に変えます。
キャップの色はFillingプロパティを、円の直径はRadiusプロパティを使用します。
| クラス | プロパティ | 設定値 |
|---|---|---|
| Filling | BrushType | Gradient |
| Color | ForestGreen | |
| Color2 | 64,64,64（デフォルト） | |
| Cap | Radius | 7 |
| Shadow | Color | Transparent |
| Visible | True |
以上で出来上がりです。
ゲージの動作処理
ゲージの動作を確認するために、簡単な動作処理を組み込みます。これは、タイマーコントロールを使用し、2秒ごとに2つのゲージを値が減る方向に動かします。
ここでは、モバイル機器のバッテリー容量を表示するアプリケーションとして作成しますので、ラベルでバッテリー残量と使用可能時間を表示するようにします。
フォームにLabelコントロールを4つと、Timerコントロールを1つ配置します。そして、TimerコントロールのTickイベントハンドラで、ゲージの現在値を減らす処理を組み込みます。
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;
}
}
}
}
まとめ
このように、かなり細かくゲージをデザインすることができますので、アプリケーションの仕様に合ったゲージをデザインし実装できます。
ゲージは数値データをビジュアル化するのにとても便利です。C1Gaugeコントロールは、テンプレート機能を上手に使えば、カスタムゲージの作成作業もかなり楽になりますから、データのビジュアル化にもってこいのコントロールと言えるでしょう。
