Grid を超える画像の描画

ひょんなことから画像テロップアニメーションを作ってみることに。

その時に意外とはまりやすい、罠に陥った。

Gridよりも大きい画像を表示する

さて、以下の２つのパターンでアニメーションをした場合どうなるか？

移動（Transform）してみると

アニメーション途中の見た目の結果はこうだ。

見てわかる通り、右向きのスクロールは思った通りの動きとなるが、左向きのスクロールの場合、Page（Grid）の幅分しか描画されていない。

どうしてこうなるのか？実は問題としてはずるいのだが、ここに書かれていないMargin.Right がカギになる。描画領域は、Margin指定がある場合、Margin指定領域が描画対象範囲となる。そして指定がない場合は０として指定される。

Margin指定と描画領域

ここに、Gridを設置し、その中にGridよりも大きい画像を配置したものを用意した。ここではGridは前面にあるが、実際には背面に位置することとなる。

Margin指定がない場合、Margin＝(0,0,0,0) となる。つまり Gridの領域内だけが描画領域となる。つまり描画はこうなる。

右と下にMarginをセットする。Margin＝（0,0, -R, –B) Margin はGridの内方向に向かって正なので右と下はマイナスとなる。この場合、Margin.LEFTとMargin Topが０指定されてしまうため、画像の位置がずれる。

今度は、左と上にMarginをセットする。Margin＝(-L,-T,0,0)。右と下は0なのでGridの右下に沿った位置で切られる。こうだ。

つまり、Margin を使って表示する場合は、きちんと描画領域を確保することが大事になる。

Margin と Width/Height の関係。UIElement は WIdth / Height で大きさ指定ができる。また Margin を使っても大きさを指定できる。Marginを使えばGridのサイズ変更に対して自動的に再計算が行われる。

つまり一番最初の問題の、うまくいかない方もきちんとMargin設定を Margin=（0,0,画像幅-Grid幅、画像高さーGrid高さ）。と指定してやればきちんと表示されるはず。

ということで動画の様子はこちら。

Additional resources