如何在Xamarin表格上绘制1/3圆?

问题描述

我正在使用Xamarin Forms设计如下的布局.

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

1)我们如何绘制这样的布局?

1) How do we draw such a layout?

和2)我们如何绘制1/3圆?

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

请帮助我！

参考:绘制圆圈Xamarin形式

推荐答案

如果只想设置左下角和右下角的CornerRadius.您可以使用 自定义渲染器 .

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

在Forms中，创建 BoxView

in Forms ,create a subclass of BoxView

public class MyBoxView:BoxView
{

}

xaml

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

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

</StackLayout>

在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;
        }      
    }
}

在Android中

在文件夹资源->可绘制 boxview_style.xml

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

    }
  }
}

这篇关于如何在Xamarin表格上绘制1/3圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！