Customizations in .NET MAUI BadgeView
If you don't want to use a predefined Badge type and need to customize the text inside the Badge indicator, use the BadgeText
(string
) property.
<telerik:RadBadgeView BadgeText="Badge Text">
<telerik:RadBadgeView.Content>
<telerik:RadBorder WidthRequest="80"
HeightRequest="80"
BorderThickness="1"
BorderColor="LightGray">
<Label Text="Telerik Badge View for MAUI"
FontSize="14"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"/>
</telerik:RadBorder>
</telerik:RadBadgeView.Content>
</telerik:RadBadgeView>
The following image shows the final result.
ControlTemplate
The BadgeView supports a default ControlTemplate
which you can customize.
To override the default control template, you need to set an implicit style with
TargetType="telerik:Badge"
.
Use the Default ControlTemplate
To use the default ControlTemplate
:
-
Set the default
ControlTemplate
in the page resources:<Style TargetType="telerik:Badge"> <Setter Property="ControlTemplate"> <Setter.Value> <ControlTemplate> <!-- you can change the control tempalte in order to customize the bage default look --> <telerik:RadBorder BorderThickness="{TemplateBinding BorderThickness}" BorderColor="{TemplateBinding BorderColor}" CornerRadius="{TemplateBinding CornerRadius}" BackgroundColor="{TemplateBinding BackgroundColor}" MinimumHeightRequest="{TemplateBinding MinimumHeightRequest}" MinimumWidthRequest="{TemplateBinding MinimumWidthRequest}"> <Label x:Name="PART_BadgeContent" Text="{TemplateBinding Text}" TextColor="{TemplateBinding TextColor}" Margin="{TemplateBinding TextMargin}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontAttributes="{TemplateBinding FontAttributes}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" /> </telerik:RadBorder> </ControlTemplate> </Setter.Value> </Setter> </Style>
-
The following snippet shows the BadgeView definition in XAML:
<telerik:RadBadgeView VerticalOptions="Start" HorizontalOptions="Start"> <telerik:RadBadgeView.Content> <BoxView BackgroundColor="LightGray" VerticalOptions="Center" WidthRequest="80" HeightRequest="80" HorizontalOptions="Center"/> </telerik:RadBadgeView.Content> </telerik:RadBadgeView>
-
Add the
telerik
namespace:The following image shows the final result.xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Use a Custom ControlTemplate
To customize the
ControlTemplate
:-
Define the custom
ControlTemplate
in the page resources:<Style TargetType="telerik:Badge"> <Setter Property="ControlTemplate"> <Setter.Value> <ControlTemplate> <!-- you can change the control tempalte in order to customize the bage default look --> <telerik:RadBorder HeightRequest="30" WidthRequest="60" BackgroundColor="#0DA6FF" CornerRadius="15"> <Grid ColumnDefinitions="Auto, Auto" ColumnSpacing="0" HorizontalOptions="Center"> <Label Text="" TextColor="White" VerticalOptions="Center" FontFamily="TelerikFont"/> <Label Text="234" VerticalOptions="Center" Grid.Column="1" TextColor="White"/> </Grid> </telerik:RadBorder> </ControlTemplate> </Setter.Value> </Setter> </Style>
-
The following snippet shows the BadgeView definition in XAML:
<telerik:RadBadgeView VerticalOptions="Start" HorizontalOptions="Start"> <telerik:RadBadgeView.Content> <BoxView BackgroundColor="LightGray" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="80" HeightRequest="80"/> </telerik:RadBadgeView.Content> </telerik:RadBadgeView>
-
Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
The following image shows the final result.
For a Badge ControlTemplate example, go to the SDKBrowser Demo Application and navigate to BadgeView -> Features category.
See Also
-