menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfBadge - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved