C# 如何修改Shell中的图片以显示通知徽章？

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

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

它应该包括新通知的数量

例如：

如果没有通知，则不应存在任何气泡。 我试图通过生成一个包含正确数字的png来解决这个问题，但是这种方法看起来非常慢，而且开发起来需要花费很多时间

我觉得应该有任何内置的方式来添加这种行为。 我很乐意接受任何建议，提前谢谢

编辑：

我使用的代码基本上来自VisualStudio示例

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

#2196F3

您可以使用以下软件包中的

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>

xmlns:xct=”http://xamarin.com/schemas/2020/toolkit"
...

这里最重要的是

Text

属性，该属性绑定到

int

类型的

BadgeCount

，它当然表示您的徽章中显示的数字

---

当它等于0时，徽章将自动变为不可见，当值为>0时，它将再次出现，因此请确保它不会变为，这称为“徽章”，您可以通过多种方式接近它。由于您尚未向我们展示您使用的导航类型，因此很难给出具体建议，但请从阅读本文开始-非常感谢您的回答！这个徽章正是我需要的。我更新了我的问题并给出了代码片段。你能给我一个如何插入标签的提示吗？有一个插件可以将标签标签添加到表单应用程序中，但它不适用于Shell。有一个PR用于将此添加到shell，其中包括一个解决方案渲染器，以便现在启用它。谢谢你的回答！同时，我需要实现这一点，所以我不会测试它现在，即使它看起来很好。请如果你觉得它有帮助。谢谢