WPFで画像表示時に例外エラー

Question

###前提・実現したいこと
WPFで画像閲覧ソフトを作成しています。
ListBox + UniformGridを使用し、指定された行・列数で分割し一覧そこに画像を順番に表示するものです。

###発生している問題・エラーメッセージ

「進む」ボタンを押すことにより、指定数分シフトして再表示しようとすると、
ImageConverterクラスの
var bmp = new WriteableBitmap(decoder.Frames[0]);で

System.Runtime.InteropServices.COMException が発生しました。
  ErrorCode=-2003304445
  HResult=-2003304445
  Message=HRESULT からの例外:0x88980003
  Source=PresentationCore
  StackTrace:
       場所 System.Windows.Media.Imaging.WriteableBitmap.InitFromBitmapSource(BitmapSource source)

例外を無視してそのまま進めると、
var decoder = BitmapDecoder.Createメソッドのとこで、

System.OutOfMemoryException が発生しました。
  HResult=-2147024882
  Message=プログラムの実行を続行するための十分なメモリがありませんでした。
  Source=PresentationCore
  StackTrace:
       場所 System.Windows.Media.Imaging.BitmapSource.CreateCachedBitmap(BitmapFrame frame, BitmapSourceSafeMILHandle wicSource, BitmapCreateOptions createOptions, BitmapCacheOption cacheOption, BitmapPalette palette)
  InnerException: 

が起こってしまいます。

メモリの解放がうまくいってないとは思うのですが、どこでどうしたら良いのか分からず煮詰まっています。
（根本的に考え方がおかしいのか？）
手掛かりになるようなヒントでも良いのでお知恵をお貸しください。
宜しくお願いいたします。

###該当のソースコード

<Window x:Name="window" x:Class="WpfApplication19.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		xmlns:local="clr-namespace:WpfApplication19"
		mc:Ignorable="d"
		Title="MainWindow" Height="600" Width="800">

	<Window.Resources>
		<local:ImageConverter x:Key="ImageConverter"/>
	</Window.Resources>

	<Window.DataContext>
		<local:MainWindowViewModel/>
	</Window.DataContext>

	<DockPanel>
		<Button x:Name="NextButton" DockPanel.Dock="Top" Content="進む" Click="NextButton_Click" />
		
		<ListBox x:Name="listBox" ItemsSource="{Binding DisplayFileNameList}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
			<ListBox.ItemsPanel>
				<ItemsPanelTemplate>
					<UniformGrid Rows="{Binding SelectedRow}" Columns="{Binding SelectedCol}"
								 Width="{Binding ActualWidth, ElementName=listBox, Mode=OneWay}"
								 Height="{Binding ActualHeight, ElementName=listBox, Mode=OneWay}" />
				</ItemsPanelTemplate>
			</ListBox.ItemsPanel>
			<ListBox.ItemTemplate>
				<DataTemplate>
					<Border BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
						<DockPanel>
							<TextBlock DockPanel.Dock="Bottom" Text="{Binding FileDateTIme}" />
							<Image Source="{Binding FullFileName, Converter={StaticResource ImageConverter}}" />
						</DockPanel>
					</Border>
				</DataTemplate>
			</ListBox.ItemTemplate>
		</ListBox>

	</DockPanel>
</Window>

public partial class MainWindow : Window
{
	private MainWindowViewModel _viewModel = null;
	private int startIndex = 0;

	public MainWindow()
	{
		InitializeComponent();

		_viewModel = this.DataContext as MainWindowViewModel;
		string pathName = @"E:\ImageFolder";
		foreach (string f in Directory.EnumerateFiles(pathName, "*.jpg", SearchOption.TopDirectoryOnly))
		{
			_viewModel.FileNameList.Add(new ImageFileInfo()
			{
				FullFileName = f,
				FileDateTIme = File.GetLastAccessTime(f)
			});
		}
		_viewModel.SetDisplayList(startIndex);
	}

	private void NextButton_Click(object sender, RoutedEventArgs e)
	{
		_viewModel.SetDisplayList(++startIndex);
	}
}

public class MainWindowViewModel : INotifyPropertyChanged
{
	public event PropertyChangedEventHandler PropertyChanged;
	protected virtual void RaisePropertyChanged([CallerMemberName]string propertyName = null)
	{
		if (PropertyChanged != null)
			PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
	}

