【C#】WinFormsアプリケーションでのセルグリッド上の動的PictureBoxの実装

2024年8月14日2024年8月19日

この資料は、WinFormsアプリケーションを使用してセルグリッド上で動的に動くPictureBoxを作成する方法を解説します。基本的なC#の知識を持つ方を対象としており、初学者にも理解しやすい内容となっています。

1. 参考

1. 目的

この技術資料の目的は、WinFormsアプリケーションで、ユーザーのマウスの動きに応じてPictureBoxがセルグリッド内を動く仕組みを実装する手順を学ぶことです。

2. 必要な設定と準備

開発環境: Visual Studio（バージョンは問いません）
プロジェクトの種類: Windows Forms App (.NET Framework)
プロジェクト名はGridPictureMoverとしておきましょう
画像ファイル: PictureBoxに表示する画像ファイル（例: your_image.png）

3. 画像リソースの設定手順

画像ファイルの準備:
- 使用したい画像ファイル（例: your_image.png）を用意します。
プロジェクトに画像を追加:
- Visual Studioでプロジェクトを開きます。
- ソリューションエクスプローラーでプロジェクト名を右クリックし、[プロパティ] を選択します。
- プロジェクトのプロパティウィンドウが開いたら、左側のメニューから [リソース] タブを選択します。
- [リソース] タブが表示されたら、上部のドロップダウンメニューから [画像] を選択します。
- [追加] ボタンをクリックし、[既存ファイルの追加] を選択して、先ほど用意した画像ファイルを追加します。
リソース名の確認:
- 画像がプロジェクトに追加されると、自動的にリソース名が付与されます。この名前が「YourImageName」に該当します。
- 追加された画像は、Properties.Resources 名前空間の一部としてアクセスできるようになります。
- 例えば、your_image.png という名前で画像を追加した場合、コードでは Properties.Resources.your_image という名前で参照します。
コードに適用:
- Properties.Resources.YourImageName の部分を、リソースに追加した画像の名前に置き換えます。
- 例: 画像ファイル名が your_image.png で、リソース名が your_image になった場合、コードは次のようになります。

pictureBox1 = new PictureBox
{
    Size = new Size(CellSize, CellSize),
    BackColor = Color.Transparent,
    Image = Properties.Resources.your_image, // ここをリソース名に置き換え
    SizeMode = PictureBoxSizeMode.StretchImage
};

4. コードの全体構造

以下は、完全なコード例です。

using System;
using System.Drawing;
using System.Windows.Forms;

namespace CellPosition
{
    public partial class Form1 : Form
    {
        private const int CellSize = 50; // セルのサイズを定数として定義
        private const int NumCells = 10; // グリッドの行と列の数を定数として定義
        private PictureBox pictureBox1;

        public Form1()
        {
            InitializeComponent();
            InitializePictureBox();
            this.MouseMove += Form1_MouseMove;
            this.Paint += Form1_Paint;
        }

        // PictureBoxの初期化メソッド
        private void InitializePictureBox()
        {
            pictureBox1 = new PictureBox
            {
                Size = new Size(CellSize, CellSize),
                BackColor = Color.Transparent,
                Image = Properties.Resources.YourImageName, // 画像リソース名を指定
                SizeMode = PictureBoxSizeMode.StretchImage
            };

            this.Controls.Add(pictureBox1);
        }

        // マウスの動きに応じてPictureBoxを移動させる
        private void Form1_MouseMove(object sender, MouseEventArgs e)
        {
            Point newPosition = GetCellAlignedPosition(e.Location);
            pictureBox1.Location = newPosition;
        }

        // セルの中央に合わせた位置を計算するメソッド
        private Point GetCellAlignedPosition(Point mousePosition)
        {
            int x = (mousePosition.X / CellSize) * CellSize + (CellSize - pictureBox1.Width) / 2;
            int y = (mousePosition.Y / CellSize) * CellSize + (CellSize - pictureBox1.Height) / 2;
            return new Point(x, y);
        }

        // フォームのペイントイベントでグリッドを描画
        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            DrawGrid(e.Graphics);
        }

        // グリッドを描画するメソッド
        private void DrawGrid(Graphics graphics)
        {
            using (Pen pen = new Pen(Color.Black))
            {
                for (int i = 0; i <= NumCells; i++)
                {
                    graphics.DrawLine(pen, 0, i * CellSize, NumCells * CellSize, i * CellSize); // 水平線
                    graphics.DrawLine(pen, i * CellSize, 0, i * CellSize, NumCells * CellSize); // 垂直線
                }
            }
        }
    }
}