New to Telerik UI for .NET MAUI? Start a free 30-day trial

Align and Position the .NET MAUI BadgeView

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.Maui.Controls.BadgeView.BadgePosition)—Specifies the horizontal BadgePosition of the Badge. The supported options are: Start, Center, End. The default value is End.

    Badge Horizontal Position

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

    Badge Vertical Position

Aligning the Badge

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

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

    Badge Horizontal Alignment

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

    Badge Vertical 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