How to draw 1/3 circle on Xamarin forms? - xamarin

Question

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

Answer 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);
}
}
}
}