BadgeView

BadgeView

Badges are used to notify users of notifications or the status of something.

Features

• Customize the position of the badge around the badge content.
• Use any kind of content.
• Customize the badge background, border or font size.
• Use animations for the badge text.
• ControlTemplate support.

Using the control

Create an instance for the badge view control, set the Text property and the Content property.

<controls:BadgeView
    BackgroundColor="Red"
    TextColor="White"
    Text="1">
    <Label
        Text="BadgeView"/>
</controls:BadgeView>

Customization

The font can be customized using the FontSize, FontAttributes, and FontFamily properties.

<controls:BadgeView
    BackgroundColor="Red"
    FontAttributes="Bold"
    FontSize="8"
    TextColor="White"
    Text="1">
    <Label
        Text="Font Customization"/>
</controls:BadgeView>

The border color of the badge view can be customized using the BorderColor property.

<controls:BadgeView
    BackgroundColor="Red"
    BorderColor="Orange"
    TextColor="White"
    Text="1">
    <Label
        Text="Border Customization"/>
</controls:BadgeView>

Customize the badge position

The default BadgePosition is TopRight but you can change the position to any corner.

• TopLeft
• TopRight
• BottomLeft
• BottomRight

Animations

When increasing or decreasing the Text number, an animation will automatically be applied.

You can customize the animation applied creating a new class and inherit from IBadgeAnimation.

Task OnAppearing(View badgeView);
Task OnDisappering(View badgeView);