How to draw 1/3 circle on Xamarin forms?

问题

I'm designing a layout as below with Xamarin Forms.

1) How do we draw such a layout?

and 2) How do we draw 1/3 circle?

Please help me!

Reference: Draw Circle in Xamarin form

回答1:

If you just want to set the CornerRadius of bottom-left and bottom-right. You can use the Custom Renderer .

in Forms ,create a subclass of BoxView

public class MyBoxView:BoxView
{

}

in xaml

<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand">

  <local:MyBoxView BackgroundColor = "Red"  WidthRequest="800" HeightRequest="200"  />

</StackLayout>

in iOS

using Foundation;
using UIKit;

using xxx;
using xxx.iOS;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using CoreGraphics;
using CoreAnimation;

[assembly:ExportRenderer(typeof(MyBoxView),typeof(MyViewRenderer))]
namespace xxx.iOS
{
    public class MyViewRenderer : BoxRenderer
    {
        public override void LayoutSublayersOfLayer(CALayer layer)
        {
            base.LayoutSublayersOfLayer(layer);


            var path = UIBezierPath.FromRoundedRect(this.Bounds, UIRectCorner.BottomRight | UIRectCorner.BottomLeft, new CGSize(1000, 1000));  //set CornerRadius  here !!
            var mask = new CAShapeLayer();
            mask.Path = path.CGPath;

            this.Layer.Mask = mask;
        }      
    }
}

in Android

creat a xml file in the folder Resource->drawable boxview_style.xml

<?xml version="1.0" encoding="utf-8" ?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape
      android:shape="rectangle">
      <solid
        android:color="#ffffff" />
      <corners
        android:bottomLeftRadius="1000dp"
        android:bottomRightRadius="1000dp" />

    </shape>
  </item>
</selector>

using Android.Support.V4.Content.Res;
using xxx;
using App11.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly:ExportRenderer(typeof(MyBoxView),typeof(MyViewRenderer))]
namespace xxx.Droid
{
    public class MyViewRenderer : BoxRenderer
 {
   public MyAndriodEntry(Context context):base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if(Control!=null)
        {
            SetBackgroundResource(Resource.Drawable.boxview_style);
        }

    }
  }
}

来源：https://stackoverflow.com/questions/58205416/how-to-draw-1-3-circle-on-xamarin-forms

标签

Xamarin

xamarin.forms

xamarin.android

xamarin.ios