How to apply style to the Xamarin.Forms Badge View control?
This article explains how to customize the appearance of the Xamarin.Forms SfBadgeView control using style.
Step 1: Initialize the SfBadgeView with required content, as shown in the following code sample.
[XAML]
<badge:SfBadgeView HorizontalOptions="Center"
VerticalOptions="Center">
<badge:SfBadgeView.Content>
<Image Source="People_Circle1.png"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"/>
</badge:SfBadgeView.Content>
</badge:SfBadgeView>
Step 2: Create a Style for SfBadgeView to customize it.
[XAML]
<Style x:Key="BadgeViewStyle"
TargetType="badge:SfBadgeView">
<Setter Property="BadgeText">New User</Setter>
<Setter Property="BadgeSettings">
<Setter.Value>
<badge:BadgeSetting BadgePosition="BottomRight"
BackgroundColor="Green"
CornerRadius="5"
Offset="-15,-8"
BadgeType="None"
StrokeWidth="2"
Stroke="Black"
BadgeIcon="Busy"
BadgeAlignment="Start" />
</Setter.Value>
</Setter>
</Style>
NOTE: BadgeSetting is a non-visual element. As a result, you cannot create a separate style for it. You must add its value as shown in the above code sample.
Step 3: Assign created style to the SfBadgeViews’ Style property
[XAML]
<badge:SfBadgeView HorizontalOptions="Center"
StyleVerticalOptions="Center"
Style="{StaticResource BadgeViewStyle}">
<badge:SfBadgeView.Content>
<Image Source="People_Circle1.png"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"/>
</badge:SfBadgeView.Content>
</badge:SfBadgeView>
Output
Download the complete sample here.
See also
How can I customize the badge view position?
How can I customize the badge in Xamarin.Forms SfBadgeView?
How can I add badge icon in badge view?
I hope you enjoyed learning how to apply style to the Xamarin.Forms Badge View control.
You can refer to our Xamarin Badge View feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
