Create badge with rounded corners

0

I'd like to know how I can get my badge to be rectangular with rounded corners. My Badge

<Grid      
    xmlns="http://xamarin.com/schemas/2014/forms"      
    xmlns:local="clr-namespace:Estapar.AppOperacional"     
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    x:Class="Operacional.BadgeView" 
        Padding="5"
        Margin="1"
        HeightRequest="16"     
        WidthRequest="32">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

        <local:CircleView Grid.Row="0" Grid.Column="0" x:Name="BadgeCircle"
                      HeightRequest="16" 
                      WidthRequest="32" 
                      CornerRadius="16" 
                      VerticalOptions="Start" 
                      HorizontalOptions="Start" />

        <Label Grid.Row="0" Grid.Column="0" x:Name="BadgeLabel"
           TextColor="White" 
           VerticalOptions="Center"           
           HorizontalOptions="Center" 
           VerticalTextAlignment="Center" 
           HorizontalTextAlignment="Center"
           FontSize="10"/>
</Grid>

and my call

<badge:BadgeView x:Name="bdgDesvioFat" 
 Grid.Row="1" 
 Grid.Column="0" 
 BadgeColor="Blue"/>

EDIT1

This is the CircleView class

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); }
        }
    }
    
asked by anonymous 26.02.2018 / 23:49

0 answers