Grid を超える画像の描画


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

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

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

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

image

image

移動(Transform)してみると

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

image

image

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

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

Margin指定と描画領域

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

image

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

image

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

image

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

image[58]

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

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

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

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

https://www.facebook.com/video.php?v=10205701062061961&set=vb.1117381541&type=2&theater

Comments (0)

Skip to main content