【C# WinForms】画像ビューワー作成チュートリアル (ファイル選択・一覧表示)

2025年10月8日2025年10月10日

Windows Formsを使ったGUIアプリケーション開発に慣れるには、実際に動くものを作ってみるのが一番です。

この記事では、画像ファイルを選択して表示する、シンプルな「画像ビューワー」の作成手順を詳しく解説します。OpenFileDialogやFolderBrowserDialogといった、ファイルシステムと連携するコントロールの使い方も学んでいきましょう。

作成する主な機能

特定の画像ファイルを1つだけ選んで表示する機能
フォルダを選択し、その中に含まれる画像ファイルを一覧表示する機能

Part 1: 画面の準備

まず、Visual Studioで「Windows Formsアプリ (.NET Framework)」の新規プロジェクトを作成します。

次に、フォームデザイナーを使い、ツールボックスから以下のコントロールを配置して画面をデザインします。

PictureBox: 画像を表示するメインの領域です。Nameを「mainPictureBox」とし、DockプロパティをFillにするとウィンドウサイズに合わせて伸縮するので便利です。
Button: 「ファイルを開く」ボタンです。Nameを「openFileButton」、Textを「ファイルを開く」とします。
Button: 「フォルダを開く」ボタンです。Nameを「openFolderButton」、Textを「フォルダを開く」とします。
ListBox: フォルダ内の画像ファイル一覧を表示します。Nameを「imageListBox」とします。
OpenFileDialog: ツールボックスからフォームにドラッグしても画面には表示されません。フォーム下部のコンポーネント領域に配置されます。Nameは「openFileDialog」のままでOKです。
FolderBrowserDialog: OpenFileDialogと同様に、フォーム下部に配置されます。Nameは「folderBrowserDialog」のままでOKです。

Part 2: 機能1：単一の画像ファイルを開く

「ファイルを開く」ボタンをクリックしたときに、画像ファイル選択ダイアログを表示し、選ばれた画像を表示する機能を実装します。

Step 1: ボタンのクリックイベントを作成

デザイン画面で、「ファイルを開く」ボタンをダブルクリックし、openFileButton_Clickイベントハンドラーをコード内に自動生成します。

Step 2: ダイアログの表示と画像の読み込み

生成されたメソッド内に、以下のコードを記述します。

private void openFileButton_Click(object sender, EventArgs e)
{
    // 1. ダイアログのタイトルとフィルターを設定
    openFileDialog.Title = "画像ファイルを選択してください";
    openFileDialog.Filter = "画像ファイル (*.jpg;*.png;*.bmp;*.gif)|*.jpg;*.png;*.bmp;*.gif|すべてのファイル (*.*)|*.*";

    // 2. ダイアログを表示し、ユーザーが「開く」ボタンを押したか確認
    if (openFileDialog.ShowDialog() == DialogResult.OK)
    {
        // 3. 選択されたファイルをPictureBoxに表示
        string filePath = openFileDialog.FileName;
        mainPictureBox.Image = new Bitmap(filePath);

        // 画像がPictureBoxのサイズに合うように調整
        mainPictureBox.SizeMode = PictureBoxSizeMode.Zoom;
    }
}

Filterプロパティでは、|で区切って「表示名|パターン」を指定することで、表示するファイルの種類を絞り込めます。
ユーザーがファイルを選択すると、openFileDialog.FileNameにそのファイルのフルパスが格納されます。
new Bitmap(filePath)で、指定されたパスから画像を読み込んでいます。

Part 3: 機能2：フォルダ内の画像一覧を表示する

次に、「フォルダを開く」ボタンを押して、指定したフォルダ内の画像ファイルをListBoxに一覧表示し、リストから選択した画像を表示する機能を実装します。

Step 1: 「フォルダを開く」ボタンのイベントを作成

デザイン画面で、「フォルダを開く」ボタンをダブルクリックし、openFolderButton_Clickイベントハンドラーを作成します。

Step 2: フォルダ内の画像ファイルを検索してListBoxに追加

メソッド内に、フォルダを選択し、その中の画像ファイル（.jpg, .pngなど）だけをリストアップするコードを記述します。

private void openFolderButton_Click(object sender, EventArgs e)
{
    // 1. フォルダ選択ダイアログを表示
    if (folderBrowserDialog.ShowDialog() == DialogResult.OK)
    {
        // 2. 選択されたフォルダのパスを取得
        string folderPath = folderBrowserDialog.SelectedPath;

        // 3. ListBoxをクリア
        imageListBox.Items.Clear();

        // 4. フォルダ内の全ファイルを取得
        string[] allFiles = System.IO.Directory.GetFiles(folderPath);
        
        // 5. 画像ファイルだけを判定してListBoxに追加
        foreach (string file in allFiles)
        {
            // ファイルの拡張子を小文字で取得
            string extension = System.IO.Path.GetExtension(file).ToLower();

            if (extension == ".jpg" || extension == ".png" || extension == ".bmp" || extension == ".gif")
            {
                imageListBox.Items.Add(file);
            }
        }
    }
}

Step 3: ListBoxで選択された画像を表示する

最後に、ListBoxの項目がクリックされたときに、その画像をPictureBoxに表示する処理を追加します。

デザイン画面でimageListBoxを選択します。
プロパティウィンドウの上部にある**雷マーク（イベント）**のアイコンをクリックします。
イベントの一覧から「SelectedIndexChanged」をダブルクリックして、イベントハンドラーを作成します。
生成されたメソッド内に、以下のコードを記述します。

private void imageListBox_SelectedIndexChanged(object sender, EventArgs e)
{
    // ListBoxで項目が選択されているか確認
    if (imageListBox.SelectedItem != null)
    {
        // 選択された項目のファイルパスを取得
        string filePath = imageListBox.SelectedItem.ToString();

        // PictureBoxに画像を表示
        mainPictureBox.Image = new Bitmap(filePath);
        mainPictureBox.SizeMode = PictureBoxSizeMode.Zoom;
    }
}

これで、リストの項目をクリックするたびに、対応する画像が表示されるようになります。