Xamarin.Forms 顯示具有圓形遮罩 Mask 的圖片

有些時候，為了程式畫面美觀，在進行視覺設計的時候，會需要把原來正方形或者長方形的圖片，希望能夠透過一個圓形遮罩(Mask)，把圖片以圓形的方式來處理；可是，Xamarin.Forms 預設提供顯示的圖片，僅僅提供方形的圖片顯示。

參考專案

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/ImageCircleLab

加入 NuGet 套件 ImageCircle

為了要能夠做到這樣的事情，您僅需要在整個方案內的每個專案內，都加入這個 NuGet 套件Xam.Plugins.Forms.ImageCircle。不過，您需要在所有特定平台專案內的 Xamarin.Forms.Init(); 程式碼之後，加入這個程式碼 ImageCircleRenderer.Init();

Xamarin.Forms.Init();//platform specific init
ImageCircleRenderer.Init();

如何使用 ImageCircle

• 首先，需要宣告這個套件的命名空間 xmlns:LocalImage="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
• 要使用 ImageCircle 只有三個屬性與 Image 不同，可以參考底下 XAML 程式碼

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:LocalImage="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="ImageCircleLab.Views.MainPage"
             Title="MainPage">
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="{Binding Title}" />
        <Image
            Source="platformImage.jpg"
            Aspect="AspectFill"
            WidthRequest="200"
            HeightRequest="200"
            />
        <LocalImage:CircleImage
            Source="platformImage.jpg"
            Aspect="AspectFill"
            BorderColor="Green"
            BorderThickness="5"
            BackgroundColor="Transparent"
            WidthRequest="200"
            HeightRequest="200"
            />
    </StackLayout>
</ContentPage>