	public int SelectedRow { get { return 5; } }
	public int SelectedCol { get { return 5; } }

	private List<ImageFileInfo> _fileNameList = new List<ImageFileInfo>();
	public List<ImageFileInfo> FileNameList
	{
		get { return _fileNameList; }
		set
		{
			_fileNameList = value;
			RaisePropertyChanged();
		}
	}

	private IList<ImageFileInfo> _displayFileNameList = new ObservableCollection<ImageFileInfo>();
	public IList<ImageFileInfo> DisplayFileNameList
	{
		get { return _displayFileNameList; }
		set
		{
			_displayFileNameList = value;
			RaisePropertyChanged();
		}
	}

	public void SetDisplayList(int startIndex)
	{
		_displayFileNameList.Clear();
		int max = startIndex + SelectedCol * SelectedRow;

		for(int i=startIndex; i<max; i++)
		{
			DisplayFileNameList.Add(FileNameList.ElementAtOrDefault(i));
		}
	}
}

public class ImageFileInfo
{
	public string FullFileName { get; set; }
	public DateTime FileDateTIme { get; set; }
}

public class ImageConverter : IValueConverter
{
	public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
	{
		var path = (string)value;

		try
		{
			using (var fs = new FileStream(path, FileMode.Open))
			{
				var decoder = BitmapDecoder.Create(
					fs,
					BitmapCreateOptions.None,
					BitmapCacheOption.OnLoad);
				var bmp = new WriteableBitmap(decoder.Frames[0]);
				bmp.Freeze();
				return bmp;
			}
		}
		catch (Exception ex)
		{
			Console.WriteLine(ex.Message);
			return null;
		}
	}

	public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
	{
		throw new NotImplementedException();
	}
}

###補足情報(言語/FW/ツール等のバージョンなど)
Visual Studio 2015
C# WPF
.NET Framework 4.5.2

Comments

[himakuma]

型を指定せずにvarを使用しているのはなぜですか？

[himakuma]

ファイルサイズ、ファイル数を教えてください

[lain]

varを使っているのは、冗長なコードになるので簡略化のためです。いま私がテストで使用しているデータのファイル数は2000件ファイルサイズは１M前後です。

[himakuma]

ishi9さんが回答していますが、一括でファイルをロードしている為、単純に2000*1MB＝2Ｇ以上のメモリを使用していると思われます。表示ページ以外の画像はロードしない方がよいです。進むでロードする感じです。

[lain]

ishi9様の返答でも書きましたが、ListBoxにバインドしているのは、DisplayFileNameListプロパティになります。このプロパティには表示件数のみを格納するようにしています。

[himakuma]

今すぐに試せる状態にないので、確認なのですが、バインドしたListBoxの値はクリアしている処理はどこですか？startIndexを最大件数までカウントアップして、表示を終了したオブジェクトを破棄していないように見えます。

[lain]

himakuma様 ListBoxにバインドしているコレクションはMainWindowViewModel.SetDisplayList内でしています。このコレクションはファイル名と日時を格納しているだけなので、解放できてなくてもメモリーを圧迫していないと思っています。ImageConverter内でWriteableBitmapに展開しているところが怪しそうなのですが、どうやってアクセスすれば良いのか分からない状態です。（出来れば回答欄に回答お願いしてもよろしいですか？ここは質問に対する修正依頼欄ですので）

Answer 1

本番の方にフィードバックさせて動作確認とかをしていたので、遅くなりました。

根本解決には至ってはいないのですが、下記のようにコンバーターを変更する事により
メモリーのオーバーフローは起こりにくくなりました。
（本番の方では3×3より小さい区分けを使用し、5×5はレアケースという事と、
画像もフルHD(1920×1080)がメインということなので）
なので、ここで解決済みとさせていただきます。
(将来デジカメの高解像度化や4K、8Kカメラ等の普及が怖いですが...)

WriteableBitmapがバッファを画像2枚分とるということが分かったので使わないようにしました。

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
	var path = (string)value;
	bool isFailed = false;
	BitmapImage bmpImage = null;
	using (var fs = File.OpenRead(path))
	{
		bmpImage = new BitmapImage();
		bmpImage.DownloadFailed += (s, e) => isFailed = true;
		bmpImage.DecodeFailed += (s, e) => isFailed = true;
		bmpImage.BeginInit();
		bmpImage.CacheOption = BitmapCacheOption.OnLoad;
		bmpImage.StreamSource = fs;
		bmpImage.EndInit();
		bmpImage.Freeze();
	}

	if(isFailed)
	{
		GC.Collect();
		return new BitmapImage(new Uri(@"D:\error.png", UriKind.RelativeOrAbsolute));
	}
	else
	{
		return bmpImage;
	}
}

