C# WinUI 3アプリを作っていく途中で、調べたことを忘録的に投稿します。今回はWinUI3プロジェクトで大量の画像をサムネイル表示で並べる場合の注意点です。
高解像度の画像をサムネイル配置
例えば、フォルダー内の画像ファイルをエクスプローラーの縮小版表示のように一覧で並べるような処理。
表示する画像は、高解像度で容量が大きいファイルでも小さな画像で十分な場合があります。
表示する数が10程度の場合は、それほどパフォーマンスに影響は出ないかもしれませんが、100とか1000くらいの表示数になると大量の画像データの処理に差が出ます。
実際に表示する画像が100を超えてくると、読み込みに時間がかかるケースがあります。
こんな感じで［Width］プロパティでサイズを変更できますが、この場合は［Image］コントロールに読み込んでからサイズ変更します。
<Image Name="MyImage" Width=200 Source="C:\Users\t_nak\sample.jpg" />
［DecodePixelWidth］プロパティ
［Image］クラスには［DecodePixelWidth］と［DecodePixelHeight］プロパティが用意されていて、指定すると画像を取得する際のサイズに影響します。
［DecodePixelWidth］を設定した場合には、大きな解像度のファイルでも指定された横幅で読み込まれます。（［DecodePixelHeight］は高さ）
C#コードから指定する場合には、こんな感じで指定ができます。
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.DecodePixelWidth = 200;
bitmapImage.UriSource = new Uri("C:\Users\t_nak\sample.jpg");
MyImage.Source = bitmapImage;高解像度の画像を大量に配置する場合に有効です。
まとめ
今回は、WinUI3プロジェクトで大量の画像をサムネイル表示で並べる場合のパフォーマンスを［DecodePixelWidth/DecodePixelHeight］で改善する手順を紹介しました。
画像ファイルが保存されたフォルダー内の一覧など、高解像度の画像ファイルをサムネイル表示する場合、ファイル数が多くなった場合にパフォーマンスに影響が出ます。
［DecodePixelWidth/DecodePixelHeight］で読み込む画像のサイズを指定して、画像の読み込みを効率化できます。
WinUI 3で大量の画像ファイルの表示が遅い人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。
