画面サイズに追従するWPF

WPFアプリケーションはGridレイアウトなどを使って画面レイアウト、特にサイズ変更時の画面レイアウトをコントロールできる。

しかし、複雑なオブジェクトをインポートすると、コンテナとなるGridとの関係で画像が破たんすることがある。それを防ぎたい場合はオブジェクトを絶対座標で指定する Canvas パネルを使う。Expession Design からエクスポートする場合によく用いられる。しかし、Canvas パネルはサイズの自由が利かない。どうしたものか...

...要は フラッシュのSwf をブラウザで開いた時みたいに、画面サイズに合わせてサイズは変わるけど縦横比やレイアウトは維持してほしいんだよね。という時。

そんな時には ViewBox パネルを使う。

通常、Expression Blend などでWPFプロジェクトを開くと、Windowの下にLayoutRoot(=Grid Panel) が配置されている。

で、LayoutRoot の代わりにViewBoxパルを置く。

この場合、Windowには通常１つのパネルしか置けないので LayoutRoot の代わりに ViewBoxが置き換わる。

そして、メインとなる Canvas Panel を置く。Canvas パネルはViewBoxの中に置くので、あらかじめきちんとViewBoxを選択してから（黄色い枠になってから）配置しなけばならない。さもないと、せっかくおいたViewBox の代わりにCanvasパネルが置き換えられてしまいます。

あとは、Canvasパネルを設定したいサイズに変更すればOK。サイズを変えても画面上ではサイズは変わらない。（形が変わるだけ）CanvasパネルをViewbox内内で最大表示しているためである。

これを実行すれば、画面サイズに合わせてCanvas部分もサイズは変わるがその中の状態は維持しくれる。

これでよし！