Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Implement Badge for TabBarItem #296

Merged
merged 1 commit into from
Aug 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added doc/assets/tabbaritem-winui-material-badges.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions doc/controls/TabBarAndTabBarItem.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ Object → DependencyObject → UIElement → 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`.
Expand Down Expand Up @@ -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>
```
Original file line number Diff line number Diff line change
Expand Up @@ -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'" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'" />
Expand Down
22 changes: 22 additions & 0 deletions src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,28 @@ partial class TabBarItem
DependencyProperty.Register(nameof(Icon), typeof(IconElement), typeof(TabBarItem), new PropertyMetadata(null, OnPropertyChanged));
#endregion

#region BadgeVisibility
agneszitte marked this conversation as resolved.
Show resolved Hide resolved
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
kazo0 marked this conversation as resolved.
Show resolved Hide resolved

#region IsSelectable
public bool IsSelectable
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
29 changes: 26 additions & 3 deletions src/library/Uno.Toolkit.Material/Generated/mergedpages.uwp.v2.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down
Loading