Icon Badge on Fluent Ribbon button control in WPF - wpf

Question

I am new to WPF and trying to show badge at the top right corner of button image. Button is being displayed on Fluent ribbon. I have come across nir's answer here which looks good but i don't know how to apply this to button control.
iPhone like red badge notification in a WPF project?
<Page x:Class="Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1">
<Page.Resources>
<Style TargetType="Label" x:Key="CircularLabel">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="13" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Margin="0 3 0 -3" Fill="LightGray"
RadiusX="11" RadiusY="11" Opacity="0.8"/>
<Border CornerRadius="11"
BorderBrush="DarkGray"
BorderThickness="1">
<Border
HorizontalAlignment="Center"
VerticalAlignment="Center" CornerRadius="10"
Background="#FFC90000"
BorderBrush="White"
BorderThickness="2">
<Grid>
<ContentPresenter
HorizontalAlignment="Center" VerticalAlignment="Center"
Content="{TemplateBinding Content}" Margin="5 1 6 1"/>
<Rectangle x:Name="TopShine" RadiusX="9" RadiusY="9"
VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.6">
<GradientStop Color="White" Offset="0.2" />
<GradientStop Color="Transparent" Offset="0.7" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<UniformGrid>
<Label Style="{StaticResource CircularLabel}">2000</Label>
</UniformGrid>
</Grid>
Here is the button control on which i am trying to apply badge.
<Fluent:RibbonGroupBox Fluent:KeyTip.Keys="C" Header="">
<Fluent:Button Fluent:KeyTip.Keys="LC" Header=" Transactions" Name="btnTransactions" MinHeight="67" Icon="Images/transferbig.gif" LargeIcon="Images/transfer.gif" FontWeight="Normal"></Fluent:Button>
</Fluent:RibbonGroupBox>
Please do advise if there is any other way of doing it which is compatible with windows 7 , 8 and 10.
I have come across this https://mahapps.com/controls/badged-control.html which i believe open for anyone to use it but not sure if it works with windows 8.

Answer 1

If I understand your question correctly you could put the Label on top of the Button and adjust its position using the Margin property, e.g.:
<Fluent:RibbonGroupBox Fluent:KeyTip.Keys="C" Header="" ClipToBounds="False" Margin="10">
<Grid>
<Fluent:Button Fluent:KeyTip.Keys="LC" Header=" Transactions" Name="btnTransactions" MinHeight="67" FontWeight="Normal" />
<Label Style="{StaticResource CircularLabel}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-8,-8,0">2000</Label>
</Grid>
</Fluent:RibbonGroupBox>
This should give you a badge at the top-right corner of the Button.