Xamarin.Forms の画像レイアウトを確認する
Xamarin.Formsで画像を表示する場合のレイアウトについて確認しました。
サンプルはこちら
Xamarin.Formsで画像を表示するには、2点設定する必要があります。
- 画像の表示アスペクトを設定する
- 表示領域を設定する
画像の表示アスペクトを設定する
アスペクトには3つの種類があります。
- AspectFit
- AspectFill
- Fill
AspectFit
アスペクトを維持したまま、表示領域にきっちり収まるサイズで表示します。 表示領域が余る場合は空白スペースになります。
AspectFill
アスペクトを維持したまま、表示領域全体を画像で満たすように表示します。 画像と表示領域のサイズによっては、画像が切れて表示されます。
Fill
アスペクトを無視し、表示領域全体を満たすように表示します。
画像の表示領域を設定する
Xamarin.Formsのレイアウトを使用して、画像の表示領域を決めます。 http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/
*StackLayoutやGridでレイアウトのサイズを指定しなかった場合、 画像そのままのサイズで画像が表示されます。
画像をそのまま表示する
Xamarin.Forms でサイズを指定せずに画像を表示する
サイズの指定を行わない場合、アスペクトの設定に関わらず、 どれも同じに表示になることがわかります。
サイズを変更してAspect設定の違いを確認する
全体のレイアウトを横幅いっぱいにするようにしました。 表示領域を設定した場合、アスペクトの設定による表示の違いが生じることがわかります。 今回はレイアウトの配置設定を変更し、画面幅いっぱいに表示するようにしています。
配置設定について
配置設定は"LayoutOptions"を使用します。 "LayoutOptions"には8つのタイプがあります。
- Start
- Center
- End
- Fill
- StartAndExpand
- CenterAndExpand
- EndAndExpand
- FillAndExpand
Expandがついているものに関しては画面いっぱいの表示になりそうな気がしますが、 実際はしてくれません。 画面いっぱいの表示になるのは"Fill"と"FillAndExpand"のみです。 注意してください。 設定の仕方が悪いだけなのでしょうか?