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 3 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
8 changes: 8 additions & 0 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
53 changes: 43 additions & 10 deletions src/Uno.Toolkit.UI/Controls/TabBar/TabBarItem.Properties.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
using System.Windows.Input;
using MUXC = Microsoft.UI.Xaml.Controls;

#if IS_WINUI
using Microsoft.UI.Xaml;
Expand Down Expand Up @@ -29,26 +27,61 @@ 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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have an issue to track in Toolkit to do this for the next major version bump?

Do we have docs written in the migration section for this deprecation or recommendation to use InfoBadge explicitly?

Copy link
Member Author

@morning4coffe-dev morning4coffe-dev Jul 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @kazo0, I will take a look 👍

public Visibility BadgeVisibility
morning4coffe-dev marked this conversation as resolved.
Show resolved Hide resolved
{
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;
}
}

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
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 };
}
}
}
}

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
MartinZikmund marked this conversation as resolved.
Show resolved Hide resolved
morning4coffe-dev marked this conversation as resolved.
Show resolved Hide resolved
{
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
morning4coffe-dev marked this conversation as resolved.
Show resolved Hide resolved

#region IsSelectable
Expand Down
72 changes: 72 additions & 0 deletions src/library/Uno.Toolkit.Material/Styles/Controls/v2/InfoBadge.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">

<!-- InfoBadge BottomTabBarItem Resources and Styles -->

<!-- Common -->
<StaticResource x:Key="MaterialInfoBadgeBottomTabBarItemBackground"
ResourceKey="ErrorBrush" />
<StaticResource x:Key="MaterialInfoBadgeBottomTabBarItemForeground"
ResourceKey="OnErrorBrush" />

<!-- Small InfoBadge-->
<x:Double x:Key="MaterialSmallInfoBadgeBottomTabBarItemHeight">6</x:Double>
<x:Double x:Key="MaterialSmallInfoBadgeBottomTabBarItemWidth">6</x:Double>
<Thickness x:Key="MaterialSmallInfoBadgeBottomTabBarItemMargin">0,4,20,0</Thickness>


<!-- Large InfoBadge-->
<x:Double x:Key="MaterialLargeInfoBadgeBottomTabBarItemHeight">16</x:Double>
<Thickness x:Key="MaterialLargeInfoBadgeBottomTabBarItemMargin">32,4,0,0</Thickness>
<CornerRadius x:Key="MaterialLargeInfoBadgeBottomTabBarItemCornerRadius">8</CornerRadius>
Comment on lines +11 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These need to be inside of ThemeDictionaries to be able to be overridden via lightweight styling


<Style x:Key="MaterialSmallInfoBadgeBottomTabBarItemStyle"
TargetType="muxc:InfoBadge">
<Setter Property="Background"
Value="{ThemeResource MaterialInfoBadgeBottomTabBarItemBackground}" />
<Setter Property="HorizontalAlignment"
Value="Right" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="Height"
Value="{ThemeResource MaterialSmallInfoBadgeBottomTabBarItemHeight}" />
<Setter Property="Width"
Value="{ThemeResource MaterialSmallInfoBadgeBottomTabBarItemWidth}" />
<Setter Property="Margin"
Value="{ThemeResource MaterialSmallInfoBadgeBottomTabBarItemMargin}" />
</Style>

<Style x:Key="MaterialLargeInfoBadgeBottomTabBarItemStyle"
TargetType="muxc:InfoBadge">
<Setter Property="Background"
Value="{ThemeResource MaterialInfoBadgeBottomTabBarItemBackground}" />
<Setter Property="Foreground"
Value="{ThemeResource MaterialInfoBadgeBottomTabBarItemForeground}" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Height"
Value="{ThemeResource MaterialLargeInfoBadgeBottomTabBarItemHeight}" />
<Setter Property="Margin"
Value="{ThemeResource MaterialLargeInfoBadgeBottomTabBarItemMargin}" />
<Setter Property="CornerRadius"
Value="{ThemeResource MaterialLargeInfoBadgeBottomTabBarItemCornerRadius}" />
<!-- Label ExtraSmall -->
<Setter Property="FontFamily"
Value="{StaticResource MaterialLabelSmallFontFamily}" />
<Setter Property="FontWeight"
Value="{StaticResource MaterialLabelSmallFontWeight}" />
<Setter Property="FontSize"
Value="{StaticResource MaterialLabelSmallFontSize}" />
<Setter Property="CharacterSpacing"
Value="{StaticResource MaterialLabelSmallCharacterSpacing}" />
</Style>

</ResourceDictionary>
48 changes: 10 additions & 38 deletions src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -698,44 +698,16 @@
</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
Width="{ThemeResource NavigationTabBarItemSmallBadgeWidth}"
Height="{ThemeResource NavigationTabBarItemSmallBadgeHeight}"
Margin="{ThemeResource NavigationTabBarItemSmallBadgeMargin}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Fill="{ThemeResource NavigationTabBarItemErrorBrush}"
Visibility="{Binding BadgeValue, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyOrNullToVisibleConverter}}" />

<!-- Large Badge -->
<Border
Height="{ThemeResource NavigationTabBarItemLargeBadgeHeight}"
MinWidth="{ThemeResource NavigationTabBarItemLargeBadgeMinWidth}"
Margin="{ThemeResource NavigationTabBarItemLargeBadgeMargin}"
Padding="{ThemeResource NavigationTabBarItemLargeBadgePadding}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="{ThemeResource NavigationTabBarItemErrorBrush}"
CornerRadius="{ThemeResource NavigationTabBarItemLargeBadgeCornerRadius}"
Visibility="{Binding BadgeValue, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyOrNullToCollapsedConverter}}">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{ThemeResource NavigationTabBarItemOnErrorBrush}"
MaxLines="1"
Style="{StaticResource LabelExtraSmall}"
Text="{TemplateBinding BadgeValue}"
TextAlignment="Center" />
</Border>
</Grid>

</Grid>
<!-- InfoBadge Presenter -->
<ContentPresenter x:Name="InfoBadgePresenter"
Content="{TemplateBinding InfoBadge}"
Margin="{ThemeResource NavigationTabBarItemLargeBadgeMargin}"
Padding="{ThemeResource NavigationTabBarItemLargeBadgePadding}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Visibility="{Binding InfoBadge, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialEmptyOrNullToCollapsed}}" />

</Grid>

<ContentPresenter
x:Name="ContentPresenter"
Expand Down
Loading