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

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

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

作成する主な機能

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

目次

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に表示する処理を追加します。

  1. デザイン画面でimageListBoxを選択します。
  2. プロパティウィンドウの上部にある**雷マーク(イベント)**のアイコンをクリックします。
  3. イベントの一覧から「SelectedIndexChanged」をダブルクリックして、イベントハンドラーを作成します。
  4. 生成されたメソッド内に、以下のコードを記述します。
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;
    }
}

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

まとめ

今回は、Windows Formsで画像ビューワーを作成しました。

  • OpenFileDialog: ユーザーに単一のファイルを選択させるためのダイアログ。
  • FolderBrowserDialog: ユーザーにフォルダを選択させるためのダイアログ。
  • System.IO.Directory.GetFiles(): 指定したフォルダ内のファイル一覧を文字列の配列として取得する。
  • ListBox: 複数の項目を一覧表示し、ユーザーに選択させることができる。
  • new Bitmap(filePath)で、ファイルパスから画像を簡単に読み込める。

これらのファイル・フォルダ操作は、多くのアプリケーションで必要となる基本的な機能です。ぜひマスターして、自分だけの高機能なビューワーに改造してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私が勉強したこと、実践したこと、してることを書いているブログです。
主に資産運用について書いていたのですが、
最近はプログラミングに興味があるので、今はそればっかりです。

目次