Alignment and Positioning in WPF Badge

18 Nov 201810 minutes to read

This section explains the alignment and positioning functionalities available in the WPF Badge control.

Alignment of WPF Badge

You can align the WPF Badge either horizontally or vertically by using the HorizontalAlignment or VerticalAlignment properties. The default value of the HorizontalAlignment property is Right and the VerticalAlignment property is Top.

HorizontalAlignment
VerticalAlignment Left Center Right Stretch
Top WPF Badge Left-Top Alignment WPF Badge Center-Top Alignment WPF Badge Right-Top Alignment WPF Badge Stretch-Top Alignment
Center WPF Badge Left-center Alignment WPF Badge Center-Center Alignment WPF Badge Right-Center Alignment WPF Badge Stretch-Center Alignment
Bottom WPF Badge Left-Bottom Alignment WPF Badge Center-Bottom Alignment WPF Badge Right-Bottom Alignment WPF Badge Stretch-Bottom Alignment
Stretch WPF Badge Left-Stretch Alignment WPF Badge Center-Stretch Alignment WPF Badge Right-Stretch Alignment WPF Badge Stretch-Stretch Alignment 
<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge HorizontalAlignment="Left"
                              VerticalAlignment="Center"
                              Content="99+"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.HorizontalAlignment = HorizontalAlignment.Left;
badge.VerticalAlignment = VerticalAlignment.Center;
badge.Content = "99+";

WPF Badge Alignment

Download demo application from GitHub

Positioning of WPF Badge

You can change the horizontal or vertical position of the WPF Badge to inside, center, outside, or custom by using the HorizontalAnchor and VerticalAnchor properties. The WPF Badge is placed based on the value of the HorizontalAlignment and VerticalAlignment properties. The default value of the HorizontalAnchor and VerticalAnchor properties is Center.

The table below shows the positioning behavior when HorizontalAlignment="Right" and VerticalAlignment="Top". The C# BadgeAnchor enum (API reference) provides the following values: Inside, Center, Outside, and Custom.

HorizontalAnchor VerticalAnchor Behavior on a Right / Top-aligned WPF Badge
Inside Inside The WPF Badge is moved into the container.
Center Inside The WPF Badge is centered on the horizontal edge.
Outside Inside The WPF Badge is moved out of the container.
Inside Center The WPF Badge is centered on the vertical edge.
Center Center The WPF Badge is centered on the corner.
Outside Center The WPF Badge is centered past the corner.
Inside Outside The WPF Badge is moved further into the container.
Center Outside The WPF Badge is centered further out.
Outside Outside The WPF Badge is moved furthest from the corner.
HorizontalAnchor
VerticalAnchor Inside Center OutSide
Inside WPF Badge Inside-Inside Positioning WPF Badge Center-Inside Positioning WPF Badge Outside-Inside Positioning
Center WPF Badge Inside-Center Positioning WPF Badge Center-Center Positioning WPF Badge Outside-Center Positioning
Outside WPF Badge Inside-Outside positioning WPF Badge Center-Outside positioning WPF Badge Outside-Outside positioning 
<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge HorizontalAnchor="Outside"
                              VerticalAnchor="Center"
                            Content="10"
                            x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.HorizontalAnchor = BadgeAnchor.Outside;
badge.VerticalAnchor = BadgeAnchor.Center;
badge.Content = "10";

WPF Badge Position

Download demo application from GitHub

Place the WPF Badge anywhere on the container

If you want to place the WPF Badge anywhere on any shaped container, use the HorizontalPosition or VerticalPosition properties. The values are relative to the WPF Badge’s parent container: 0 represents the left/top edge and 1 represents the right/bottom edge. The valid range is 0 to 1. The default value of the HorizontalPosition property is 1 and the VerticalPosition property is 0.

For example, if you use a circular container, you can easily place the WPF Badge anywhere on its perimeter by using the HorizontalPosition and VerticalPosition properties.

<Image Source="/Images/avatar.png"
       Width="100"
       Height="100" >
    <notification:SfBadge.Badge>
        <notification:SfBadge Shape="None"
                              HorizontalPosition="0.9"
                              VerticalPosition="0.8"
                              x:Name="badge">
            <notification:SfBadge.Content>
                <Ellipse Width="20"
                         Height="20"
                         Fill="LimeGreen"/>
            </notification:SfBadge.Content>
        </notification:SfBadge>
    </notification:SfBadge.Badge>
</Image>
badge.HorizontalPosition = 0.9;
badge.VerticalPosition = 0.8;

WPF Badge Custom Alignment

Download demo application from GitHub

Custom alignment and positioning of WPF Badge

You can customize the horizontal or vertical position of the WPF Badge to any point by using the HorizontalPosition and VerticalPosition properties together with the HorizontalAnchorPosition and VerticalAnchorPosition properties. This is effective only when the HorizontalAnchor and VerticalAnchor properties are set to Custom. The valid range for both HorizontalAnchorPosition and VerticalAnchorPosition properties is 0 to 1. The default value of the HorizontalAnchorPosition and VerticalAnchorPosition properties is 0.

HorizontalPosition & HorizontalAnchorPosition
VerticalPosition & VerticalAnchorPosition 0 0.5 1
0 WPF Badge Left-Top Custom Alignment WPF Badge Center-Top Custom Alignment WPF Badge Right-Top Custom Alignment
0.5 WPF Badge Left-center Custom Alignment WPF Badge Center-Center Custom Alignment WPF Badge Right-Center Custom Alignment
1 WPF Badge Left-Bottom Custom Alignment WPF Badge Center-Bottom Custom Alignment WPF Badge Right-Bottom Custom Alignment 
<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge HorizontalAnchor="Custom"
                              VerticalAnchor="Custom"
                              HorizontalAnchorPosition="0.2"
                              VerticalAnchorPosition="0.4"
                              Content="99+"
                              x:Name="badge2"/>
    </notification:SfBadge.Badge>
</Button>
badge.HorizontalAnchor = BadgeAnchor.Custom;
badge.VerticalAnchor = BadgeAnchor.Custom;
badge.HorizontalAnchorPosition = 0.2;
badge.VerticalAnchorPosition = 0.4;
badge.Content = "99+";

WPF Badge Custom Position

Download demo application from GitHub

WPF Badge content alignment

You can place the WPF Badge content either horizontally or vertically by using the HorizontalContentAlignment or VerticalContentAlignment properties. The default value of the HorizontalContentAlignment and VerticalContentAlignment properties is Center.

<Button Width="100"
        Height="50" 
        Content="Inbox">
    <notification:SfBadge.Badge>
        <notification:SfBadge HorizontalContentAlignment="Right"
                              VerticalContentAlignment="Center"
                              Content="10"
                              x:Name="badge"/>
    </notification:SfBadge.Badge>
</Button>
badge.HorizontalContentAlignment = HorizontalAlignment.Right;
badge.VerticalContentAlignment = VerticalAlignment.Center;
badge.Content = "99+";

WPF Badge Content Alignment

Download demo application from GitHub