shuhelohelo’s blog

Xamarin.Forms多めです.

画像を表示させたい領域にフィットさせるための基礎知識

mattsudev.hatenablog.com

Xamarin.Formsで画像をタイル状に表示させるときに,各タイルに余白が生まれてしまうので,ちょっと調べてメモ.

上記のブログがとてもわかり易かったです.

Aspectとは縦横比のこと.

目的はこの縦横比を維持したまま,もちろん画像は切れても構わない,で表示領域を画像で満たしたい.ということです.

Imageには画像の表示のさせかたとしてAspectというプロパティがあって,ここで表示領域に対してどのように表示させるかを指定できる.

AspectFit

アスペクトを維持したまま、表示領域にきっちり収まるサイズで表示します。 表示領域が余る場合は空白スペースになります。

なるほど. 余白ができる理由がわかった.

AspectFill

アスペクトを維持したまま、表示領域全体を画像で満たすように表示します。 画像と表示領域のサイズによっては、画像が切れて表示されます。

おお,これがいいんじゃないか!?

これだ!

Fill

Aspectを無視して領域全体に表示する.横や縦に伸びる場合がある.

Xaml

                    <Grid>
                        <Image Aspect="AspectFill" Source="{Binding PhotoUri}" />
                    </Grid>

ありがとうございました.