This is my badge
Badge class
<Grid
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:Operacional"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Operacional.BadgeView"
Padding="5"
Margin="1"
HeightRequest="16"
WidthRequest="32">
<local:CircleView x:Name="BadgeCircle"
HeightRequest="16"
WidthRequest="32"
CornerRadius="16"
VerticalOptions="Start"
HorizontalOptions="Start" />
<Label x:Name="BadgeLabel"
TextColor="White"
VerticalOptions="Start"
HorizontalOptions="Start"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontSize="10"/>
</Grid>
this is code behind
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BadgeView : Grid
{
public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(BadgeView), "0", propertyChanged: (bindable, oldVal, newVal) =>
{
var view = (BadgeView)bindable;
view.BadgeLabel.Text = (string)newVal;
});
public static BindableProperty BadgeColorProperty = BindableProperty.Create("BadgeColor", typeof(Color), typeof(BadgeView), Color.Blue, propertyChanged: (bindable, oldVal, newVal) =>
{
var view = (BadgeView)bindable;
view.BadgeCircle.BackgroundColor = (Color)newVal;
});
public string Text
{
get
{
return (string)GetValue(TextProperty);
}
set
{
SetValue(TextProperty, value);
}
}
public Color BadgeColor
{
get
{
return (Color)GetValue(BadgeColorProperty);
}
set
{
SetValue(BadgeColorProperty, value);
}
}
public BadgeView()
{
InitializeComponent();
BadgeLabel.Text = Text;
BadgeCircle.BackgroundColor = BadgeColor;
}
}
and this is the calling
<StackLayout Padding="0" Spacing="0" Margin="0">
<Grid x:Name="grd" RowSpacing="1" ColumnSpacing="1" Padding="0" Margin="0" >
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="imgDesvioFat" Grid.Row="1" Grid.Column="0" Source="{local:ImageResource Operacional.Images.faturamento caixa-28.png}" Aspect="AspectFill">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnDesvioFaturamentoTapReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<badge:BadgeView x:Name="bdgDesvioFat"
Grid.Row="1"
Grid.Column="0"
BadgeColor="Blue"/>
<Image x:Name="imgTckCancelados" Grid.Row="1" Grid.Column="1" Source="{local:ImageResource Operacinal.Images.tickets cancelados-05.png}" Aspect="AspectFill">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTckCanceladosTapGestureReconizerTapped" NumberOfTapsRequired="1"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<badge:BadgeView x:Name="bdgTckCancelados"
Grid.Row="1"
Grid.Column="1"
BadgeColor="Blue"/>
......................
see below screenshot