Class SfBadgeView

The .NET MAUI Badge View control allows you to show a notification badge with a text over any controls. Adding a control in a Badge View control, you can show a notification badge value over the control.

Inheritance

System.Object

SfView

SfContentView

SfBadgeView

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfContentView.Content

SfContentView.OnContentChanged(Object, Object)

SfView.ArrangeOverride(Rect)

SfView.Children

SfView.ClipToBounds

SfView.GetSemanticsNodesCore(Double, Double)

SfView.IDrawableLayout.DrawingOrder

SfView.IDrawableLayout.InvalidateDrawable()

SfView.MeasureOverride(Double, Double)

SfView.OnHandlerChanged()

SfView.Padding

Namespace: Syncfusion.Maui.Core

Assembly: Syncfusion.Maui.Core.dll

Syntax

public class SfBadgeView : SfContentView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IParentThemeElement, IThemeElement

Examples

The following examples show how to initialize the badge view.

XAML
C#

<badge:SfBadgeView HorizontalOptions="Center"
                   VerticalOptions="Center"
                   BadgeText="20">

    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>

</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.HorizontalOptions = LayoutOptions.Center;
sfBadgeView.VerticalOptions = LayoutOptions.Center;
sfBadgeView.BadgeText = "20";

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

sfBadgeView.Content = button;
this.Content = sfBadgeView;

Constructors

SfBadgeView()

Initializes a new instance of the SfBadgeView class.

Declaration

public SfBadgeView()

Fields

BadgeSettingsProperty

Identifies the BadgeSettings bindable property.

Declaration

public static readonly BindableProperty BadgeSettingsProperty

Field Value

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

BadgeTextProperty

Identifies the BadgeText bindable property.

Declaration

public static readonly BindableProperty BadgeTextProperty

Field Value

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

ContentProperty

Identifies the content bindable property.

Declaration

public static readonly BindableProperty ContentProperty

Field Value

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

ScreenReaderTextProperty

Identifies the ScreenReaderText bindable property.

Declaration

public static readonly BindableProperty ScreenReaderTextProperty

Field Value

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

Properties

BadgeSettings

Gets or sets the value for badge settings.

Declaration

public BadgeSettings BadgeSettings { get; set; }

Property Value

Type	Description
BadgeSettings	Specifies the badge settings of the badge. The default value is null.

Examples

The following example shows how to apply the badge settings 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 Stroke="Orange"
                             StrokeThickness="2"/>
    </badge:SfBadgeView.BadgeSettings>
</badge:SfBadgeView>

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

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

sfBadgeView.Content = button;

BadgeText

Gets or sets the text for the badge. The property will be set only if BadgeIcon is set to BadgeIcon.None.

Declaration

public string BadgeText { get; set; }

Property Value

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

Examples

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

XAML
C#

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

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.BadgeText = "20";

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

sfBadgeView.Content = button;

ScreenReaderText

Gets or sets the screen reader text for the badge.

Declaration

public string ScreenReaderText { get; set; }

Property Value

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

Examples

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

XAML
C#

<badge:SfBadgeView ScreenReaderText="20">
    <badge:SfBadgeView.Content>
        <Button Text="Primary"
                WidthRequest="120"
                HeightRequest="60"/>
    </badge:SfBadgeView.Content>
</badge:SfBadgeView>

SfBadgeView sfBadgeView = new SfBadgeView();
sfBadgeView.ScreenReaderText = "20";

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

sfBadgeView.Content = button;

Methods

ArrangeContent(Rect)

ArrangeContent method.

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds	The bounds.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	It returns the size.

Overrides

SfView.ArrangeContent(Rect)

Finalize()

Disconnect constructor

Declaration

protected override void Finalize()

MeasureContent(Double, Double)

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint
System.Double	heightConstraint

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.MeasureContent(Double, Double)

OnBindingContextChanged()

Called when the binding context is changed.

Declaration

protected override void OnBindingContextChanged()

Overrides

SfView.OnBindingContextChanged()

OnDraw(ICanvas, RectF)

Draw method.

Declaration

protected override void OnDraw(ICanvas canvas, RectF dirtyRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas	The Canvas.
Microsoft.Maui.Graphics.RectF	dirtyRect	The rectangle.

Overrides

SfView.OnDraw(ICanvas, RectF)

OnPropertyChanged(String)

OnPropertyChanged method

Declaration

protected override void OnPropertyChanged(string propertyName = null)

Parameters

Type	Name	Description
System.String	propertyName	Property Name

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement