Playing with Maui - Badge on TabBar
Ho scoperto che per MAUI, al contrario di Xamarin, non esiste ancora un plugin che consenta di aggiungere un badge alla TabBar allora ho provveduto a scriverne uno.
In realtà l'ho adattato partendo da un plugin Xamarin.
Il codice è disponibile su giemma/PlayingWithMaui (github.com) e i badge sulle icone della TabBar appaiono come di seguito.
TabBar badge on iOS
TabBar Badge on Android
La solution che ho salvato su GitHub contiene 3 progetti:
- Gi.Controls.TabBarBadge che implementa appunto i badges nell TabBar
- Gi.Controls.AnimatedLabels che implementa una label animata che uso come contatore
- MauiApp1 che è l'applicazione di esempio e può girare su Windows, Android e iOS
Aggiunta del badge in TabBar
<Shell
x:Class="MauiApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1"
xmlns:mauiLib1="clr-namespace:Gi.Controls.TabBarBadge;assembly=Gi.Controls.TabBarBadge"
Shell.FlyoutBehavior="Disabled">
<TabBar>
<Tab Title="Main"
Icon="home.png"
>
<ShellContent
ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
<Tab Title="Page1"
Icon="user.png"
mauiLib1:Badge.BackgroundColor="Red"
mauiLib1:Badge.Text="{Binding Tab1Count}"
>
<ShellContent
ContentTemplate="{DataTemplate local:NewPage1}" />
</Tab>
<Tab Title="Page2"
Icon="settings.png"
mauiLib1:Badge.BackgroundColor="Green"
mauiLib1:Badge.Text="{Binding Tab2Count}"
>
<ShellContent
ContentTemplate="{DataTemplate local:NewPage2}" />
</Tab>
</TabBar>
</Shell>
Come visibile dal codice sopra è anche possibile definire il colore del badge.
Label animata (counter)
La label animata non è altro che una piccola estensione della "Label".
L'animazione viene eseguita mediante il seguente codice:
int Amount = 0;
var change = new Animation(x => label.Text = ((int)x).ToString(), Amount, value);
change.Commit(label, "ChangeAmount", 10, 500, Easing.SinOut);