Xamarin.Formsで画像を丸く表示する2

以前に丸い画像を表示する方法としてImageCircleというライブラリを使う方法を紹介しました.

shuhelohelo.hatenablog.com

他の方法としてFrameを使う方法があり,今回はそれの紹介です.

montemagno.com

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内に枠の形ピッタリ余白なしで画像が表示されます.

こちらは記述量が増えてしまいますが,丸いアバター用のアイコンだけでなく,角を丸めたり応用の幅が広いです.