Windows Mobile

概要

Tips

カスタムコントロールを追加する

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

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

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

　クリックした位置を取得できるコントロールを作成するので、「ファイル名」に「PointSetter」と入力します。(拡張子は自動で付加されます)

　設定が終わったら「追加」ボタンを押します。

　カスタムコントロールを作成すると、デザイナ画面が開きます。

　このデザイナ画面にはコントロールが置けますが、今回は使用しません。置いたとしても実際にはコードを入力しないとコントロールを配置できないので注意が必要です。

カスタムコントロール内の処理を実装する

　まず、コントロールをクリックしたときに位置を取得するために、「MouseDown」イベントを作成します。ダブルクリックで作成できます。

　CreateCustomControl クラスにマウスでクリックしたときの位置を記憶されるためのフィールドとプロパティを追加します。

/// <summary>
/// 選択座標
/// </summary>
private Point position = Point.Empty;
/// <summary>
/// 選択座標
/// </summary>
public Point Position
{
    get { return this.position; }
    set { this.position = value; }
}

　MouseDown イベントでマウスをクリックしたときの座標を記憶するようにします。また、位置が更新されるので、コントロールの再描画も行います。（ここではあえてフィールドに値をセットするのではなく、プロパティを経由してセットしています）

/// <summary>
/// マウスのボタンを押したとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PointSetter_MouseDown(object sender, MouseEventArgs e)
{
    // マウスの位置を記憶
    this.Position = new Point(e.X, e.Y);

    // 再描画
    this.Invalidate();
}

　続いて描画処理のコードを書きます。クリックした位置を赤丸で表示し、コントロールの枠を黒線で描きます。

/// <summary>
/// 描画処理
/// </summary>
/// <param name="pe"></param>
protected override void OnPaint(PaintEventArgs pe)
{
    // TODO: カスタム描画コードをここに追加します
    Graphics g = pe.Graphics;

    int ellipseRadius = 4;

    // 赤丸の描画
    using (Brush brush = new SolidBrush(Color.Red))
    {
        g.FillEllipse(brush, this.position.X - ellipseRadius,
                             this.position.Y - ellipseRadius,
                             ellipseRadius * 2,
                             ellipseRadius * 2);
    }

    // 枠の描画
    using (Pen pen = new Pen(Color.Black))
    {
        Rectangle frameRectangle = pe.ClipRectangle;
        frameRectangle.Width--;
        frameRectangle.Height--;
        g.DrawRectangle(pen, frameRectangle);
    }

    // Calling the base class OnPaint
    base.OnPaint(pe);
}

カスタムコントロールを配置する

　作成したコントロールは実際に Form に配置して確認しましょう。

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

　右のようにデザイナに配置できると思います。

　デバッグ実行をして実際にコントロールをクリックしてみると、その場所に赤丸が表示されると思います。

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

　実際にユーザーコントロールでクリックした場所に赤丸が描画されましたが、あくまでコントロールの中での話ですので、このままではあまり使い道がありません。今度はこのコントロールで位置が変化したときに、フォーム上のラベルに座標を表示できるようにしてみましょう。

　すでに位置情報は取得できるようになっていますが、クリックしたときに座標を表示させたいので、作成したコントロールにイベントを追加できるようにします。コントロールのコードに以下のコードを追加します。

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

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

　位置の値が変化したときにイベントを発生させたいので、Position プロパティの set でイベントが発生できるようにコードを修正・追加します。

/// <summary>
/// 選択座標
/// </summary>
public Point Position
{
    get { return this.position; }
    set
    {
        this.position = value;

        if (this.PositionChanged != null)
        {
            this.PositionChanged(this, new EventArgs());
        }
    }
}

イベントを取得する

　座標を表示するためのラベルを配置しておきます。

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

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

　イベントコードが追加されたら、ラベルに座標が表示されるようにします。

/// <summary>
/// 座標指定コントロールの値が変化したとき
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void pointSetter1_PositionChanged(object sender, EventArgs e)
{
    Point position = this.pointSetter1.Position;
    this.label1.Text = "(" + position.X + ", " + position.Y + ")";
}

　では実際に実行してみましょう。座標がラベルに表示されていたら成功です。

プロジェクト ダウンロード

コード

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

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

        /// <summary>
        /// 座標指定コントロールの値が変化したとき
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pointSetter1_PositionChanged(object sender, EventArgs e)
        {
            Point position = this.pointSetter1.Position;
            this.label1.Text = "(" + position.X + ", " + position.Y + ")";
        }
    }
}

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

namespace CreateCustomControl
{
    /// <summary>
    /// 座標指定コントロール
    /// </summary>
    public partial class PointSetter : Control
    {
        /// <summary>
        /// 座標の値が変化したときにイベントが発生します。
        /// </summary>
        public event EventHandler PositionChanged = null;
        
        
        /// <summary>
        /// 選択座標
        /// </summary>
        private Point position = Point.Empty;
        /// <summary>
        /// 選択座標
        /// </summary>
        public Point Position
        {
            get { return this.position; }
            set
            {
                this.position = value;

                // 座標の値変更イベント
                if (this.PositionChanged != null)
                {
                    this.PositionChanged(this, new EventArgs());
                }
            }
        }


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

        /// <summary>
        /// 描画処理
        /// </summary>
        /// <param name="pe"></param>
        protected override void OnPaint(PaintEventArgs pe)
        {
            // TODO: カスタム描画コードをここに追加します
            Graphics g = pe.Graphics;

            // 丸の半径
            int ellipseRadius = 4;

            // 赤丸の描画
            using (Brush brush = new SolidBrush(Color.Red))
            {
                g.FillEllipse(brush, this.position.X - ellipseRadius,
                                     this.position.Y - ellipseRadius,
                                     ellipseRadius * 2,
                                     ellipseRadius * 2);
            }

            // 枠の描画
            using (Pen pen = new Pen(Color.Black))
            {
                Rectangle frameRectangle = pe.ClipRectangle;
                frameRectangle.Width--;
                frameRectangle.Height--;
                g.DrawRectangle(pen, frameRectangle);
            }

            // Calling the base class OnPaint
            base.OnPaint(pe);
        }

        /// <summary>
        /// マウスのボタンを押したとき
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PointSetter_MouseDown(object sender, MouseEventArgs e)
        {
            // マウスの位置を記憶
            this.Position = new Point(e.X, e.Y);

            // 再描画
            this.Invalidate();
        }
    }
}

参考リンク

関連ページ

更新履歴