如何修改 Shell 中的图片以显示通知标志？

Question

目前我正在 Visual Studio 2019 年使用 Xamarin 开发我的第一个跨平台移动应用程序。我使用带有导航图标的 shell（非常基本）。

我的下一个挑战：如果有新的通知，相应的导航点上方会出现一个红色的气泡。

它应该包括新通知的数量。

示例：

如果没有通知，就不会有气泡。我试图通过生成一个包含正确数字的 png 来解决它，但是这种方式似乎很慢并且需要花费很多时间来开发。

我觉得应该有任何内置的方法来添加此行为。我很高兴收到任何建议，在此先感谢！

编辑：

我使用的代码基本上来自visual studio示例。

我有一个文件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>

Answer 1

您可以使用 XamarinCommunityToolkit 包中的 BadgeView，如下所示：

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>

这里最重要的是 Text 属性，它绑定到 int 类型的 BadgeCount，这当然代表了徽章中显示的数字。

当它等于 0 时，徽章会自动变得不可见，一旦值为 >0，它就会再次出现，所以请确保它不会消失 <0 除非是您的要求。

作为旁注，您可以自定义徽章选项：BadgePosition、FontSize、FontAttributes、BorderColor、HasShadow...

对于任何对此包感兴趣或好奇的人，XamarinCommunityToolkit GitHub Repo

中都有一个示例项目

如何修改 Shell 中的图片以显示通知标志？

How to modify picture in Shell to show notification badge?

c#

xaml

xamarin

xamarin.forms

badge