回答を頂いた、ishi9様、himakuma様ありがとうございました。

Answer 2

回答遅くなりました。自分も以前同様の画面を作成したことがあります。
質問のコードだとメモリが２ＧＢ超えたりしますね。。。

マウスホイール等で拡大縮小を行うということなので、
画像表示部分はUserControlを作成するのが良いと思います。
DependencyPropertyを使用すればバインドも可能です。
BitmapDecoderを使用して、縮小状態で表示させることで、メモリ容量を節約できると思います。
気になるほどでもないかも知れませんが、表示用のファイルの読込処理は重くなります。

Comments

[lain]

回答ありがとうございます。

質問で書いてあるコードは省略のため Imageを直接テンプレートの中に置いてますが、
本番の方は拡大・縮小以外にも機能が付加されてますのでUserControl化してあります。

どちらにしてもオリジナルサイズでの画像展開には無理がありそうなのですね。
なので、例外発生時に代替文字(画像)を表示するようにしようと思います。

Answer 3

表示範囲外に出たら開放する処理を入れないと溜まっていく一方だと思いますよ。
WPFの処理にはあまり明るくないので的確なアドバイスはできませんが、
私はこの手のアプリを作る場合は、基本的に同時に表示される最大の数分以上のオブジェクトは持ちません。
そのオブジェクトの中身を入れ替えれたり、コントロールへの割り当てを切り替えたりすることで表示の更新を実現します。
（まぁ実際は表示切り替えが追いつかないのでバックバッファとして倍の数のオブジェクトを持つこともありますが、それでもあくまで表示数依存です。レコードの数には影響しません）

訂正：
失礼しました。WriteableBitmapは開放不要のクラスのようですね。

Comments

[lain]

私も、表示されている分だけを保持するようにしているつもりなのですが、うまくいかない状態でして。。。

実際に表示する分はSetDisplayListメソッドを使用しDisplayFileNameListプロパティに格納するようにしています。（サンプルでは5×5で25件分）

ImageConverterクラス内のWriteableBitmap使っているところ辺りが怪しいかなと思っているのですが、
WriteableBitmapクラスはIDisposableを使ってなかったりするのでどうしたものかと悩んでいます。

[ishi9]

WriteableBitmapは開放不要とはいえ、ずっと参照され続けていれば、やはり開放はされないと思います。ListBoxの中にある表示範囲外のWriteableBitmapを参照から外す処理が必要なのでは、とちょっと当てずっぽうに言ってみます。

[ishi9]

SetDisplayListあたりでListBoxItemにアクセスして明示的に中の要素にNULLを入れるとか・・・できるんですかね？すいません、また当てずっぽうです。

[lain]

データを入れ替えるタイミングでListBoxのItemCollectionの中を見たのですが、ImageFileInfoクラスのコレクションが入っているだけでした。
ImageクラスとImageSourceがどこかで紐づいていると思うのですが、それがいったい何処を辿っていけば良いのか分からない状態です。

あと、WriteableBitmapの参照の方ですが、上のコードにGC.Collectを実行するボタンを付け加え試してみたのですが、

初回起動後(25件正常に表示) GC実行 ： 690M
進むボタンクリック → 例外発生(11件正常表示、あとは歯抜け) ： 1.4G
GC実行 ： 460M
(右端の数字は使用メモリ)

進むボタンボタンを押す前と後では表示出来ている枚数が違うので差が出てると思うのですが、
GCが効いている事を見ると大きくメモリを食いそうなWriteableBitmapは再表示終了時には参照外れているのかな？と推測しています。

[ishi9]

いくらなんでも初回の２５件表示のところで690MB、
二件目（50枚やろうとしてできてない）のところで1.4Gって増えすぎな気がします。
リーク云々の前にメモリを食いつぶしている箇所があるという可能性もありそうです。
試しにConvert関数が何回実行されているか計測してみるとか・・・

[ishi9]

