Class SfBadge

Represents a badge control which used to display an overlay over any element.

Inheritance

System.Object

SfBadge

Implements

System.IDisposable

Namespace: Syncfusion.UI.Xaml.Notifications

Assembly: Syncfusion.Notifications.WinUI.dll

Syntax

public class SfBadge : ContentControl, IDisposable

Remarks

SfBadge control is used to notify users with new or unread messages, notifications, or the status of something. BadgeContainer acts as host to load any UI Element and set overlay for the control using badge control. You can position the overlay to left or right of the content of badge container using HorizontalAlignment and VerticalAlignment alignment properties.

A SfBadge can also be used without BadgeContainer. When the badge control is used without a BadgeContainer, you should position the control in layout as like any other control.

Examples

Following example shows how to load overlay over a Button control using SfBadge control.

<syncfusion:BadgeContainer>
   <Button
        Content="Mail Box"
        Width="120"
        Height="60"/>
    <syncfusion:BadgeContainer.Badge>
        <syncfusion:SfBadge HorizontalAlignment="Right" VerticalAlignment="Left"
            Shape="Oval"
            Fill="Accent"
            AnimationType="Scale"
            Content="10"/>
    </syncfusion:BadgeContainer.Badge>
</syncfusion:BadgeContainer>

Constructors

SfBadge()

Initializes a new instance of the SfBadge class.

Declaration

public SfBadge()

Fields

AnimationTypeProperty

Identifies AnimationType dependency property.

Declaration

public static readonly DependencyProperty AnimationTypeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

CustomShapeProperty

Identifies CustomShape dependency property.

Declaration

public static readonly DependencyProperty CustomShapeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

FillProperty

Identifies Fill dependency property.

Declaration

public static readonly DependencyProperty FillProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HorizontalAnchorPositionProperty

Identifies HorizontalAnchorPosition dependency property.

Declaration

public static readonly DependencyProperty HorizontalAnchorPositionProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HorizontalAnchorProperty

Identifies HorizontalAnchor dependency property.

Declaration

public static readonly DependencyProperty HorizontalAnchorProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HorizontalPositionProperty

Identifies HorizontalPosition dependency property.

Declaration

public static readonly DependencyProperty HorizontalPositionProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ShapeProperty

Identifies Shape dependency property.

Declaration

public static readonly DependencyProperty ShapeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

StrokeProperty

Identifies Stroke dependency property.

Declaration

public static readonly DependencyProperty StrokeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

StrokeThicknessProperty

Identifies StrokeThickness dependency property.

Declaration

public static readonly DependencyProperty StrokeThicknessProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

VerticalAnchorPositionProperty

Identifies VerticalAnchorPosition dependency property.

Declaration

public static readonly DependencyProperty VerticalAnchorPositionProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

VerticalAnchorProperty

Identifies VerticalAnchor dependency property.

Declaration

public static readonly DependencyProperty VerticalAnchorProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

VerticalPositionProperty

Identifies VerticalPosition dependency property.

Declaration

public static readonly DependencyProperty VerticalPositionProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

Properties

AnimationType

Gets or sets the animation type of the SfBadge. Animation is triggered when content is changed.

Declaration

public BadgeAnimationType AnimationType { get; set; }

Property Value

Type	Description
BadgeAnimationType	A value of the enumeration. The default is None.

Remarks

When badge content is changed, badge animates to notify that there was a change.

CustomShape

Gets or sets the custom shape of the SfBadge. CustomShape used as background of badge only when Shape is Custom.

Declaration

