Position customization

18 Jun 20253 minutes to read

The default position of notification is TopRight. The position can be customized as TopLeft, BottomLeft, BottomRight, Left, Top, Right, and Bottom using the Position property.

<badge:SfBadgeView BadgeText="5" HorizontalOptions="Center"  VerticalOptions="Center">
      <badge:SfBadgeView.Content>
          <Button Text="Top Right" CornerRadius="0" BackgroundColor="#d6d8d7" TextColor="Black" WidthRequest="120" HeightRequest="60"/>
      </badge:SfBadgeView.Content>
      <badge:SfBadgeView.BadgeSettings>
          <badge:BadgeSettings Background="CornflowerBlue"  Position="TopRight"/>
      </badge:SfBadgeView.BadgeSettings>
  </badge:SfBadgeView>
SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.HorizontalOptions = LayoutOptions.Center;
sfBadgeView.VerticalOptions = LayoutOptions.Center;
sfBadgeView.BadgeText = "5";
Button button = new Button();
button.Text = "Top Right";
button.WidthRequest = 120;
button.TextColor = Colors.Black;
button.CornerRadius = 0;
button.BackgroundColor = Color.FromRgba(214, 216, 215, 255);
button.HeightRequest = 60;
sfBadgeView.Content = button;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.Position = BadgePosition.TopRight;
badgeSetting.Background = Colors.CornflowerBlue;
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;

Badge position

Setting a badge Offset

The x,y position of the Badge View can be adjusted using the Offset property to achieve precise placement.

<badge:SfBadgeView BadgeText="8" HeightRequest="70" WidthRequest="60" HorizontalOptions="Center" VerticalOptions="Center">
        <badge:SfBadgeView.Content>
            <Image Source="BadgeImage9.png" HeightRequest="70" WidthRequest="60"/>
        </badge:SfBadgeView.Content>
        <badge:SfBadgeView.BadgeSettings>
            <badge:BadgeSettings Type="Success" Offset="-5,-10" Position="BottomRight"/>
        </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>
SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.WidthRequest = 70;
sfBadgeView.HeightRequest = 60;
sfBadgeView.HorizontalOptions = LayoutOptions.Center;
sfBadgeView.VerticalOptions = LayoutOptions.Center;
sfBadgeView.BadgeText = "8";
Image image = new Image();
image.Source = "BadgeImage9.png";
image.HeightRequest = 70;
image.WidthRequest = 60;
sfBadgeView.Content = image;
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.Type = BadgeType.Success;
badgeSetting.Position = BadgePosition.BottomRight;
badgeSetting.Offset = new Point(-5, -10);
sfBadgeView.BadgeSettings = badgeSetting;
Content = sfBadgeView;

Badge offset