SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

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

ゲージを入力コントロールとして機能させる処理

 ゲージが完成したら、このゲージを入力コントロールとして作動できるように処理を組み込みます。

 前節「C1Gaugeコントロールのインタラクティブ性とイベント」でも説明したように、ユーザーがゲージのポインタを動かそうとした時のマウス座標を取得し、その位置にポインタを移動させると、いかにもマウスでポインタを動かしたように見えます。この処理をItemMouseMoveイベントハンドラに組み込むことで、C1Gaugeコントロールを入力コントロールとして使うことができるようになります。

 そして、ゲージの現在値はValueプロパティに格納されていますから、このプロパティから取り出してRGB値を作成し、テキストのForeColorプロパティに反映させれば、ゲージのポインタを動かすたびに、テキストも文字色が変化していきます。

 (1)最初に、C1Gauge名前空間にアクセスできるようにし、3つのメンバ変数を宣言します。

Visual Basic
Imports C1.Win.C1Gauge

Public Class Form1

    Private r, g, b As Integer
C#
using C1.Win.C1Gauge;
namespace GaugeInput_Winform_cs
{
    public partial class Form1 : Form
    {
        private int r, g, b;

 (2)次に、テキストの文字色を変えるプロシージャ(メソッド)を作成します。このプロシージャ(メソッド)では各ゲージの値から、ColorクラスのFromArgbメソッドを使用してRGB値を作成し、テキストの文字色を変える処理を実行します。

Visual Basic
Sub textrepaint()
    Label1.ForeColor = Color.FromArgb(255, r, g, b)
End Sub
C#
private void textrepaint()
{
    label1.ForeColor = Color.FromArgb(255, r, g, b);
}

 (3)各ゲージのItemMouseMoveイベントハンドラでは、マウスの座標からPointerオブジェクトを作成し、イベントが発生したゲージのポインタ座標に代入します。

Visual Basic
If (e.Button And MouseButtons.Left) = MouseButtons.Left Then
   Dim p As C1GaugePointer = e.Gauge.Pointer
   p.Value = p.GetValueAt(e.X, e.Y)
End If
C#
if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
{
   C1GaugePointer p = e.Gauge.Pointer;
   p.Value = p.GetValueAt(e.X, e.Y);
}

 (4)また、ゲージのポインタが動くと、Valueプロパティの値もその位置の値に更新されますので、これをゲージの上のLabelコントロールとメンバ変数rgbに代入します。このときValueプロパティがDouble型になっているので、値を整数に変換してから使用します。そして、テキストの文字色を更新するプロシージャ(メソッド)を呼び出して実行します。

Visual Basic
Label2.Text = Convert.ToInt16(C1RadialGauge1.Value)
b = Convert.ToInt16(C1RadialGauge1.Value)
textrepaint()
C#
label2.Text = Convert.ToInt16(c1RadialGauge1.Value).ToString();
b = Convert.ToInt16(c1RadialGauge1.Value);
textrepaint();

 以上で出来上がりです。これで、ゲージのポインタの上でマウスを動かすとポインタも追従して動き、その時の値がLabelコントロールで表示されるとともにテキストの文字色が変化します。

アプリケーションの実行結果
アプリケーションの実行結果
Visual Basic
Imports C1.Win.C1Gauge

Public Class Form1

    Private r, g, b As Integer
    Private Sub C1RadialGauge1_ItemMouseMove(sender As System.Object, e As C1.Win.C1Gauge.ItemMouseEventArgs) Handles C1RadialGauge1.ItemMouseMove
        If (e.Button And MouseButtons.Left) = MouseButtons.Left Then
            Dim p As C1GaugePointer = e.Gauge.Pointer
            p.Value = p.GetValueAt(e.X, e.Y)
        End If

        Label2.Text = Convert.ToInt16(C1RadialGauge1.Value)
        b = Convert.ToInt16(C1RadialGauge1.Value)
        textrepaint()
    End Sub

    Private Sub C1RadialGauge2_ItemMouseMove(sender As System.Object, e As C1.Win.C1Gauge.ItemMouseEventArgs) Handles C1RadialGauge2.ItemMouseMove
        If (e.Button And MouseButtons.Left) = MouseButtons.Left Then
            Dim p As C1GaugePointer = e.Gauge.Pointer
            p.Value = p.GetValueAt(e.X, e.Y)
        End If

        Label3.Text = Convert.ToInt16(C1RadialGauge2.Value)
        r = Convert.ToInt16(C1RadialGauge2.Value)
        textrepaint()
    End Sub


    Private Sub C1RadialGauge3_ItemMouseMove(sender As System.Object, e As C1.Win.C1Gauge.ItemMouseEventArgs) Handles C1RadialGauge3.ItemMouseMove
        If (e.Button And MouseButtons.Left) = MouseButtons.Left Then
            Dim p As C1GaugePointer = e.Gauge.Pointer
            p.Value = p.GetValueAt(e.X, e.Y)
        End If

        Label4.Text = Convert.ToInt16(C1RadialGauge3.Value)
        g = Convert.ToInt16(C1RadialGauge3.Value)
        textrepaint()

    End Sub

    Sub textrepaint()
        Label1.ForeColor = Color.FromArgb(255, r, g, b)

    End Sub

End Class
C#
using C1.Win.C1Gauge;
namespace GaugeInput_Winform_cs
{
    public partial class Form1 : Form
    {
        private int r, g, b;
        public Form1()
        {
            InitializeComponent();
        }

        private void c1RadialGauge1_ItemMouseMove(object sender, C1.Win.C1Gauge.ItemMouseEventArgs e)
        {
            if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
            {
                C1GaugePointer p = e.Gauge.Pointer;
                p.Value = p.GetValueAt(e.X, e.Y);
            }

            label2.Text = Convert.ToInt16(c1RadialGauge1.Value).ToString();
            b = Convert.ToInt16(c1RadialGauge1.Value);
            textrepaint();
        }

        private void c1RadialGauge2_ItemMouseMove(object sender, C1.Win.C1Gauge.ItemMouseEventArgs e)
        {
            if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
            {
                C1GaugePointer p = e.Gauge.Pointer;
                p.Value = p.GetValueAt(e.X, e.Y);
            }

            label3.Text = Convert.ToInt16(c1RadialGauge2.Value).ToString();
            r = Convert.ToInt16(c1RadialGauge2.Value);
            textrepaint();
        }

        private void c1RadialGauge3_ItemMouseMove(object sender, C1.Win.C1Gauge.ItemMouseEventArgs e)
        {
            if ((e.Button & MouseButtons.Left) == MouseButtons.Left)
            {
                C1GaugePointer p = e.Gauge.Pointer;
                p.Value = p.GetValueAt(e.X, e.Y);
            }

            label4.Text = Convert.ToInt16(c1RadialGauge3.Value).ToString();
            g = Convert.ToInt16(c1RadialGauge3.Value);
            textrepaint();
        }

        private void textrepaint()
        {
            label1.ForeColor = Color.FromArgb(255, r, g, b);
        }
    }
}

まとめ

 データ入力によく使われるスライダーやNumericUpDownコントロールは、今や当たり前すぎて新鮮味に欠けますよね。このC1Gaugeコントロールを入力コントロールとして使用すれば、独自のデザインの入力インターフェースが作成できるので、アプリケーションのデザイン性も高くなり、またユーザーにとっても入力が楽しくなるような効果も生まれてくるのではないでしょうか。

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング