【XamarinForms】 XAMLのみで画像を角丸マスクする方法

XAMLのみで画像をマスク

オッス！オラ、ザマリンF村の余助！

画像を角丸でマスクして、村のみんなを驚かせたいべ！

んだも、カスタムレンダラーとかいう難しいコードは書けんべ。

けど、こんなオラにもできただよ。

Frame様に祈りを捧げるだけで、できただよ。

角丸マスクにはFrameを使うだよ！　

簡単だべ。Frame様に２つの祈りを捧げるだけだべ。

・IsClippedToBounds = True

・Padding = "0"

完成例(XAML)

<Frame IsClippedToBounds="True" CornerRadius="50" Padding="0">
    <Image Aspect="AspectFill" Source="img-1.jpg" />
</Frame>

順を追って設定

手順1/3 ---「CornerRadius」のみ追加

<Frame CornerRadius="50" >

＜結果＝☓＞

• マスクされとらん。
• Frame特有のドロップシャドウ様がおわす。
• FrameデフォルトのPadding値「２０」様がおわす。

手順2/3 ---「Padding」を追加

<Frame CornerRadius="50" Padding="0">

＜結果＝☓＞

• 写真の角が境界をはみでとるべ。
• Frame特有のドロップシャドウ様がまだおわす。

手順3/3 ---「IsClippedToBounds」を追加

<Frame IsClippedToBounds="True" CornerRadius="50" Padding="0">

<結果＝OK>

祈りがとどき、きれいに角丸でマスクされただよ！

（ドロップシャドウ様は天に戻られたべ）

応用例

1. 丸でマスク

<Frame
    WidthRequest="200"
    HeightRequest="200"
    CornerRadius="100"
    IsClippedToBounds="True"
    Padding="0"
    VerticalOptions="Center"
    HorizontalOptions="Center" >
    <Image Aspect="AspectFill" Source="img1.jpg" />
</Frame>

2. バーコードスキャン風

中でGridを使ってバーコードスキャン風に。

<Frame
    WidthRequest="300"
    HeightRequest="200"
    CornerRadius="20"
    IsClippedToBounds="True"
    Padding="0"
    VerticalOptions="Center"
    HorizontalOptions="Center" >
    <Grid>
        <Image Aspect="AspectFill" Source="img1.jpg" />
        <BoxView
            BackgroundColor="white"
            HeightRequest="5"
            VerticalOptions="Center"
            HorizontalOptions="FillAndExpand"
            Opacity="0.4" />
        <Label
            Text="Barcode"
            FontSize="20"
            HorizontalOptions="End"
            VerticalOptions="Center"
            Margin="0,0,10,25"
            TextColor="white"
            Opacity="0.5" />
    </Grid>
</Frame>

以上だべ

メモ：環境
.NET Standard 2.0
Xamarin.Forms 4.2
IDE: VisualStudio For Mac 8.2.4