WPF - How to use Badge in Mahapps HamburgerMenuItem - wpf

Question

Quick question for who known WPF:
How to add a badge in a Mahapps HamburgerMenuItem?
I use this template:
<DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type Controls:HamburgerMenuIconItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{Binding Icon}" />
</Rectangle.Fill>
</Rectangle>
</ContentControl>
<TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="White" Text="{Binding Label}" />
</Grid>
</DataTemplate>
And here is my Hamburger Items:
<Controls:HamburgerMenuItemCollection>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_home_variant}" Label="Home">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="HomeView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_people_status}" Label="Private" >
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="PrivateView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_page_onenote}" Label="Notes">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="NotesView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_cog}" Label="Settings">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="SettingsView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
</Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.ItemsSource>
Here what I am looking for:
HamburgerMenu Badge
Regards,

Answer 1

As I found here
You can wrap them arround your Icon.
<Controls:Badged Badge="{Binding Path=BadgeValue}" BadgePlacementMode="BottomRight">
<!-- Control to wrap goes here -->
<Button>
<iconPacks:PackIconFontAwesome Kind="CommentOutline"/>
</Button>
</Controls:Badged>
In your example it would be:
<Controls:Badged Badge="{Binding Path=BadgeValue}">
<Controls:HamburgerMenuIconItem Icon="{StaticResource appbar_home_variant}" Label="Home">
<Controls:HamburgerMenuIconItem.Tag>
<Grid Name="HomeView"></Grid>
</Controls:HamburgerMenuIconItem.Tag>
</Controls:HamburgerMenuIconItem>
</Controls:Badged>

Answer 2

it is possible. But it will get cut and does not look very good IMO
Example closed:
Example opened:
How to get it?:
Just wrap your Icon in the DataTemplate with a Badge:
<DataTemplate x:Key="HamburgerMenuItem" DataType="{x:Type Controls:HamburgerMenuGlyphItem}">
<DockPanel Height="48" LastChildFill="True">
<Controls:Badged x:Name="IconPart"
Width="48"
Badge="?"
BadgeBackground="Red"
DockPanel.Dock="Left">
<Image Margin="12"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Glyph}"
Stretch="UniformToFill" />
</Controls:Badged>
<TextBlock x:Name="TextPart"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Label}" />
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:HamburgerMenu}}, Path=PanePlacement}" Value="Right">
<Setter TargetName="IconPart" Property="DockPanel.Dock" Value="Right" />
<Setter TargetName="TextPart" Property="Margin" Value="8,0,0,0" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
You can modify this to your needs.
UPDATE: Here are additional information from the maintainer of MahApps: https://github.com/MahApps/MahApps.Metro/issues/3800#issuecomment-631103384
I hope this helps and happy coding
Tim