How to modify picture in Shell to show notification badge?

user_9919049 0
Viewed 1088

Currently I am developing my first cross platform mobile App with Xamarin in Visual Studio 2019. I use a shell with icons for navigation (very basic).

My next challenge: If there are new notifications, a red bubble shall appear on top of the corresponding navigation point.

It should include the number of new notifications.

Example:

enter image description here

If there are no notifications, there should not be any bubble. I tried to solve it by generating a png which includes the right number, but this way seems to be very slow and consuming much time to develop.

I feel like there should be any built-in way to add this behavior. I am happy for any advice, thanks in advance!

Edit:

The Code I use is basically from the visual studio example.

I have a file AppShell.xaml:

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        </Style>
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

<!-- Your Pages -->
<TabBar>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
    </Tab>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
    </Tab>
    <Tab Title="Info" Icon="tab_about.png">
        <ShellContent ContentTemplate="{DataTemplate local:InfoPage}" />
    </Tab>
</TabBar>
xamarin.forms xamarin badge xaml c#
1 Answers

You can use BadgeView from XamarinCommunityToolkit package as follow:

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
...
<xct:BadgeView BackgroundColor="Red" BadgePosition="TopRight" BorderColor="Transparent"
               Text="{Binding BadgeCount}" FontSize="10" Padding="0" TextColor="White">
    <Image Source="Bell.png" xct:IconTintColorEffect.TintColor="blue"/>
</xct:BadgeView>

enter image description here

Most important here is the Text property which is bound to BadgeCount of type int which of course represent the number displayed in your badge.

When it is equals to 0 then automatically the badge becomes invisible, it will appears again once the value is >0, so be sure it doesn't go <0 unless it is intended by your requirements.

As a side note you can customize the badge psotion: BadgePosition, FontSize, FontAttributes, BorderColor, HasShadow...

For Anyone interested or curious about this package there is a sample project in XamarinCommunityToolkit GitHub Repo

user_52282020
Related