Xamarin Round Label自定義渲染器不工作

Question

我創建了一個自定義渲染器來在標籤後面創建圓形，就像徽章一樣。

CircleView.cs（PCL）

public partial class CircleView : BoxView 
    { 
     public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(double), typeof(CircleView), 0.0); 

     public double CornerRadius 
     { 
      get { return (double)GetValue(CornerRadiusProperty); } 
      set { SetValue(CornerRadiusProperty, value); } 
     } 

     public CircleView() 
     { 
      InitializeComponent(); 
     } 
    } 

CircleViewRenderer.cs（機器人）

[assembly: ExportRenderer(typeof(CircleView), typeof(CircleViewRenderer))] 
namespace TestApp.Droid 
{ 
    public class CircleViewRenderer : BoxRenderer 
    { 
     private float _cornerRadius; 
     private RectF _bounds; 
     private Path _path; 
     protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) 
     { 
      base.OnElementChanged(e); 

      if (Element == null) 
      { 
       return; 
      } 
      var element = (CircleView)Element; 

      _cornerRadius = TypedValue.ApplyDimension(ComplexUnitType.Dip, (float)element.CornerRadius, Context.Resources.DisplayMetrics); 

     } 

     protected override void OnSizeChanged(int w, int h, int oldw, int oldh) 
     { 
      base.OnSizeChanged(w, h, oldw, oldh); 
      if (w != oldw && h != oldh) 
      { 
       _bounds = new RectF(0, 0, w, h); 
      } 

      _path = new Path(); 
      _path.Reset(); 
      _path.AddRoundRect(_bounds, _cornerRadius, _cornerRadius, Path.Direction.Cw); 
      _path.Close(); 
     } 

     public override void Draw(Canvas canvas) 
     { 
      canvas.Save(); 
      canvas.ClipPath(_path); 
      base.Draw(canvas); 
      canvas.Restore(); 
     } 
    } 
} 

CircleViewRenderer.cs（IOS）

[assembly: ExportRenderer(typeof(CircleView), typeof(CircleViewRenderer))] 
namespace TestApp.iOS 
{ 
    public class CircleViewRenderer : BoxRenderer 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) 
     { 
      base.OnElementChanged(e); 

      if (Element == null) 
       return; 

      Layer.MasksToBounds = true; 
      Layer.CornerRadius = (float)((CircleView)Element).CornerRadius/2.0f; 
     } 

    } 
} 

在XAML我試圖這樣的：

<Grid> 
<customRenderer:CircleView x:Name="BadgeCircle" HeightRequest="16" WidthRequest="16" CornerRadius="16" VerticalOptions="Center" HorizontalOptions="Center" /><Label x:Name="BadgeLabel" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontSize="10"/> 
</Grid> 

但它沒有顯示任何東西。初始化錯誤顯示在CircleView上，所以我評論了InitializeComponent（）; 我在這裏失蹤了什麼？

Answer 1

我認爲你可以使用一個框架。它應該有CornerRadius屬性。

否則，我用這個

XFShapeView

這是你如何使用它

var box = new ShapeView 
{ 
    ShapeType = ShapeType.Box, 
    HeightRequest = 75, 
    WidthRequest = 75, 
    Color = Color.Navy, 
    HorizontalOptions = LayoutOptions.Center, 
    CornerRadius = 5, 
    BorderColor = Color.Red, 
    BorderWidth = 1f, 
    Content = new Label 
    { 
     Text = "Touch me!", 
     FontSize = Device.GetNamedSize(NamedSize.Micro, typeof (Label)), 
     TextColor = Color.White, 
     HorizontalOptions = LayoutOptions.Fill, 
     VerticalOptions = LayoutOptions.Fill, 
     VerticalTextAlignment = TextAlignment.Center, 
     HorizontalTextAlignment = TextAlignment.Center, 
    }, 
}; 

ShapeType可以

public enum ShapeType 
    { 
     /// <summary> 
     /// A 4-sides shape (square/rectangle) - can have rounded corners 
     /// </summary> 
     Box, 
     /// <summary> 
     /// A circle shape with a radius equals to the minimum value between height &amp; width 
     /// </summary> 
     Circle, 
     /// <summary> 
     /// A star shape for which you can define the number of points and the radius ratio 
     /// </summary> 
     Star, 
     /// <summary> 
     /// A triangle shape - the appearance depends on the height/width ratio 
     /// </summary> 
     Triangle, 
     /// <summary> 
     /// An oval shape - the appearance depends on the height/width ratio 
     /// </summary> 
     Oval, 
     /// <summary> 
     /// A diamond shape - 4-sides - the same you can find in a card deck - the appearance depends on the height/width ratio 
     /// </summary> 
     Diamond, 
     /// <summary> 
     /// A heart shape - the appearance depends on the minimum value between height &amp; width 
     /// </summary> 
     Heart, 
     /// <summary> 
     /// A progress circle shape acting like a progress bar with a radius equals to the minimum value between height &amp; width 
     /// </summary> 
     ProgressCircle, 
     /// <summary> 
     /// A custom path shape defined by a list of points 
     /// </summary> 
     Path