ScrollViewerの中央に画像を配置2017年07月29日 22:45

ScrollViewerの中にImageを配置し、読み込んだ画像を中央になるように配置したい。

画像をScrollViewerの中央に配置

こんな感じ。画像サイズが、表示域よりも大きいときは、画像の中央部が表示されるようにする。拡大縮小にも追随させる。

手順は、こんな感じだが、うまくいかない。
1) ファイルから生成したBitmapImageのサイズに合わせて、ImageのWidthとHeightを設定
2) ImageのSourceに、生成したBitmapImageを設定
3) ScrollViewerのChangeViewメソッドに適切なオフセットを設定して呼び出し

Imageについて、WidthとHeightの設定や、Sourceの設定(サイズの自動計算が行われる)を行うと、描画エンジンの処理は非同期に行われ、3)の処理までに間に合っていない。デバッガの変数ウォッチで見てみると、ActualWidthやActualHeightが未設定のまま。

XAML定義

ではと、MSDNのドキュメントに従いつつ、ImageOpenedイベントを待ち合わせてみるが、イベントが発生しない。結局、待ち合わせる必要があるのは、SizeChangedイベント(上図では枠外)。なお、ImageのStretchプロパティは、Uniform(縦横比を維持して表示を合わせる)。

SizeChangedイベントの処理

SizeChangedイベントで、上図のImageLoadedを呼び出すことで期待する動作に。あいかわらず、ドキュメントは手強い。