カウンタ

ユーザーコントロールで既存のコントロールの組み合わせを作成する

ページ更新日:2008/ 7/ 6
概要
 ユーザーコントロールを使用すると、既存のコントロールを組み合わせて新しいコントロールを作成することができます。今回作成するサンプルは TrackBar で色を調節して、イベントによって色を取得するというコントロールを作りたいと思います。
ユーザーコントロールで既存のコントロールの組み合わせを作成する
動作確認バージョン
.NET Compact Framework バージョン
  • 2.0
  • 3.5
Visual Studio バージョン
  • 2008
Windows Mobile SDK バージョン
  • 5
Tips

ユーザーコントロールを追加する

新しい項目の追加 ユーザーコントロールを作るにはプロジェクトにユーザーコントロールを追加する必要があります。

 追加先のプロジェクトを右クリックして、「追加」→「新しい項目」と選択します。

新しい項目の追加ダイアログ ダイアログが開いたら、カテゴリから「Windows Forms」を選択し、テンプレートから「ユーザコントロール」を選択します。

 今回は3つのトラックバーで色を指定できるコントロールを作るので、「ColorTrackBar」という名前のコントロールを作ります。ファイル名にコントロール名を入れてください。(拡張子は自動で付加されます)

 入力が終わったら「追加」ボタンをクリックします。

作成されたコントロール するとコントロールが作成され、画面にコントロールのデザイナ画面が表示されます。

ユーザーコントロール内の処理を実装する

コントロールの背景色 作成するコントロールにもよりますが、今回のコントロールはフォームの背景色と同じにしたいので、UserControlを選択した状態で、プロパティから「BackColor」の項目を選択し、システムカラーの「Window」を選択します。

コントロールの配置と設定 UserControl に使用するコントロールを張り付けましょう。TrackBarはそれぞれRGB三つに対応します。Color構造体はRGBそれぞれ0~255の範囲で設定できるので、Maximunを255に設定します。

 現在設定している色を PictureBox に表示できるようにします。BackColor プロパティに設定するので、初期値を Black にしておきます。

 今回はユーザーコントロールの作り方を簡単に説明するので、細かい設定は各自で調整してみてください。

TrackBarの値変更イベント TrackBar を動かした時に、PictureBox の色を変えられるようにイベントを作成しましょう。TrackBar のイベントから「ValueChanged」イベントを探してダブルクリックします。

追加されたコード すると、コードに TrackBar の値変更イベントが追加されます。ここに処理を入力していきます。

他の TrackBar のイベント その前にほかの2つの TrackBar のイベントも追加しましょう。どれも同じ処理を行うので、最初に作成したイベントをセットしたほうが楽です。

 では、コードを入力しましょう。各トラックバーから値を取得して Color 構造体を作成します。その値を PictureBox の BackColor にセットするだけです。

/// <summary>
/// トラックバーの値が変更されたとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void trackBarR_ValueChanged(object sender, EventArgs e)
{
    // 各トラックバーの値から Color を作成
    Color color = Color.FromArgb(this.trackBarR.Value,
                                 this.trackBarG.Value,
                                 this.trackBarB.Value);

    // PictureBox に色をセット
    this.pictureBoxColor.BackColor = color;
}

ユーザーコントロールを配置する

作成したコントロールがツールボックスに表示される 作成したコントロールは実際に Form に配置して確認しましょう。

 コントロールを作成してビルドを行うと、ツールボックスに作成したコントロールが表示されます。これをフォームに配置します。

配置したコントロール 右のようにデザイナに配置できると思います。

コントロールの操作 デバッグ実行をして実際にトラックバーを動かしてみると、ピクチャーボックスの色が変化することがわかります。

作成したコントロールにイベントを登録できるようにする

 実際にユーザーコントロールで色は変化しましたが、あくまでコントロール内で色がわかっているだけなのであまり使い道がありません。今度はこのコントロールで色を調整したときに、フォーム上のテキストボックスのテキストの色に反映できるようにしてみましょう。

 まずは、コントロールを使用している Form から、設定されている色を取得できるようにしましょう。コントロールのコードに Color プロパティを追加します。

/// <summary>
/// 設定されている色を取得・設定します。
/// </summary>
public Color Color
{
    get
    {
        return Color.FromArgb(this.trackBarR.Value,
                                this.trackBarG.Value,
                                this.trackBarB.Value);
    }
    set
    {
        this.trackBarR.Value = value.R;
        this.trackBarG.Value = value.G;
        this.trackBarB.Value = value.B;
    }
}

 こうすることによって、Form から Color プロパティを介して色情報を取得することができます。

 色情報は取得できるようになりましたが、トラックバーを動かした時点でテキストの色を反映させたいので、作成したコントロールにイベントを追加できるようにします。コントロールのコードに以下のコードを追加します。

