Xamarin Round Label Benutzerdefinierte Renderer funktioniert nicht

Question

Ich habe einen benutzerdefinierten Renderer erstellt, um einen Kreis hinter einem Etikett wie ein Abzeichen zu erstellen.

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 (Android)

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

    } 
} 

in XAML i wie folgt versucht:

<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> 

Aber es zeigt nichts. Der Initialisierungsfehler wurde auf CircleView angezeigt, daher habe ich InitializeComponent() kommentiert; Was fehlt mir hier?

Answer 1

Ich denke, dass Sie einen Rahmen verwenden können. Es sollte CornerRadius-Eigenschaft haben.

Ansonsten benutze ich diese

XFShapeView

dies ist, wie Sie es können

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 können sein

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