Alignment and Position

The BadgeView provides properties for setting the alignment and position of the Badge indicator based on the BadgeView Content.

Positioning the Badge

To specify the position of the Badge according to its content, use the following properties:

  • BadgeHorizontalPosition(of type Telerik.XamarinForms.Primitives.BadgePosition)—Specifies the horizontal BadgePosition of the Badge. The supported options are: Start, Center, End. The default value is End.

    Badge Position

  • BadgeVerticalPosition(of type Telerik.XamarinForms.Primitives. BadgePosition)—Specifies the vertical BadgePosition of the Badge. The supported options are: Start, Center, End. The default value is Start.

    Badge Position

Aligning the Badge

To specify the alignment of the Badge according to its content, use the following properties:

  • BadgeHorizontalAlignment(of type Telerik.XamarinForms.Primitives.BadgeAlignment)—Specifies the horizontal alignment of the badge. The supported options are: Start, Center, End. The default value is Center.

    Badge Alignment

  • BadgeVerticalAlignment(of type Telerik.XamarinForms.Primitives.BadgeAlignment)—Specifies the vertical alignment of the Badge. The supported options are: Start, Center, End. The default value is End.

    Badge Alignment

Offset

You can also specify the horizontal and vertical distance between the content of the Badge indicator and its alignment point by using the following properties:

  • BadgeOffsetX(double)—Specifies the horizontal distance between the content of the Badge and its alignment point. The default value is 0.

  • BadgeOffsetY(double)—Specifies the vertical distance between the content of the Badge and its alignment point. The default value is 0.

Example

The following example demonstrates how to position and align the Badge as well as set its offset.

<telerik:RadBadgeView BadgeText="12"
                                BadgeVerticalPosition="End"
                                BadgeHorizontalAlignment="End"
                                BadgeOffsetX="-5"
                                VerticalOptions="Center">
    <telerik:RadBadgeView.Content>
        <telerik:RadButton Padding="15, 10, 15, 10"
                           CornerRadius="20"
                           Text="Shopping Cart"
                           TextColor="White"
                           VerticalOptions="Center"
                           VerticalContentAlignment="Center"
                           BackgroundColor="#0E88F2"/>
    </telerik:RadBadgeView.Content>
</telerik:RadBadgeView>

The following image shows the final result.

Badge Position and Alignment

See Also

In this article
Not finding the help you need?