C#でイメージビューアーアプリを作ってみる（その参）マウスホイールで画像の切り替え

Windows10/11にはイメージビューアー「フォト」アプリがありますが。使い勝手が悪い部分もあるので、自己満足的なイメージビューアーを作ってみました。今回はフォルダー内の画像を順番に表示する機能を追加しました。

前の記事はこちら

C#でイメージビューアーアプリを作ってみる（その弐）

フォルダー内の画像を順番に表示

Windows標準の「フォト」アプリにも実装されている機能です。ファイルを表示した際に、同じフォルダー内に保存されている画像ファイルを順番に表示していく機能を追加してみます。

最初に複数の画像ファイルをフォーム上の「PictureBox」に表示できるように仕組みを追加していきます。

現状はファイルのパス（場所）をPictureBoxの［ImageLocation ］プロパティに設定して画像を表示させています。

OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = "すべてのファイル(*.*)|*.*";
if (ofd.ShowDialog() == DialogResult.OK)
{
  mainImage.ImageLocation = ofd.FileName;
}

複数の画像を表示する必要があるので、フォルダー内の画像をリストアップして順番に設定する必要があるので、配列を使って実装をしていきます。

まずは、Image型の変数を配列で準備します。

private System.Drawing.Image[]? imageList;

後は、次のような感じでPictureBoxのImageプロパティにImage型の変数を設定することでフォームに画像が表示されるようになります。

mainImage.Image = imageList[0];

コードの実装

基本的な仕組みは、これで完成です。後は実際に動くようにコードを追加していきます。

まず複数の画像を順番に表示できるようにカウンターになる変数を追加で宣言します。

private string[]? files; //複数のファイルパスを入れておく配列変数
private int current = 0; //今の順番を保存する変数
private int max = 0;  //表示する最大の画像数を保存する変数

次にファイルをドロップした際のイベントを次の様に変更します。

private void Form1_DragDrop(object sender, DragEventArgs e)
{
  //変数の初期化
  if (max > 0)
  {
    max = 0;
    current = 0;
    Array.Resize(ref files, 0);
    Array.Resize(ref imageList, 0);
  }

  foreach (String FileName in (string[])e.Data.GetData(DataFormats.FileDrop))
  {
    string filePath = FileName;
    string? directoryName = System.IO.Path.GetDirectoryName(filePath);
    if(directoryName is not null)
    {
      //ドロップしたファイルと同じフォルダー内のファイル一覧
を取得

      files = System.IO.Directory.GetFiles(directoryName).OrderBy(name => name).ToArray();
      if(files is not null)
      {
        //ファイル一覧
の画像数の配列を作成
        imageList = new System.Drawing.Image[files.Length];
        //ファイルの最大値を設定
        max = files.Length - 1;

        for (int n = 0; n < files.Length; n++)
        {
          //画像データを配列に設定
          imageList[n] = Image.FromFile(files[n]);
          if (files[n] == filePath)
          {
            //ファイルパスを配列に設定
            this.Text = Path.GetFileName(files[n]);
            mainImage.Image = imageList[n];
            current = n;
          }
        }
      }
    }
  }
}

ファイルをドロップした際に画像が表示され、フォルダー内の画像ファイルが配列に設定されます。

次に、マウスのホイールイベントで画像が送れるようにコードを追加します。

マウスのホイールイベントを追加する方法は別記事をご覧ください。

C#でマウスのホイールイベントを追加する手順

マウスのホイールイベントで、ホイールの方向（e.Delta）を検出して、PictureBoxに設定するImage型の配列を変更しています。

private void mainImage_MouseWheel(object? sender, MouseEventArgs e)
{
  //ホイールの方向を検出
  if (e.Delta > 0)
  {
    if (current > 0)
    {
      current = current - 1;
    }
  }
  else
  {
    if (current < max)
    {
      current = current + 1;
    }
  }

  if(files is not null)
    this.Text = Path.GetFileName(files[current]);

  //PictureBoxに設定するImage型配列を変更
  if (imageList is not null)
    mainImage.Image = imageList[current];
}

マウスのホイールを回すとフォルダー内の画像が順番に表示されるようになります。

とりあえず、フォトアプリのような機能を追加することができました。

まとめ

フォルダー内の画像を検出して、配列変数に設定することで「フォト」アプリのように画像を順番に表示する機能を実装することができました。

次回はフォーム上をクリックして、画像を切り替える機能を追加していきます。

簡単な物でも、自分好みのアプリケーションを作っている際中は、結構楽しい気持ちになります。

スポンサーリンク

最後までご覧いただき、ありがとうございます。