public Geometry CustomShape { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.Geometry	The default is null.

Remarks

A custom shape can be defined as required, when any of the build-in Shape is not sufficient.

Examples

Following example shows a badge with custom background shape.

<syncfusion:BadgeContainer>
    <syncfusion:BadgeContainer.Content>
        <Button
            Content="Mail Box"
            Width="120"
            Height="60"/>
    </syncfusion:BadgeContainer.Content>
    <syncfusion:BadgeContainer.Badge>
        <syncfusion:SfBadge
            Shape="Custom"
            CustomShape="M0,20L20,0 40,20 20,40z"
            Content="10"/>
    </syncfusion:BadgeContainer.Badge>
</syncfusion:BadgeContainer>

Fill

Gets or sets the Brush from predefined set of brushes that paints the interior area of the Shape.

Declaration

public BadgeFill Fill { get; set; }

Property Value

Type	Description
BadgeFill	A value of the enumeration. The default is Accent.

Remarks

Use Background property to set custom fill color for badge shape.

HorizontalAnchor

Gets or sets the horizontal placement (inside, center or outside) of the SfBadge relative to its position when loading badge control inside BadgeContainer. For example, If HorizontalAlignment is Right and HorizontalAnchor is outside, then badge overlay is positioned to right side of content of badge container based on horizontal alignment and placed outside the bounds of content based on horizontal anchor.

Declaration

public BadgeAnchor HorizontalAnchor { get; set; }

Property Value

Type	Description
BadgeAnchor	A value of the enumeration. The default is Center.

Remarks

HorizontalAnchor decides whether the badge will be aligned inside, center or outside the container bounds horizontally. To perform precise placement use HorizontalAnchorPosition by setting HorizontalAnchor as Custom.

HorizontalAnchorPosition

Gets or sets the horizontal placement of SfBadge in numerical precision (0 to 1) when HorizontalAnchor is Custom.

Declaration

public double HorizontalAnchorPosition { get; set; }

Property Value

Type	Description
System.Double	The default value is 0. This value can be any value equal to or between 0 and less 1.

Remarks

If HorizontalAlignment is Right and HorizontalAnchorPosition is 1, the badge overlay positioned right side of content and placed within the bounds of badge container based on Horizontal Anchor Position.

Refer HorizontalAnchor to know more about placement.

HorizontalPosition

Gets or sets the horizontal alignment of the SfBadge in numerical precision (0 to 1) when loading badge control inside BadgeContainer. BadgeContainer uses HorizontalAlignment to position the badge overlay when HorizontalPosition value is NaN.

Declaration

public double HorizontalPosition { get; set; }

Property Value

Type	Description
System.Double	The default value is `NaN`. This value can be any value equal to or between `0` and less `1`.

Remarks

The value 0 denotes HorizontalAlignment.Left and 1 denotes HorizontalAlignment.Right. The horizontal alignment of badge overlay calculated using width of content in badge container and horizontal position.

Examples

Following example shows changing of alignment using HorizontalPosition and VerticalPosition.

<syncfusion:BadgeContainer>
    <syncfusion:BadgeContainer.Content>
        <PersonPicture Width="100"
                       Height="100"
                       ProfilePicture="/Images/avatar.png"/>
    </syncfusion:BadgeContainer.Content>
    <syncfusion:BadgeContainer.Badge>
        <syncfusion:SfBadge Shape="None"
                            HorizontalPosition="0.9"
                            VerticalPosition="0.8">
            <Ellipse Width="20" Height="20" Fill="LimeGreen"/>
        </syncfusion:SfBadge>
    </syncfusion:BadgeContainer.Badge>
</syncfusion:BadgeContainer>

Shape

Gets or sets the shape of the SfBadge.

Declaration

public BadgeShape Shape { get; set; }

Property Value

Type	Description
BadgeShape	A value of the enumeration. The default is Oval.

Remarks

Badge background shape can be Ellipse, Oval, Rectangle or None. Custom background shape can be defined using CustomShape by setting Shape as Custom.

Stroke

Gets or sets the Brush that specifies how the Shape outline is painted.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.Brush	A `Brush` that specifies how the Shape outline is painted.

StrokeThickness

Gets or sets the width of the Shape stroke outline.

Declaration

public double StrokeThickness { get; set; }

Property Value

Type	Description
System.Double	The width of the Shape outline, in pixels. The default value is `0`.

VerticalAnchor

Gets or sets the vertical placement (inside, center or outside) of the SfBadge relative to its position when loading badge control inside BadgeContainer. For example, If VerticalAlignment is Top and VerticalAnchor is Outside, then badge overlay is positioned to top side of content of badge container based on vertical alignment and placed outside the bounds of content based on vertical anchor.

Declaration

public BadgeAnchor VerticalAnchor { get; set; }

Property Value

Type	Description
BadgeAnchor	A value of the enumeration. The default is Center.

Remarks

VerticalAnchor decides whether the badge will be aligned inside, center or outside the container bounds vertically. To perform precise placement use VerticalAnchorPosition by setting VerticalAnchor as Custom.

VerticalAnchorPosition

Gets or sets the vertical placement of SfBadge in numerical precision (0 to 1) when VerticalAnchor is Custom.

Declaration

public double VerticalAnchorPosition { get; set; }

Property Value

Type	Description
System.Double	The default value is 0. This value can be any value equal to or between 0 and less 1.

Remarks

If VerticalAlignment is Top and VerticalAnchorPosition is 0, the badge overlay positioned top side of content and placed within the bounds of badge container based on Vertical Anchor Position.

Refer VerticalAnchor to know more about placement.

VerticalPosition

Gets or sets the vertical alignment of the SfBadge in numerical precision (0 to 1) when loading badge control inside BadgeContainer. BadgeContainer uses VerticalAlignment to position the badge overlay when VerticalPosition value is NaN.

Declaration

public double VerticalPosition { get; set; }

Property Value

Type	Description
System.Double	The default value is `NaN`. This value can be any value equal to or between `0` and less `1`.

Remarks

The value 0 denotes VerticalAlignment.Top and 1 denotes VerticalAlignment.Bottom. The vertical alignment of badge overlay calculated using height of content in badge container and vertical position.

Examples

Following example shows changing of aligment using HorizontalPosition and VerticalPosition.

<syncfusion:BadgeContainer>
    <syncfusion:BadgeContainer.Content>
        <PersonPicture Width="100"
                       Height="100"
                       ProfilePicture="/Images/avatar.png"/>
    </syncfusion:BadgeContainer.Content>
    <syncfusion:BadgeContainer.Badge>
        <syncfusion:SfBadge Shape="None"
                            HorizontalPosition="0.9"
                            VerticalPosition="0.8">
            <Ellipse Width="20" Height="20" Fill="LimeGreen"/>
        </syncfusion:SfBadge>
    </syncfusion:BadgeContainer.Badge>
</syncfusion:BadgeContainer>

Methods

Dispose()

Release the unmanaged resources of SfBadge.

Declaration

public void Dispose()

Dispose(Boolean)

Release the unmanaged resources of SfBadge.

Declaration

protected virtual void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	Used to indicate perform dispose or not.

OnApplyTemplate()

Declaration

protected override void OnApplyTemplate()

OnContentChanged(Object, Object)

Declaration

protected override void OnContentChanged(object oldContent, object newContent)

Parameters

Type	Name	Description
System.Object	oldContent
System.Object	newContent

Implements

System.IDisposable