Class BadgeSettings

Represents the badge settings class.

Inheritance

System.Object

BadgeSettings

Namespace: Syncfusion.Maui.Core

Assembly: Syncfusion.Maui.Core.dll

Syntax

public class BadgeSettings : Element, ITextElement

Constructors

BadgeSettings()

Initializes a new instance of the BadgeSettings class.

Declaration

public BadgeSettings()

Fields

AnimationDurationProperty

Identifies the AnimationDuration bindable property.

Declaration

public static readonly BindableProperty AnimationDurationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AnimationDuration bindable property.

AnimationProperty

Identifies the Animation bindable property.

Declaration

public static readonly BindableProperty AnimationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Animation bindable property.

AutoHideProperty

Identifies the AutoHide bindable property.

Declaration

public static readonly BindableProperty AutoHideProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AutoHide bindable property.

BackgroundProperty

Identifies the Background bindable property.

Declaration

public static readonly BindableProperty BackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Background bindable property.

BadgeAlignmentProperty

Identifies the BadgeAlignment bindable property.

Declaration

public static readonly BindableProperty BadgeAlignmentProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for BadgeAlignment bindable property.

CornerRadiusProperty

Identifies the CornerRadius bindable property.

Declaration

public static readonly BindableProperty CornerRadiusProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for CornerRadius bindable property.

FontAttributesProperty

Identifies the FontAttributes bindable property.

Declaration

public static readonly BindableProperty FontAttributesProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontAttributes bindable property.

FontAutoScalingEnabledProperty

Identifies the FontAutoScalingEnabled bindable property.

Declaration

public static readonly BindableProperty FontAutoScalingEnabledProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontAutoScalingEnabled bindable property.

FontFamilyProperty

Identifies the FontFamily bindable property.

Declaration

public static readonly BindableProperty FontFamilyProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontFamily bindable property.

FontSizeProperty

Identifies the FontSize bindable property.

Declaration

public static readonly BindableProperty FontSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for FontSize bindable property.

IconProperty

Identifies the Icon bindable property.

Declaration

public static readonly BindableProperty IconProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Icon bindable property.

IsVisibleProperty

Identifies the IsVisible bindable property.

Declaration

public static readonly BindableProperty IsVisibleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IsVisible bindable property.

OffsetProperty

Identifies the Offset bindable property.

Declaration

public static readonly BindableProperty OffsetProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Offset bindable property.

PositionProperty

Identifies the Position bindable property.

Declaration

public static readonly BindableProperty PositionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Position bindable property.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Stroke bindable property.

StrokeThicknessProperty

Identifies the StrokeThickness bindable property.

Declaration

public static readonly BindableProperty StrokeThicknessProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for StrokeThickness bindable property.

TextColorProperty

Identifies the TextColor bindable property.

Declaration

public static readonly BindableProperty TextColorProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TextColor bindable property.

TextPaddingProperty

Identifies the TextPadding bindable property.

Declaration

public static readonly BindableProperty TextPaddingProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TextPadding bindable property.

TypeProperty

Identifies the Type bindable property.

Declaration

public static readonly BindableProperty TypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Type bindable property.

Properties

Animation

Gets or sets the animation that should be used when the badge is shown.

Declaration

public BadgeAnimation Animation { get; set; }

Property Value

Type	Description
BadgeAnimation	One of the BadgeAnimation enumeration that specifies the animation of the badge when the badge is shown. The default value is Scale.

Examples

The following example shows how to apply the animation for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Animation="None"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Animation = BadgeAnimation.None
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

AnimationDuration

Gets or sets a value that can be used to adjust the duration of the badge animation.

Declaration

public double AnimationDuration { get; set; }

Property Value

Type	Description
System.Double	It accepts double values, and the default value is 250ms.

AutoHide

Gets or sets a value indicating whether the badge text is AutoHide or not.

Declaration

public bool AutoHide { get; set; }

Property Value

Type	Description
System.Boolean	Specifies the value for auto-hide of the badge when the value is zero or empty. The default value is false.

Examples

The following example shows how to apply the auto hide for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings AutoHide="True"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    AutoHide = true
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Background

Gets or sets the background for the badge. This property will be set only if BadgeType is set to BadgeType.None.

Declaration

public Brush Background { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	Specifies the background color of the badge. The default value is Colors.Transparent.

Examples

The following example shows how to apply the background color for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Background="Green"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Background = Colors.Green     
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

BadgeAlignment

Gets or sets the value for badge alignment.

Declaration

public BadgeAlignment BadgeAlignment { get; set; }

Property Value

Type	Description
BadgeAlignment	Specifies the value for alignment of the badge. The default value is Center.

Examples

The following example shows how to apply the alignment for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary" 
                WidthRequest="120"  
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings BadgeAlignment="Start"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    BadgeAlignment = BadgeAlignment.Start
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

CornerRadius

Gets or sets the corner radius of the badge.

Declaration

public CornerRadius CornerRadius { get; set; }

Property Value

Type	Description
Microsoft.Maui.CornerRadius	Specifies the corner radius of the badge. The default value is CornerRadius(25).

Examples

The following example shows how to apply the corner radius for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings CornerRadius="5"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    CornerRadius = new CornerRadius(5, 5, 5, 5)   
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

FontAttributes

Gets or sets the font attributes of the text to be displayed in badge over the control.

Declaration

public FontAttributes FontAttributes { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.FontAttributes	One of the Microsoft.Maui.Controls.FontAttributes enumeration that specifies the font attributes of badge text. The default mode is Microsoft.Maui.Controls.FontAttributes.None.

Examples

The following example shows how to apply the font attributes for the badge text.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings FontAttributes="Bold"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    FontAttributes = FontAttributes.Bold
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

FontAutoScalingEnabled

Gets or sets a value that Determines whether or not the font of the control should scale automatically according to the operating system settings.

Declaration

public bool FontAutoScalingEnabled { get; set; }

Property Value

Type	Description
System.Boolean	It accepts Boolean values, and the default value is false.

FontFamily

Gets or sets the font family of the text to be displayed in badge over the control. The property will be set only if BadgeIcon is set to BadgeIcon.None.

Declaration

public string FontFamily { get; set; }

Property Value

Type	Description
System.String	Specifies the font family of the badge text. The default value is an empty string.

Examples

The following example shows how to apply the font family for the badge text.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings FontFamily="OpenSansRegular"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    FontFamily = "OpenSansRegular"
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Type	Description
System.Double	Specifies the font size of the badge text. The default value is -1d.

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings FontSize="32"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    FontSize = 32
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Icon

Gets or sets the Icon to be displayed in the badge. BadgeText and BadgeSettings.FontFamily is not applied when this property is set other than BadgeIcon.None.

Declaration

public BadgeIcon Icon { get; set; }

Property Value

Type	Description
BadgeIcon	One of the BadgeIcon enumeration that specifies the icon of the badge. The default value is None.

Examples

The following example shows how to apply the icon for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Icon="Add"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Icon = BadgeIcon.Add
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

IsVisible

Gets or sets a value indicating whether to show the badges.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	It accepts Boolean values, and the default value is true.

Offset

Gets or sets the value for offset.

Declaration

public Point Offset { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Point	Specifies the offset of the badge. The default value is Point(2, 2).

Examples

The following example shows how to apply the offset for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Offset="10,10"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Offset = new Point(10, 10)
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Position

Gets or sets the position where the badge will be shown relative to the Content.

Declaration

public BadgePosition Position { get; set; }

Property Value

Type	Description
BadgePosition	One of the BadgePosition enumeration that specifies the position of the badge relative to the content. The default value is TopRight.

Examples

The following example shows how to apply the position for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Position="BottomRight"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Position = BadgePosition.BottomRight
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Stroke

Gets or sets the stroke for the badge.

Declaration

public Color Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	Specifies the stroke of the badge. The default value is Colors.Transparent.

Examples

The following example shows how to apply the stroke for a badge.

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Stroke="Orange"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Stroke = Colors.Orange   
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

StrokeThickness

Gets or sets the stroke thickness for the badge. The stroke thickness will be visible only if the stroke is not set to transparent.

Declaration

public double StrokeThickness { get; set; }

Property Value

Type	Description
System.Double	Specifies the stroke thickness of the badge. The default value is 0d.

Examples

The following example shows how to apply the stroke thickness for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings StrokeThickness="2"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    StrokeThickness = 2     
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

TextColor

Gets or sets the color of the text to be displayed in badge over the control.

Declaration

public Color TextColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	Specifies the text color of the badge text. The default value is Colors.White.

Examples

The following example shows how to apply the text color for the badge text.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings TextColor="Red"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    TextColor = Colors.Red
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

TextPadding

Gets or sets the padding around the text of the badge.

Declaration

public Thickness TextPadding { get; set; }

Property Value

Type	Description
Microsoft.Maui.Thickness	Specifies the text padding around the text of the badge. The default value is Thickness(3) for UWP and Thickness(5) for other platforms.

Examples

The following example shows how to apply the text padding for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings TextPadding="10"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    TextPadding = new Thickness(10, 10, 10, 10)
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Type

Gets or sets the type of the badge. BadgeSettings.BackgroundColor is not applied when this property set other than BadgeIcon.None.

Declaration

public BadgeType Type { get; set; }

Property Value

Type	Description
BadgeType	One of the BadgeType enumeration that specifies the type of the badge. The default value is Primary.

Examples

The following example shows how to apply the type for a badge.

XAML
C#

<badge:SfBadgeView BadgeText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
    <badge:SfBadgeView.BadgeSettings>
        <badge:BadgeSettings Type="Success"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";
sfBadgeView.BadgeSettings = new BadgeSettings 
{
    Type = BadgeType.Success
};

Button button = new Button();
button.Text = "Primary";
button.WidthRequest = 120;
button.HeightRequest = 60;

sfBadgeView.Content = button;

Methods

OnParentSet()

Invoked whenever the Parent of an element is set.

Declaration

protected override void OnParentSet()