【学習】WinFormsでPictureBoxに画像を表示してみよう — ファイルから画像を開く

広告

これまでの学習では、

  • テキストファイルの保存・読み込み
  • ダイアログでファイルを選ぶ（OpenFileDialog）
  • PictureBox に設計時に画像を登録する

という形でファイル操作と画像表示を学んできました。

今回は OpenFileDialog と PictureBox を使って、実行時に 画像ファイルを選んで表示する機能を追加します。

今日作るもの

開く ボタンを押すと「ファイルを開く」ダイアログが開き、選んだ画像ファイルが PictureBox に表示されます。

前提

  • 設計時に画像を登録するのチュートリアルで PictureBox の基本を学んでいること
  • ダイアログで保存・開くのチュートリアルで OpenFileDialog の使い方を学んでいること

まだの場合は、先にそちらを学習してください。

プロジェクトを開く

設計時に画像を登録するのチュートリアルで作成した ImageViewer プロジェクトを開きます。

既に PictureBox が配置されているフォームに、開くボタン とコードを追加していきます。

フォームに追加するコントロール

既存の PictureBox に加えて、次のボタンを追加します。

コントロール名前
ButtonopenButton

PictureBox の SizeMode が Zoom になっていればそのままで問題ありません。表示の見た目を確認しながら調整してください。

PictureBoxとは

PictureBox は画像を表示するためのコントロールです。

  • Image プロパティに画像を設定すると表示される
  • Image.FromFile(パス) でファイルパスから画像を取得できる
  • SizeMode で表示の仕方を変えられる（Normal / StretchImage / Zoom など）

OpenFileDialogのFilter（画像用）

ダイアログで画像ファイルだけを選べるようにするには、Filter を設定します。

openDialog.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp|すべてのファイル|*.*";

「画像ファイル|.jpg;.jpeg;.png;.bmp」は「表示名|拡張子」の形式です。複数の拡張子はセミコロンで区切ります。

SizeModeプロパティ

PictureBox の SizeMode で表示の仕方を変えられます。

値説明
Normal画像の元のサイズ（はみ出す場合あり）
StretchImagePictureBox の幅・高さに合わせて伸縮
Zoom縦横比を保ったまま表示領域に収める
CenterImage中央に配置（元のサイズ）

ボタンのイベントを登録する

openButton をダブルクリックして、イベントを作成します。

完成コード

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

namespace ImageViewer
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void openButton_Click(object sender, EventArgs e)
        {
            OpenFileDialog openDialog = new OpenFileDialog();
            openDialog.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp|すべてのファイル|*.*";
            openDialog.Title = "画像を開く";

            if (openDialog.ShowDialog() == DialogResult.OK)
            {
                pictureBox1.Image?.Dispose();
                pictureBox1.Image = Image.FromFile(openDialog.FileName);
            }
        }
    }
}

プログラムの流れ

開くボタンを押す
        ↓
OpenFileDialog を表示（画像ファイルのみ表示）
        ↓
ユーザーが画像を選んで OK
        ↓
既存の画像があれば Dispose で解放
        ↓
Image.FromFile で画像を読み込み、PictureBox に表示

重要ポイント

PictureBox は「画像を表示する」 ためのコントロールです。

  • Image.FromFile(パス) でファイルパスから画像を取得できる
  • 新しい画像を設定する前に、既存の Image を Dispose() する（メモリリーク防止）
  • Filter で画像ファイルに絞ると、ユーザーが選びやすい
  • using System.Drawing; で Image クラスが使える

これで画像ビューアの基本が完成します。

発展アイデア

PictureBox と OpenFileDialog を使うと次のようなものも作れます。

  • 画像の保存（SaveFileDialog と pictureBox1.Image.Save()）
  • クリップボードからの貼り付け（Clipboard.GetImage()）
  • ドラッグ＆ドロップで画像を読み込む
  • 画像のリサイズや回転
  • 画像の切り抜き（切り取り範囲を指定）

画像表示は写真管理アプリやビューアの基本です。

関連記事

訪問数 1 回, 今日の訪問数 1回

広告

C#,PictureBox,WindowsFormアプリ

Posted by hidepon