Xamarin.Formsで画像を丸く表示する2
以前に丸い画像を表示する方法としてImageCircle
というライブラリを使う方法を紹介しました.
他の方法としてFrame
を使う方法があり,今回はそれの紹介です.
Frame
にはCornerRadius
というプロパティがあり,角を丸くすることができます.
このFrame
の中にImage
を配置することで,画像の角を丸めたり,丸い画像を作ったりできます.
<Frame Padding="0" CornerRadius="35" HeightRequest="60" HorizontalOptions="Center" IsClippedToBounds="True" VerticalOptions="Start" WidthRequest="60"> <Image Aspect="AspectFill" Source="{Binding AvatarUrl}" /> </Frame>
キーになるのはIsClippedToBounds
プロパティです.
これをTrueにすることで中の要素がFrame
の枠からはみ出ないようになります.
そしてPadding
プロパティを0にして,Image
でAspect = "AspectFill"
を設定することで,Frame
内に枠の形ピッタリ余白なしで画像が表示されます.
こちらは記述量が増えてしまいますが,丸いアバター用のアイコンだけでなく,角を丸めたり応用の幅が広いです.