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.

Sign up for GitHub

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

chore: Use InfoBadge for TabBarItem badge support #1142

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

chore: Use InfoBadge for TabBarItem badge support #1142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fbdfb56
chore: Use InfoBadge for TabBarItem badge support
morning4coffe-dev May 16, 2024
f6636f4
chore: Implement BadgeVisibility and BadgeValue with WinUI InfoBadge
morning4coffe-dev Jun 2, 2024
c70012a
chore: Adjust placement of InfoBadge
morning4coffe-dev Jun 2, 2024
a7b9e3b
docs: Add `InfoBadge` option to docs
morning4coffe-dev Jun 4, 2024
1f472f0
chore: Note deprecated properties
morning4coffe-dev Jun 5, 2024
45eb8bc
chore: Add Deprecated attribute
morning4coffe-dev Jun 6, 2024
849d233
chore: Add missing System using
morning4coffe-dev Jun 6, 2024
c857c1a
Merge branch 'main' into dev/doti/add-infobadge-tabbaritem
morning4coffe-dev Jun 13, 2024
cf18db6
chore: Comment out Obsolete
morning4coffe-dev Jun 13, 2024
6e6e74c
chore: Minor InfoBadge adjustments
morning4coffe-dev Jun 13, 2024
d030058
docs: Adjust TabBarItem badge
morning4coffe-dev Jun 13, 2024
c83ea0f
Merge branch 'main' into dev/doti/add-infobadge-tabbaritem
morning4coffe-dev Jun 16, 2024
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 modified doc/assets/tabbaritem-winui-material-badges.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified doc/assets/tabbaritem-winui-material-largebadge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified doc/assets/tabbaritem-winui-material-smallbadge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/tabbaritem-winui-material-stylizedbadge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
89 changes: 59 additions & 30 deletions doc/controls/TabBarAndTabBarItem.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,19 @@ xmlns:utu="using:Uno.Toolkit.UI"

### 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 supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) |
| `BadgeVisibility` | `Visibility` | Gets or sets the badge visibility of the `TabBarItem`. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) |
| `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`. |
| `Icon` | `IconElement` | Gets or sets the icon of the `TabBarItem`. |
| `IsSelectable` | `bool` | Gets or sets whether the `TabBarItem` can be selected. |
| Property | Type | Description |
|---------------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `BadgeValue` (deprecated)* | `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 supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) |
| `BadgeVisibility` (deprecated)* | `Visibility` | Gets or sets the badge visibility of the `TabBarItem`. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) |
| `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`. |
| `Icon` | `IconElement` | Gets or sets the icon of the `TabBarItem`. |
| `InfoBadge` | `Control` | Gets or sets the `InfoBadge` control placed on the top right corner of the `TabBarItem`. (Currently only supported by the Material Theme Toolkit Library with `BottomTabBarItemStyle` and `VerticalTabBarItemStyle`) |
| `IsSelectable` | `bool` | Gets or sets whether the `TabBarItem` can be selected. |

> [!NOTE]
> *The properties `BadgeVisibility` and `BadgeValue` have been deprecated. They were previously used to control the badge visibility and value on the `TabBarItem`. If you need similar functionality, consider using the `InfoBadge` property.

### Events

Expand Down Expand Up @@ -458,19 +462,19 @@ xmlns:utu="using:Uno.Toolkit.UI"
![TabBar on Android using the BottomFabTabBarItemStyle](../assets/tabbar-android-material-bottom-fab.png)
![TabBar on Android using the BottomFabTabBarItemStyle with flyout opened](../assets/tabbar-android-material-bottom-fab-flyout.png)

#### Badge usage for the Material `TabBar` styles
#### `InfoBadge` usage for the Material `TabBar` styles

Icons in `TabBar` items can display badges in their upper right corners.
Icons in `TabBar` items can display `InfoBadge`s in their upper right corners.

Badges can contain dynamic information, such as the number of new messages.
`InfoBadge` can contain dynamic information, such as the number of new messages. You can find more information about the implementation [here](https://platform.uno/docs/articles/implemented/microsoft-ui-xaml-controls-infobadge.html).

Currently, only the Material Theme Toolkit Library contains a `BottomTabBarItemStyle` or `VerticalTabBarItemStyle` that you can use to display a badge (which is optional).
Currently, only the Material Theme Toolkit Library contains a `BottomTabBarItemStyle` or `VerticalTabBarItemStyle` that you can use to display the `InfoBadge` (which is optional).

![TabBar with Badge usage](../assets/tabbaritem-winui-material-badges.png)
![TabBar with `InfoBadge` usage](../assets/tabbaritem-winui-material-badges.png)

##### Small Badge
##### Small `InfoBadge`

A small badge uses only shape to indicate a status change or new notification.
A small `InfoBadge` uses only shape to indicate a status change or new notification.

![TabBar with small Badge](../assets/tabbaritem-winui-material-smallbadge.png)

Expand All @@ -479,31 +483,56 @@ 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.InfoBadge>
<muxc:InfoBadge />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
```

##### Large Badge
##### Large `InfoBadge`

A large badge displays a number within a container to indicate a quantifiable status change related to a destination.
A large `InfoBadge` displays a number within a container to indicate a quantifiable status change related to a destination.

![TabBar with large Badge](../assets/tabbaritem-winui-material-largebadge.png)
![TabBar with large `InfoBadge`](../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.InfoBadge>
<muxc:InfoBadge Value="8" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
```

##### Stylized `InfoBadge`

The `InfoBadge` can utilize a wide variety of styles to effectively convey the desired message to the user.

![TabBar with large `InfoBadge`](../assets/tabbaritem-winui-material-stylizedbadge.png)

```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

<utu:TabBarItem Content="About"
Style="{StaticResource BottomTabBarItemStyle}">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE946;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Value="42"
Style="{StaticResource CriticalIconInfoBadgeStyle}" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
```

Expand All @@ -526,14 +555,14 @@ xmlns:utu="using:Uno.Toolkit.UI"
| `FabTabBarItemIconTextPadding` | `Double` | 12 |
| `FabTabBarItemCornerRadius` | `CornerRadius` | 16 |
| `FabTabBarItemPadding` | `Thickness` | 20 |
| `NavigationTabBarItemSmallBadgeHeight` | `Double` | 6 |
| `NavigationTabBarItemSmallBadgeWidth` | `Double` | 6 |
| `NavigationTabBarItemSmallBadgeMargin` | `Thickness` | 0,4,20,0 |
| `NavigationTabBarItemLargeBadgeHeight` | `Double` | 16 |
| `NavigationTabBarItemLargeBadgeMinWidth` | `Double` | 16 |
| `NavigationTabBarItemLargeBadgeMargin` | `Thickness` | 32,2,0,0 |
| `NavigationTabBarItemLargeBadgePadding` | `Thickness` | 4,0 |
| `NavigationTabBarItemLargeBadgeCornerRadius` | `CornerRadius` | 8 |
| `NavigationTabBarItemSmallBadgeHeight` (deprecated) | `Double` | 6 |
| `NavigationTabBarItemSmallBadgeWidth` (deprecated) | `Double` | 6 |
| `NavigationTabBarItemSmallBadgeMargin` (deprecated) | `Thickness` | 0,4,20,0 |
| `NavigationTabBarItemLargeBadgeHeight` (deprecated) | `Double` | 16 |
| `NavigationTabBarItemLargeBadgeMinWidth` (deprecated) | `Double` | 16 |
| `NavigationTabBarItemLargeBadgeMargin` | `Thickness` | 0,3,13,0 |
| `NavigationTabBarItemLargeBadgePadding` (deprecated) | `Thickness` | 4,0 |
| `NavigationTabBarItemLargeBadgeCornerRadius` (deprecated) | `CornerRadius` | 8 |
| `VerticalTabBarBackground` | `SolidColorBrush` | SurfaceBrush |
| `BottomTabBarBackground` | `SolidColorBrush` | SurfaceBrush |
| `TopTabBarBackground` | `SolidColorBrush` | BackgroundBrush |
Expand Down
47 changes: 33 additions & 14 deletions ...les/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sample="using:Uno.Toolkit.Samples"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:utu="using:Uno.Toolkit.UI"
mc:Ignorable="d">

Expand Down Expand Up @@ -47,11 +48,18 @@
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE8F2;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Style="{StaticResource MaterialSmallInfoBadgeBottomTabBarItemStyle}" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
<utu:TabBarItem Content="ABOUT">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE946;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Value="42"
Style="{StaticResource MaterialLargeInfoBadgeBottomTabBarItemStyle}" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>

</utu:TabBar.Items>
Expand Down Expand Up @@ -457,25 +465,30 @@
<SymbolIcon Symbol="Home" />
</utu:TabBarItem.Icon>
</utu:TabBarItem>
<utu:TabBarItem Content="Favorites"
BadgeVisibility="Visible">
<utu:TabBarItem Content="Favorites">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE113;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
<utu:TabBarItem Content="Mail"
BadgeValue="8"
BadgeVisibility="Visible">
<utu:TabBarItem Content="Mail">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE119;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Value="8" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
<utu:TabBarItem Content="About"
BadgeValue="42"
BadgeVisibility="Visible">
<utu:TabBarItem Content="About">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE946;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Value="42"
Style="{StaticResource CriticalIconInfoBadgeStyle}" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>

</utu:TabBar.Items>
Expand Down Expand Up @@ -616,20 +629,26 @@
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE113;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
<utu:TabBarItem Content="Mail"
BadgeValue="8"
BadgeVisibility="Visible">
<utu:TabBarItem Content="Mail">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE119;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Value="8" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>
<utu:TabBarItem Content="About"
BadgeValue="42"
BadgeVisibility="Visible">
<utu:TabBarItem Content="About">
<utu:TabBarItem.Icon>
<FontIcon Glyph="&#xE946;" />
</utu:TabBarItem.Icon>
<utu:TabBarItem.InfoBadge>
<muxc:InfoBadge Value="42"
Style="{StaticResource CriticalIconInfoBadgeStyle}" />
</utu:TabBarItem.InfoBadge>
</utu:TabBarItem>

</utu:TabBar.Items>
Expand Down
Loading
Loading