オノデラの研究日記 in わんくま

　ユーザーコントロールを使用すると、既存のコントロールを組み合わせて新しいコントロールを作成することができます。今回作成するサンプルは TrackBar で色を調節して、イベントによって色を取得するというコントロールを作りたいと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　その前にほかの２つの 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 に値を設定した場合、値変更イベントが３回発生してしまうのですが、今回その対処は行いません。（サンプルでも set は使わないので）

イベントを取得する

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

　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;
}

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

サンプルプロジェクト

• 2008-07-06_windows_mobile_createusercontrol.zip