Xamarin.Forms 顯示圓形形狀

Xamarin.Forms 內似乎沒有提供橢圓或者圓型形狀的控制項可以來使用。

為此，在網路上，找到另外一篇文章，說明如何自己客製化出這樣的圓形或者橢圓形控制項。不過，因為使用了泛型的 BindableProperty.Create 方法，這個已經不被 Xamarin.Forms支援，未來隨時有可能會被移除這個方法使用；另外，實際剪下與貼上，還是會遇到一些問題，因此，根據該篇文章的內容，自行重新製作了一次。

參考文章

http://devcenter.wintellect.com/jprosise/supercharging-xamarin-forms-with-custom-renderers-part-5

範例專案

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

客製化控制項說明

在這裡，首先在核心PCL專案內繼承一個 View，建立起一個客製化控制項 EllipseView；這個類別類定義了一個可綁定控制項，用來設定這個橢圓形的背景顏色之用。

    public class EllipseView : View
    {
        #region BindablePropertyType BindableProperty
        public static readonly BindableProperty ColorProperty =
            BindableProperty.Create("BindablePropertyType", // 屬性名稱 
                typeof(Color), // 回傳類型 
                typeof(EllipseView), // 宣告類型 
                Color.Accent // 預設值 
                );

        public Color Color
        {
            set
            {
                SetValue(ColorProperty, value);
            }
            get
            {
                return (Color)GetValue(ColorProperty);
            }
        }
        #endregion
    }

接著需要在 Android 專案內，說明要如何 Renderer 這個檢視內容，此時，當然是要呼叫 Android 平台上的原生API來做到這樣的需求；你可以在 OnDraw 方法內，看到如何繪製出這個橢圓形的過程。

[assembly: ExportRenderer(typeof(EllipseView), typeof(EllipseRenderer))]
namespace XFEllipse.Droid.Customs
{
    public class EllipseRenderer : VisualElementRenderer<EllipseView>
    {
        public EllipseRenderer()
        {
            this.SetWillNotDraw(false);
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == EllipseView.ColorProperty.PropertyName)
                this.Invalidate(); // Force a call to OnDraw
        }

        protected override void OnDraw(Canvas canvas)
        {
            var element = this.Element;
            var rect = new Rect();
            this.GetDrawingRect(rect);

            var paint = new Paint()
            {
                Color = element.Color.ToAndroid(),
                AntiAlias = true
            };

            canvas.DrawOval(new RectF(rect), paint);
        }
    }
}

接著需要在 iOS 專案內，說明要如何 Renderer 這個檢視內容，此時，當然是要呼叫 iOS 平台上的原生API來做到這樣的需求；你可以在 Draw 方法內，看到如何繪製出這個橢圓形的過程。

    public class EllipseRenderer : VisualElementRenderer<EllipseView>
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == EllipseView.ColorProperty.PropertyName)
                this.SetNeedsDisplay(); // Force a call to Draw
        }

        public override void Draw(CGRect rect)
        {
            using (var context = UIGraphics.GetCurrentContext())
            {
                var path = CGPath.EllipseFromRect(rect);
                context.AddPath(path);
                context.SetFillColor(this.Element.Color.ToCGColor());
                context.DrawPath(CGPathDrawingMode.Fill);
            }
        }
    }

底下為要顯示這些橢圓形的 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"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:local="clr-namespace:XFEllipse.Customs"
             x:Class="XFEllipse.Views.MainPage"
             Title="MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="{Binding Title}" />
        <Grid
            HorizontalOptions="Center" VerticalOptions="Center"
            >
            <local:EllipseView 
                HorizontalOptions="Start" VerticalOptions="Start"
                WidthRequest="40" HeightRequest="40"
                Color="Red" 
                />
            <local:EllipseView 
                HorizontalOptions="Start" VerticalOptions="Start"
                WidthRequest="10" HeightRequest="10"
                Margin="15"
                Color="White" 
                />
        </Grid>
        <local:EllipseView 
                HorizontalOptions="Start" VerticalOptions="Start"
                WidthRequest="140" HeightRequest="80"
                Color="Green" Opacity="0.4" 
                />
        <local:EllipseView 
                HorizontalOptions="Start" VerticalOptions="Start"
                WidthRequest="40" HeightRequest="180"
                Color="Blue" Opacity="0.4" 
                />
    </StackLayout>

</ContentPage>