/// <summary>
/// 色の値が変化したときにイベントが発生します。
/// </summary>
public event EventHandler ColorChanged = null;

 本来は独自の EventHandler を定義して色情報をイベント引数で渡せるほうがいいのですが、説明の簡略化のために標準の EventHandler を使うことにします。

 さらに、トラックバーの値が変化したときに、登録されているイベントを発生させるようにコードを追加します。

/// <summary>
/// トラックバーの値が変更されたとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void trackBarR_ValueChanged(object sender, EventArgs e)
{
    // 各トラックバーの値から Color を作成
    Color color = Color.FromArgb(this.trackBarR.Value,
                                    this.trackBarG.Value,
                                    this.trackBarB.Value);

    // PictureBox に色をセット
    this.pictureBoxColor.BackColor = color;

    if (this.ColorChanged != null)
    {
        // イベントが登録されている場合は処理を行う
        this.ColorChanged(this, new EventArgs());
    }
}

※ColorTrackBar クラスの Color に値を設定した場合、値変更イベントが3回発生してしまうのですが、今回その対処は行いません。(サンプルでも set は使わないので

イベントを取得する

テキストボックスの配置 では、テスト用にテキストボックスを配置してテキストを入力しておきます。

ColorChanged イベント ColorTrackBar コントロールイベントを見てみると、先ほど追加したイベントが表示されていると思います。この項目をダブルクリックして Form にイベントを追加します。

※イベントの属性などをまだ設定していないので説明文がなく、カテゴリも「その他」になっています。

 イベントコードが追加されたら、テキストに色が反映されるように設定されるようにします。

/// <summary>
/// 色が変更されたとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void colorTrackBar1_ColorChanged(object sender, EventArgs e)
{
    // テキストボックスのテキストに色を設定する
    this.textBox1.ForeColor = this.colorTrackBar1.Color;
}

実行 では実際に実行してみましょう。色がテキストに反映されていたら成功です。

プロジェクト ダウンロード
ファイル サイズ .NET Compact Frameworkバージョン 作成日
windows_mobile_createusercontrol.zip 14.0 KB 2.0 2008/07/06
コード

MainForm.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace DerivedControl
{
    /// <summary>
    /// メインフォーム
    /// </summary>
    public partial class MainForm : Form
    {
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainForm()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 色が変更されたとき
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void colorTrackBar1_ColorChanged(object sender, EventArgs e)
        {
            // テキストボックスのテキストに色を設定する
            this.textBox1.ForeColor = this.colorTrackBar1.Color;
        }
    }
}

ColorTrackBar.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Text;
using System.Windows.Forms;

namespace DerivedControl
{
    /// <summary>
    /// カラー調整コントロール
    /// </summary>
    public partial class ColorTrackBar : UserControl
    {
        /// <summary>
        /// 色の値が変化したときにイベントが発生します。
        /// </summary>
        public event EventHandler ColorChanged = null;


        /// <summary>
        /// 設定されている色を取得・設定します。
        /// </summary>
        public Color Color
        {
            get
            {
                return Color.FromArgb(this.trackBarR.Value,
                                      this.trackBarG.Value,
                                      this.trackBarB.Value);
            }
            set
            {
                this.trackBarR.Value = value.R;
                this.trackBarG.Value = value.G;
                this.trackBarB.Value = value.B;
            }
        }


        /// <summary>
        /// コンストラクタ
        /// </summary>
        public ColorTrackBar()
        {
            InitializeComponent();
        }


        /// <summary>
        /// トラックバーの値が変更されたとき
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void trackBarR_ValueChanged(object sender, EventArgs e)
        {
            // 各トラックバーの値から Color を作成
            Color color = Color.FromArgb(this.trackBarR.Value,
                                         this.trackBarG.Value,
                                         this.trackBarB.Value);

            // PictureBox に色をセット
            this.pictureBoxColor.BackColor = color;

            if (this.ColorChanged != null)
            {
                // イベントが登録されている場合は処理を行う
                this.ColorChanged(this, new EventArgs());
            }
        }
    }
}
更新履歴
更新日時 更新内容
2008/07/06 ページ作成
広告
Copyright (C) since 2005 Yuichi Onodera (おのでら), All rights reserved.