後、それでOutOfMemoryExceptionが出るということは２Gの制限に引っかかっているくさいですが、32bit版でビルドしているんですかね？x64ターゲットでビルドすると、ひとまず動くかもしれません。

[ishi9]

って修正欄見たら、画像データ１枚1MBもあるんですね。
それなら確かにメモリに展開したらそれくらいいきそうですね。
さすがに大きすぎるかと（多分3000x2000くらいありません？）
一度に２５枚出すなら１００×１００もあれば十分ですよね（その半分くらいでも）
事前にサムネイル用の小さい画像データを作ってそれを使うべきです。

[ishi9]

何度も何度も連投すいません。でも多分これでいけると思います。
事前に用意しないで、動的にサムネイル用の小さい画像を作るやり方です。
http://smart-pda.net/wp7/tips/imageresize_quality/

[lain]

こちらこそ、お付き合いありがとうございます。

たしかにx64ビルドだと動作しました。
が、対応OSに7の32ビット版も入っていまして。。。

画像サイズもおっしゃる通りテストで使用しているものは3072×2048です。
Bitmapに展開しても18Mなので25枚で単純計算で450Mなのでいけるかな？と思っていたのですが。
そんなに甘くなかったですね。

サンプルコードでは省略してしまっているのですが、原寸大表示や表示倍率を変更できるようにしなくてはいけないのでサムネイル方式も使えないのです。
(25分割で原寸大表示って...というツッコミは無しでお願いします)

Convertメソッドは進むボタンをクリックごとに25回呼ばれています。

まだちゃんと見れていないのですが、Convertメソッド内のWriteableBitmapを1回通るたびに40Mくらいメモリを食っているような感じがします。
これに関しては引き続き調べていきます。
ただ、ここに原因があったとして回避策をどうしたものかと。。。

[ishi9]

枠のサイズさえわかっていれば、上記サイトのやり方でサイズ調整したWriteableBitmapを作れると思いますよ。

[lain]

後だし情報ばかりで申し訳ないのです。

文書で説明が難しいのですが、
Windowsフォトビュアーのようにマウスホイールで拡大・縮小、ドラッグ＆ムーブで表示エリアの移動を実現したいのです。
フォトビュアーが１Window内に25分割して表示されている感じになります。

となると、オリジナルサイズで読み込むのが最善かな？と思っているのですが。。。

[ishi9]

なるほど。

そういう場合はサイズ変更の完了イベントで読み込み直すのが手だと思います。
その時、スムーズに移行できるようにバックバッファに読み込んでおいて完了したら交換ってするとなお良いですね。
（画像ビューワとかでよく見かけませんか？表示された時、最初は荒いけど、だんだん綺麗に表示されていくやつ。あれはこの手の事をやっています）

やってみて十分わかったと思いますが、画像データはすごい技術で恐ろしいほどに圧縮されているので、メモリに展開すると恐ろしく膨れ上がります。

せいぜい表示の倍くらいの大きさに留めておくのが無難です。

[lain]

返事遅くなってすいません。

msdnでWriteableBitmapをよく読めば、内部でバックバッファとフロントバッファを使用していると書いてありますね。
これでWriteableBitmapのインスタンス時に18MのBitmap(解像度3072×2048)を展開しようとするわけですから、メモリ消費量が40M増えるのは納得です。
また内部でGDI+使ってるみたいで、アンマネージ部のメモリ使って、.net側にはポインタを返してるので、GCも動いてくれないようです。

次の方法を使い回避するようにしました。
とりあえずテストコードとテストデータでは動いています。

```

public void SetDisplayList(int startIndex)
{
_displayFileNameList.Clear();
int max = startIndex + SelectedCol * SelectedRow;
GC.Collect();

for(int i=startIndex; i<max; i++)
{
DisplayFileNameList.Add(FileNameList.ElementAtOrDefault(i));
}
}

```

```

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var path = (string)value;

BitmapImage bmpImage = null;
using (var fs = File.OpenRead(path))
{
bmpImage = new BitmapImage();
bmpImage.BeginInit();
bmpImage.CacheOption = BitmapCacheOption.OnLoad;
bmpImage.StreamSource = fs;
bmpImage.EndInit();
}
return bmpImage;
}

```

さらに大きな解像度の画像がきた時は同じくメモリリークは起きると思うので根本解決ではないのですが。。。