SHOEISHA iD

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

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

ComponentZine(ComponentOne)

ゲージ型入力コントロールを持った.NETアプリケーションの作成

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

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

アプリケーションの作成(1)

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

 作成するアプリケーションは、3つのオプション円形ゲージを使用してRGB値をそれぞれ入力してもらい、その値から色情報を作成してテキストの文字色を変更します。使用するアプリケーションはC1Gauge、Labelコントロールです。

フォームのデザイン
フォームのデザイン

GUIの作成

 今回はテンプレートから選んで作成しますので、ゲージの作成はとても簡単です。

 (1)Labelコントロールで文字色を変化させたい文字を作成します。

 (2)ツールボックスから、C1Gaugeコントロールをフォームにドラッグ&ドロップします。自動的にテンプレートが選べるゲージギャラリーが表示されます。

ゲージギャラリーが表示される
ゲージギャラリーが表示される

 (3)「円形ゲージ」のリストから「Blue Tracker」をクリックします。右側のペインに作成されるゲージが表示されます。

「Blue Tracker」をクリック
「Blue Tracker」をクリック

 (4)OKボタンをクリックするとこのゲージがフォームに配置されますので、タスクトレイから「ゲージの編集」をクリックします。

「ゲージの編集」をクリック
「ゲージの編集」をクリック

 (5)「Gaugeコレクションエディタ」が起動します。このエディタでゲージの各部位を編集できます。まず、ゲージの動作範囲を0~255に変更します。右ペインにある「Maximum」プロパティの値を255に変更します。

「Maximum」プロパティの値を255に変更
「Maximum」プロパティの値を255に変更

 (6)次にゲージのポインタ(針)の幅を太くします。これは「Pointer」をクリックして展開し、「Width」の値を「10」にします。また、「Pointer」内の「Filling」を開き、「Color」を「Cyan」に変えます。

「Pointer」内の「Filling」を開き、「Color」を「Cyan」に変える
「Pointer」内の「Filling」を開き、「Color」を「Cyan」に変える

 (7)次に「Value」プロパティの値を「0」にします。このプロパティがゲージの針の表示位置を決めるプロパティで、針は0の位置に戻ります。

 (8)OKボタンをクリックしエディタを閉じます。これで、針がブルーのグラデーションに塗りつぶされ、やや太い形状に変更されました。

ゲージの針が変更された
ゲージの針が変更された

 (9)同様の方法で、あと2つゲージを追加します。設定するプロパティ値は以下のとおりです。

C1Gauge2 ゲージタイプ:Knob
プロパティ 設定値
Maximum 255
Pointer Width 25
Filling Color Red
Value 0
C1Gauge3 ゲージタイプ:Auto Clamshell
プロパティ 設定値
Maximum 255
Pointer Width 10
Filling Color Lime
Value 0

 (10)これで3つのゲージが出来上がりました。

完成した3つのゲージ
完成した3つのゲージ

 (11)ゲージの外観ができたので、ユーザーの入力操作処理用のイベントハンドラを作成します。まず、ゲージの内側をクリックし、プロパティウィンドウのオブジェクトリストに「C1RadialGauge」オブジェクトを表示させます。

ゲージの内側をクリックし
ゲージの内側をクリックし
「C1RadialGauge」オブジェクトを表示させる
「C1RadialGauge」オブジェクトを表示させる

 (12)この状態で、イベントリストからItemMouseMoveイベントをダブルクリックしてイベントハンドラを作成します。

ItemMouseMoveイベントハンドラを作成する
ItemMouseMoveイベントハンドラを作成する

 このイベントハンドラを3つのゲージそれぞれに作成します。C1GaugeコントロールのItemMouseMoveイベントハンドラではないので、間違えないようにしてください。

 (13)最後に、ゲージの現在値を表示するLabelコントロールを作成して完成です。

完成したフォームデザイン
完成したフォームデザイン

次のページ
アプリケーションの作成(2)

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング