diff --git a/doc/assets/tabbaritem-winui-material-badges.png b/doc/assets/tabbaritem-winui-material-badges.png index 022b2e580..f8ac9a0a5 100644 Binary files a/doc/assets/tabbaritem-winui-material-badges.png and b/doc/assets/tabbaritem-winui-material-badges.png differ diff --git a/doc/assets/tabbaritem-winui-material-largebadge.png b/doc/assets/tabbaritem-winui-material-largebadge.png index 97eb47086..00f2e973b 100644 Binary files a/doc/assets/tabbaritem-winui-material-largebadge.png and b/doc/assets/tabbaritem-winui-material-largebadge.png differ diff --git a/doc/assets/tabbaritem-winui-material-smallbadge.png b/doc/assets/tabbaritem-winui-material-smallbadge.png index e787229be..32a88deee 100644 Binary files a/doc/assets/tabbaritem-winui-material-smallbadge.png and b/doc/assets/tabbaritem-winui-material-smallbadge.png differ diff --git a/doc/assets/tabbaritem-winui-material-stylizedbadge.png b/doc/assets/tabbaritem-winui-material-stylizedbadge.png new file mode 100644 index 000000000..c1e19dd7c Binary files /dev/null and b/doc/assets/tabbaritem-winui-material-stylizedbadge.png differ diff --git a/doc/controls/TabBarAndTabBarItem.md b/doc/controls/TabBarAndTabBarItem.md index 0f3243694..624286e3a 100644 --- a/doc/controls/TabBarAndTabBarItem.md +++ b/doc/controls/TabBarAndTabBarItem.md @@ -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 @@ -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) @@ -479,31 +483,56 @@ xmlns:utu="using:Uno.Toolkit.UI" ... + + + ``` -##### 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" ... + + + + +``` + +##### 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" +... + + + + + + + + ``` @@ -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 | diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml index 1cf9d13a5..d88cc28a7 100644 --- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml +++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarSamplePage.xaml @@ -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"> @@ -47,11 +48,18 @@ + + + + + + @@ -457,25 +465,30 @@ - + + + + - + + + + - + + + + @@ -616,20 +629,26 @@ + + + - + + + + - + + + + diff --git a/src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs b/src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs index 293ceeeb6..4829ffb20 100644 --- a/src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs +++ b/src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs @@ -1,7 +1,6 @@ using System; -using System.Collections.Generic; -using System.Text; using System.Windows.Input; +using MUXC = Microsoft.UI.Xaml.Controls; #if IS_WINUI using Microsoft.UI.Xaml; @@ -29,26 +28,68 @@ public IconElement? Icon DependencyProperty.Register(nameof(Icon), typeof(IconElement), typeof(TabBarItem), new PropertyMetadata(null, OnPropertyChanged)); #endregion + // UNO TODO: Deprecate and remove BadgeVisibility and BadgeValue properties and use InfoBadge instead #region BadgeVisibility + // UNO TODO: Obsolete attribute is currently not working with generators, for more details see https://github.com/unoplatform/uno.csharpmarkup/issues/741 + // [Obsolete("This property is deprecated. Use InfoBadge instead.", true)] public Visibility BadgeVisibility { - get { return (Visibility)GetValue(BadgeVisibilityProperty); } - set { SetValue(BadgeVisibilityProperty, value); } + get => InfoBadge?.Visibility ?? (Visibility)GetValue(BadgeVisibilityProperty); + set + { + SetValue(BadgeVisibilityProperty, value); + + InfoBadge ??= new MUXC.InfoBadge(); + InfoBadge.Visibility = value; + } } + // UNO TODO: Obsolete attribute is currently not working with generators, for more details see https://github.com/unoplatform/uno.csharpmarkup/issues/741 + // [Obsolete("This property is deprecated. Use InfoBadge instead.", true)] public static readonly DependencyProperty BadgeVisibilityProperty = - DependencyProperty.Register("BadgeVisibility", typeof(Visibility), typeof(TabBarItem), new PropertyMetadata(Visibility.Collapsed, OnPropertyChanged)); + DependencyProperty.Register(nameof(BadgeVisibility), typeof(Visibility), typeof(TabBarItem), new PropertyMetadata(Visibility.Collapsed, OnPropertyChanged)); #endregion #region BadgeValue + // UNO TODO: Obsolete attribute is currently not working with generators, for more details see https://github.com/unoplatform/uno.csharpmarkup/issues/741 + // [Obsolete("This property is deprecated. Use InfoBadge instead.", true)] public string? BadgeValue { - get { return (string)GetValue(BadgeValueProperty); } - set { SetValue(BadgeValueProperty, value); } + get => (InfoBadge as MUXC.InfoBadge)?.Value.ToString() ?? (string)GetValue(BadgeValueProperty); + set + { + SetValue(BadgeValueProperty, value); + + InfoBadge ??= new MUXC.InfoBadge(); + + if (InfoBadge is MUXC.InfoBadge infoBadge) + { + if (int.TryParse(value, out int intValue)) + { + infoBadge.Value = intValue; + } + else + { + infoBadge.IconSource = new MUXC.FontIconSource { Glyph = value }; + } + } + } } - + // UNO TODO: Obsolete attribute is currently not working with generators, for more details see https://github.com/unoplatform/uno.csharpmarkup/issues/741 + // [Obsolete("This property is deprecated. Use InfoBadge instead.", true)] public static readonly DependencyProperty BadgeValueProperty = - DependencyProperty.Register("BadgeValue", typeof(string), typeof(TabBarItem), new PropertyMetadata(default(string?), OnPropertyChanged)); + DependencyProperty.Register(nameof(BadgeValue), typeof(string), typeof(TabBarItem), new PropertyMetadata(default(string?), OnPropertyChanged)); + #endregion + + #region InfoBadge + public Control InfoBadge + { + get => (Control)GetValue(InfoBadgeProperty); + set => SetValue(InfoBadgeProperty, value); + } + + public static readonly DependencyProperty InfoBadgeProperty = + DependencyProperty.Register(nameof(InfoBadge), typeof(Control), typeof(TabBarItem), new PropertyMetadata(null, OnPropertyChanged)); #endregion #region IsSelectable diff --git a/src/library/Uno.Toolkit.Material/Styles/Controls/v2/InfoBadge.xaml b/src/library/Uno.Toolkit.Material/Styles/Controls/v2/InfoBadge.xaml new file mode 100644 index 000000000..d787dbfd8 --- /dev/null +++ b/src/library/Uno.Toolkit.Material/Styles/Controls/v2/InfoBadge.xaml @@ -0,0 +1,72 @@ + + + + + + + + + + 6 + 6 + 0,4,20,0 + + + + 16 + 32,4,0,0 + 8 + + + + + + diff --git a/src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml b/src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml index 153b734b0..c028bd64f 100644 --- a/src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml +++ b/src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml @@ -44,7 +44,7 @@ 16 16 - 32,2,0,0 + 0,3,13,0 4,0 8 @@ -240,7 +240,7 @@ 16 16 - 32,2,0,0 + 0,3,13,0 4,0 8 @@ -698,44 +698,16 @@ - - - - - - - - - - - - - - - + + + +