feat: Implement Badge for TabBarItem (#296)

unoplatform · Aug 29, 2022 · 33432e4 · 33432e4
1 parent 4b0a92b
commit 33432e4
Show file tree

Hide file tree

Showing 25 changed files with 233 additions and 46 deletions.
diff --git a/doc/assets/tabbaritem-winui-material-badges.png b/doc/assets/tabbaritem-winui-material-badges.png
diff --git a/doc/assets/tabbaritem-winui-material-largebadge.png b/doc/assets/tabbaritem-winui-material-largebadge.png
diff --git a/doc/assets/tabbaritem-winui-material-smallbadge.png b/doc/assets/tabbaritem-winui-material-smallbadge.png
diff --git a/doc/controls/TabBarAndTabBarItem.md b/doc/controls/TabBarAndTabBarItem.md
@@ -37,6 +37,8 @@ Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#859
 ### Properties
 Property|Type|Description
 -|-|-
+BadgeValue|string|Gets or sets the value to be displayed in the badge of the `TabBarItem`. If a value is set the large badge will be displayed otherwise it will be the small badge. (Currently only usable with the Material Theme Toolkit Library with the `BottomTabBarItem` style)
+BadgeVisibility|Visibility|Gets or sets the badge visibility of the `TabBarItem`. (Currently only usable with the Material Theme Toolkit Library with the `BottomTabBarItem` style)
 Command|ICommand|Gets or sets the command to invoke when the `TabBarItem` is pressed.
 CommandParameter|object|Gets or sets the parameter to pass to the `Command` property.
 Flyout|double|Gets or sets the flyout associated with this `TabBarItem`.
@@ -278,3 +280,49 @@ xmlns:utu="using:Uno.Toolkit.UI"
 
 ![](../assets/tabbar-android-material-bottom-fab.png)
 ![](../assets/tabbar-android-material-bottom-fab-flyout.png)
+
+#### Badge usage for the Material `BottomTabBarItem` Style
+Icons in `TabBar` items can display badges in their upper right corners. 
+
+Badges can contain dynamic information, such as the number of new messages.
+
+Currently, only the Material Theme Toolkit Library contains a `BottomTabBarItemStyle` that you can use to display a badge (which is optional).
+
+![](../assets/tabbaritem-winui-material-badges.png)
+
+##### Small Badge
+A small badge uses only shape to indicate a status change or new notification.
+
+![](../assets/tabbaritem-winui-material-smallbadge.png)
+
+```xml
+xmlns:utu="using:Uno.Toolkit.UI"
+...
+
+<utu:TabBarItem Content="Favorites"
+				BadgeVisibility="Visible"
+				Style="{StaticResource BottomTabBarItemStyle}">
+	<utu:TabBarItem.Icon>
+		<FontIcon Glyph="&#xE113;" />
+	</utu:TabBarItem.Icon>
+</utu:TabBarItem>
+```
+
+##### Large Badge
+A large badge displays a number within a container to indicate a quantifiable status change related to a destination.
+
+![](../assets/tabbaritem-winui-material-largebadge.png)
+
+```xml
+xmlns:utu="using:Uno.Toolkit.UI"
+...
+
+<utu:TabBarItem Content="Mail"
+				BadgeValue="8"
+				BadgeVisibility="Visible"
+				Style="{StaticResource BottomTabBarItemStyle}">
+	<utu:TabBarItem.Icon>
+		<FontIcon Glyph="&#xE119;" />
+	</utu:TabBarItem.Icon>
+</utu:TabBarItem>
+```
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Droid/Uno.Toolkit.Samples.Droid.csproj b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Droid/Uno.Toolkit.Samples.Droid.csproj
@@ -66,10 +66,10 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Uno.Cupertino">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.Material">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.UI" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.UI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />

diff --git a/...les/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml b/...les/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml
@@ -421,12 +421,22 @@
 									<FontIcon Glyph="&#xE80F;" />
 								</utu:TabBarItem.Icon>
 							</utu:TabBarItem>
-							<utu:TabBarItem Content="Support">
+							<utu:TabBarItem Content="Favorites"
+											BadgeVisibility="Visible">
 								<utu:TabBarItem.Icon>
-									<FontIcon Glyph="&#xE8F2;" />
+									<FontIcon Glyph="&#xE113;" />
 								</utu:TabBarItem.Icon>
 							</utu:TabBarItem>
-							<utu:TabBarItem Content="About">
+							<utu:TabBarItem Content="Mail"
+											BadgeValue="8"
+											BadgeVisibility="Visible">
+								<utu:TabBarItem.Icon>
+										<FontIcon Glyph="&#xE119;" />
+								</utu:TabBarItem.Icon>
+							</utu:TabBarItem>
+							<utu:TabBarItem Content="About"
+											BadgeValue="42"
+											BadgeVisibility="Visible">
 								<utu:TabBarItem.Icon>
 									<FontIcon Glyph="&#xE946;" />
 								</utu:TabBarItem.Icon>

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Skia.Gtk/Uno.Toolkit.Samples.Skia.Gtk.csproj b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Skia.Gtk/Uno.Toolkit.Samples.Skia.Gtk.csproj
@@ -29,8 +29,8 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Logging" Version="5.0.0" />
     <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="5.0.0" />
-    <PackageReference Include="Uno.Cupertino" Version="2.3.0-dev.4" />
-    <PackageReference Include="Uno.Material" Version="2.3.0-dev.4" />
+    <PackageReference Include="Uno.Cupertino" Version="2.3.0-dev.6" />
+    <PackageReference Include="Uno.Material" Version="2.3.0-dev.6" />
     <PackageReference Include="Uno.UI.Skia.Gtk" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.UI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />
 		<PackageReference Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.5.0-dev.453" />

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.UWP/Uno.Toolkit.Samples.UWP.csproj b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.UWP/Uno.Toolkit.Samples.UWP.csproj
@@ -12,10 +12,10 @@
     </PackageReference>
     <PackageReference Include="Microsoft.UI.Xaml" Version="2.6.0-prerelease.210623001" />
     <PackageReference Include="Uno.Cupertino">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.Material">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.UI" Version="4.5.0-dev.453" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="5.0.0" />

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Wasm/Uno.Toolkit.Samples.Wasm.csproj b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Wasm/Uno.Toolkit.Samples.Wasm.csproj
@@ -42,9 +42,9 @@
 	</ItemGroup>
 	<ItemGroup>
 		<PackageReference Include="Microsoft.Extensions.Logging" Version="5.0.0" />
-		<PackageReference Include="Uno.Cupertino" Version="2.3.0-dev.4" />
+		<PackageReference Include="Uno.Cupertino" Version="2.3.0-dev.6" />
 		<PackageReference Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.3.0-dev.1" />
-		<PackageReference Include="Uno.Material" Version="2.3.0-dev.4" />
+		<PackageReference Include="Uno.Material" Version="2.3.0-dev.6" />
 		<PackageReference Include="Uno.UI.WebAssembly" Version="4.5.0-dev.453" />
 		<PackageReference Include="Uno.UI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />
 		<PackageReference Include="Uno.Wasm.Bootstrap" Version="4.0.0-dev.174" />

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.iOS/Uno.Toolkit.Samples.iOS.csproj b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.iOS/Uno.Toolkit.Samples.iOS.csproj
@@ -191,10 +191,10 @@
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
     <PackageReference Include="Uno.Cupertino">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.Material">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.UI" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.UI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />

diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.macOS/Uno.Toolkit.Samples.macOS.csproj b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.macOS/Uno.Toolkit.Samples.macOS.csproj
@@ -75,10 +75,10 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Uno.Cupertino">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.Material">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.UI" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.UI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />

diff --git a/...lkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.Droid/Uno.Toolkit.WinUI.Samples.Droid.csproj b/...lkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.Droid/Uno.Toolkit.WinUI.Samples.Droid.csproj
@@ -71,7 +71,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Uno.Material.WinUI">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.WinUI" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.WinUI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />

diff --git a/...inUI.Samples/Uno.Toolkit.WinUI.Samples.Skia.Gtk/Uno.Toolkit.WinUI.Samples.Skia.Gtk.csproj b/...inUI.Samples/Uno.Toolkit.WinUI.Samples.Skia.Gtk/Uno.Toolkit.WinUI.Samples.Skia.Gtk.csproj
@@ -34,7 +34,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Logging" Version="5.0.0" />
     <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="5.0.0" />
-    <PackageReference Include="Uno.Material.WinUI" Version="2.3.0-dev.4" />
+    <PackageReference Include="Uno.Material.WinUI" Version="2.3.0-dev.6" />
     <PackageReference Include="Uno.WinUI.Skia.Gtk" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.WinUI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />
 		<PackageReference Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.5.0-dev.453" />

diff --git a/...oolkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.Wasm/Uno.Toolkit.WinUI.Samples.Wasm.csproj b/...oolkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.Wasm/Uno.Toolkit.WinUI.Samples.Wasm.csproj
@@ -42,7 +42,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Logging" Version="5.0.0" />
     <PackageReference Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.3.0-dev.1" />
-    <PackageReference Include="Uno.Material.WinUI" Version="2.3.0-dev.4" />
+    <PackageReference Include="Uno.Material.WinUI" Version="2.3.0-dev.6" />
     <PackageReference Include="Uno.WinUI.WebAssembly" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.WinUI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />
 	  <PackageReference Include="Uno.Wasm.Bootstrap" Version="4.0.0-dev.174" />

diff --git a/...no.Toolkit.WinUI.Samples.Windows.Desktop/Uno.Toolkit.WinUI.Samples.Windows.Desktop.csproj b/...no.Toolkit.WinUI.Samples.Windows.Desktop/Uno.Toolkit.WinUI.Samples.Windows.Desktop.csproj
@@ -18,7 +18,7 @@
 		<PackageReference Include="Microsoft.Extensions.Logging.Console" Version="5.0.0" />
 		<PackageReference Include="Uno.Core.Extensions.Compatibility" Version="4.0.1" />
 		<PackageReference Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
-		<PackageReference Include="Uno.Material.WinUI" Version="2.3.0-dev.4" />
+		<PackageReference Include="Uno.Material.WinUI" Version="2.3.0-dev.6" />
 	</ItemGroup>
 
 	<ItemGroup>

diff --git a/....Toolkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.iOS/Uno.Toolkit.WinUI.Samples.iOS.csproj b/....Toolkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.iOS/Uno.Toolkit.WinUI.Samples.iOS.csproj
@@ -124,7 +124,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Uno.Material.WinUI">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.WinUI" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.WinUI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />

diff --git a/...lkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.macOS/Uno.Toolkit.WinUI.Samples.macOS.csproj b/...lkit.WinUI.Samples/Uno.Toolkit.WinUI.Samples.macOS/Uno.Toolkit.WinUI.Samples.macOS.csproj
@@ -74,7 +74,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Uno.Material.WinUI">
-      <Version>2.3.0-dev.4</Version>
+      <Version>2.3.0-dev.6</Version>
     </PackageReference>
     <PackageReference Include="Uno.WinUI" Version="4.5.0-dev.453" />
     <PackageReference Include="Uno.WinUI.RemoteControl" Version="4.5.0-dev.453" Condition="'$(Configuration)'=='Debug'" />

diff --git a/src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs b/src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs
@@ -29,6 +29,28 @@ partial class TabBarItem
 			DependencyProperty.Register(nameof(Icon), typeof(IconElement), typeof(TabBarItem), new PropertyMetadata(null, OnPropertyChanged));
 		#endregion
 
+		#region BadgeVisibility
+		public Visibility BadgeVisibility
+		{
+			get { return (Visibility)GetValue(BadgeVisibilityProperty); }
+			set { SetValue(BadgeVisibilityProperty, value); }
+		}
+
+		public static readonly DependencyProperty BadgeVisibilityProperty =
+			DependencyProperty.Register("BadgeVisibility", typeof(Visibility), typeof(TabBarItem), new PropertyMetadata(Visibility.Collapsed, OnPropertyChanged));
+		#endregion
+
+		#region BadgeValue
+		public string? BadgeValue
+		{
+			get { return (string)GetValue(BadgeValueProperty); }
+			set { SetValue(BadgeValueProperty, value); }
+		}
+
+		public static readonly DependencyProperty BadgeValueProperty =
+			DependencyProperty.Register("BadgeValue", typeof(string), typeof(TabBarItem), new PropertyMetadata(default(string?), OnPropertyChanged));
+		#endregion
+
 		#region IsSelectable
 		public bool IsSelectable
 		{

diff --git a/src/library/Uno.Toolkit.Cupertino/Uno.Toolkit.UI.Cupertino.csproj b/src/library/Uno.Toolkit.Cupertino/Uno.Toolkit.UI.Cupertino.csproj
@@ -15,7 +15,7 @@
 	</PropertyGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Uno.Cupertino" Version="2.3.0-dev.4" />
+		<PackageReference Include="Uno.Cupertino" Version="2.3.0-dev.6" />
 		<PackageReference Include="Uno.UI" Version="4.5.0-dev.453" />
 	</ItemGroup>
 

diff --git a/src/library/Uno.Toolkit.Cupertino/Uno.Toolkit.WinUI.Cupertino.csproj b/src/library/Uno.Toolkit.Cupertino/Uno.Toolkit.WinUI.Cupertino.csproj
@@ -17,7 +17,7 @@
 	</PropertyGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Uno.Cupertino.WinUI" Version="2.3.0-dev.4" />
+		<PackageReference Include="Uno.Cupertino.WinUI" Version="2.3.0-dev.6" />
 		<PackageReference Include="Uno.WinUI" Version="4.5.0-dev.453" />
 	</ItemGroup>
 

diff --git a/src/library/Uno.Toolkit.Material/Generated/mergedpages.uwp.v2.xaml b/src/library/Uno.Toolkit.Material/Generated/mergedpages.uwp.v2.xaml
@@ -42,11 +42,22 @@
   <Thickness x:Key="MaterialBottomTabBarItemPadding">0,12,0,16</Thickness>
   <Thickness x:Key="MaterialBottomTabBarItemContentOnlyMargin">12,0</Thickness>
   <CornerRadius x:Key="MaterialBottomTabBarItemActiveIndicatorCornerRadius">16</CornerRadius>
-  <Thickness x:Key="MaterialBottomTabBarItemActiveIndicatorPadding">22,7</Thickness>
+  <x:Double x:Key="MaterialBottomTabBarItemActiveIndicatorWidth">64</x:Double>
+  <x:Double x:Key="MaterialBottomTabBarItemActiveIndicatorHeight">32</x:Double>
   <Thickness x:Key="MaterialBottomFabTabBarItemPadding">20</Thickness>
   <x:Double x:Key="MaterialBottomFabTabBarItemContentWidthOrHeight">16</x:Double>
   <CornerRadius x:Key="MaterialBottomFabTabBarItemCornerRadius">16</CornerRadius>
   <x:Double x:Key="MaterialBottomFabTabBarItemIconTextPadding">12</x:Double>
+  <StaticResource x:Key="MaterialBottomTabBarItemBadgeBackground" ResourceKey="ErrorBrush" />
+  <StaticResource x:Key="MaterialBottomTabBarItemBadgeForeground" ResourceKey="OnErrorBrush" />
+  <x:Double x:Key="MaterialBottomTabBarItemSmallBadgeHeight">6</x:Double>
+  <x:Double x:Key="MaterialBottomTabBarItemSmallBadgeWidth">6</x:Double>
+  <Thickness x:Key="MaterialBottomTabBarItemSmallBadgeMargin">0,4,20,0</Thickness>
+  <x:Double x:Key="MaterialBottomTabBarItemLargeBadgeHeight">16</x:Double>
+  <x:Double x:Key="MaterialBottomTabBarItemLargeBadgeMinWidth">16</x:Double>
+  <Thickness x:Key="MaterialBottomTabBarItemLargeBadgeMargin">32,2,0,0</Thickness>
+  <Thickness x:Key="MaterialBottomTabBarItemLargeBadgePadding">4,0</Thickness>
+  <CornerRadius x:Key="MaterialBottomTabBarItemLargeBadgeCornerRadius">8</CornerRadius>
   <Style x:Key="MaterialBottomTabBarStyle" TargetType="utu:TabBar">
     <Setter Property="Background" Value="{ThemeResource MaterialBottomTabBarBackground}" />
     <Setter Property="IsTabStop" Value="False" />
@@ -242,12 +253,24 @@
                       <RowDefinition x:Name="IconRow" Height="*" />
                       <RowDefinition x:Name="ContentRow" Height="Auto" />
                     </Grid.RowDefinitions>
-                    <Grid x:Name="ActiveIndicator" Background="{StaticResource MaterialBottomTabBarItemActiveIndicatorBackground}" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="{StaticResource MaterialBottomTabBarItemActiveIndicatorPadding}" CornerRadius="{StaticResource MaterialBottomTabBarItemActiveIndicatorCornerRadius}">
-                      <Border Width="{StaticResource MaterialBottomTabBarItemIconWidth}" Height="{StaticResource MaterialBottomTabBarItemIconHeight}">
+                    <Grid x:Name="ActiveIndicator" Background="{StaticResource MaterialBottomTabBarItemActiveIndicatorBackground}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="{StaticResource MaterialBottomTabBarItemActiveIndicatorHeight}" Width="{StaticResource MaterialBottomTabBarItemActiveIndicatorWidth}" CornerRadius="{StaticResource MaterialBottomTabBarItemActiveIndicatorCornerRadius}">
+                      <Border Width="{StaticResource MaterialBottomTabBarItemIconWidth}" Height="{StaticResource MaterialBottomTabBarItemIconHeight}" VerticalAlignment="Center" HorizontalAlignment="Center">
                         <Viewbox x:Name="IconBox" HorizontalAlignment="Center">
                           <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Foreground="{StaticResource MaterialBottomTabBarItemIconForeground}" />
                         </Viewbox>
                       </Border>
+                      <!-- BADGE -->
+                      <!-- This part can be replaced when InfoBadge will be available in WinUI3 -->
+                      <!-- See this commit for the implementation: c935919b2c390014dd8509cc50e16b1549511ffa -->
+                      <!-- (Related Branch: dev/agzi/I274-InfoBadgeImplementationForTBI) -->
+                      <Grid Visibility="{TemplateBinding BadgeVisibility}">
+                        <!-- Small Badge -->
+                        <Ellipse Height="{StaticResource MaterialBottomTabBarItemSmallBadgeHeight}" Width="{StaticResource MaterialBottomTabBarItemSmallBadgeWidth}" Margin="{StaticResource MaterialBottomTabBarItemSmallBadgeMargin}" HorizontalAlignment="Right" VerticalAlignment="Top" Fill="{StaticResource MaterialBottomTabBarItemBadgeBackground}" Visibility="{Binding BadgeValue, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyOrNullToVisible}}" />
+                        <!-- Large Badge -->
+                        <Border Height="{StaticResource MaterialBottomTabBarItemLargeBadgeHeight}" MinWidth="{StaticResource MaterialBottomTabBarItemLargeBadgeMinWidth}" Padding="{StaticResource MaterialBottomTabBarItemLargeBadgePadding}" Margin="{StaticResource MaterialBottomTabBarItemLargeBadgeMargin}" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="{StaticResource MaterialBottomTabBarItemLargeBadgeCornerRadius}" Background="{StaticResource MaterialBottomTabBarItemBadgeBackground}" Visibility="{Binding BadgeValue, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyOrNullToCollapsed}}">
+                          <TextBlock Text="{TemplateBinding BadgeValue}" MaxLines="1" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource MaterialBottomTabBarItemBadgeForeground}" Style="{StaticResource LabelExtraSmall}" />
+                        </Border>
+                      </Grid>
                     </Grid>
                     <ContentPresenter x:Name="ContentPresenter" Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentTransitions="{TemplateBinding ContentTransitions}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" TextWrapping="NoWrap" />
                   </Grid>