Xamarin Forms C＃を使用してテキストを中心に円を描く方法カスタムレンダラーを使用しないでください。

Question

私はxamarinフォームが新しく、サークルの中心にラベルがある円を描く必要があります。ラベルの内容は動的なので、データバインディングをサポートしていなければなりません。

注：テキストは主に数字であり、2桁以上のテキストをサポートする必要はありません。 Circled Label Xamarin Forms

が、彼らはカスタムレンダラを使用して、しかし私は、このような作業のように感じていないことを実現する方法について説明し、次の質問で

は限りNControlとNGraphicsライブラリがあるとして、顧客のレンダラーの複雑さを必要としますそれは - 私は思っています - 要件を満たすことができます。

NGraphicsとNControl Librariesを使用してこのようなタスクを達成する方法を教えてください。カスタムカスタムで使用する必要がレンダリングのみ

Answer 1

それは可能にすることはできません。 NControlViewはContentViewを継承しているので、テキストを表示できるLabelを格納できます。

Draw（）メソッドをオーバーライドし、canvas.FillEllipse（）を使用して円を描画できます。

以下の簡単な例です。テキストの長さに基づいて円の大きさを計算する方法はわかりませんが、これはあなたの仕事を開始するはずです。

public class CircleLabel: NControlView 
{ 
    public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(CircleLabel), default(string)); 
    public string Text { 
     get { return (string)GetValue(TextProperty); } 
     set { SetValue(TextProperty, value); } 
    } 

    protected Label _label; 

    public CircleLabel() 
    { 
     _label = new Label() { 
      TextColor = Xamarin.Forms.Color.White, 
      VerticalOptions = LayoutOptions.Center, 
      HorizontalTextAlignment = Xamarin.Forms.TextAlignment.Center 
     }; 
     _label.BindingContext = this; 
     _label.SetBinding(Label.TextProperty, "Text"); 

     // add the label to the ContentView 
     Content = _label; 
    } 

    public override void Draw(NGraphics.ICanvas canvas, NGraphics.Rect rect) 
    { 
     base.Draw(canvas, rect); 

     // draw an orange circle 
     canvas.FillEllipse(rect, NGraphics.Colors.Orange); 
    } 
} 

Answer 2

あなたはNControlViewから継承するクラスを作成し、それがデータバインディングをサポートしているので、テキストのバインド可能なプロパティを追加することができますレンダリングせずに

Answer 3

あなたはこのように、内部の角の丸いボタンとテキストを作ってみることができます。

<Button BackgroundColor="Red" 
     Text="{Binding yourText}" 
     TextColor="White" 
     FontSize="Small" 
     BorderWitdh="1" 
     BorderRadius="100" 
     WidthRequest="150" 
     HeightRequest="150" />