CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/08/29 14:00

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

はじめに

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

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

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

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」の「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」をクリック
「円形ゲージ」タブから「Fuelmeter」をクリック

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

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

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

「円形ゲージ」タブから「Auto Clamshell」をクリック
「円形ゲージ」タブから「Auto Clamshell」をクリック
ゲージ「Fuelmeter」の中にゲージ「Auto Clamshell」が組み込まれた複合ゲージが作成される
ゲージ「Fuelmeter」の中にゲージ「Auto Clamshell」が組み込まれた複合ゲージが作成される

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

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

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

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

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

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

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

「Auto Clamshell」ゲージが小さくなりコンテナの左下に収まる
「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
Width 3
ポインタの形状と色が変更された
ポインタの形状と色が変更された

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

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

文字(Textプロパティ) プロパティ 設定値
F Color RoyalBlue
E Color DarkRed
CoverShapesコレクションエディタで「Caption」オブジェクトのColorプロパティの値を設定する
CoverShapesコレクションエディタで「Caption」オブジェクトのColorプロパティの値を設定する

 ③ 続いて、ポインタの根元にあるキャップも変えます。これは、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イベントハンドラで、ゲージの現在値を減らす処理を組み込みます。

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
C#
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コントロールは、テンプレート機能を上手に使えば、カスタムゲージの作成作業もかなり楽になりますから、データのビジュアル化にもってこいのコントロールと言えるでしょう。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5