如何在Xamarin.Forms的通知图标中添加任何数字

Question

我想创建一个通知图标，并将所有未读消息显示为计数，如何实现。此工具最适合于此。

Answer 1

首先，您需要具有一个BadgeView，以表示通知计数器。 为此，您可以使用BadgeView NuGet Package

添加到解决方案后，可以在XAML中添加徽章指示符：

<badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="Center" HorizontalOptions="End" />

下一步是将所有内容放在一起，因此您需要有一个图像（您的铃铛），并将图像与“徽章”视图打包在一起。由于要覆盖两个元素，因此可以使用网格。

<Grid>
     <Image Source="bell.png" HorizontalOptions="Center" VerticalOptions="Center"
    <badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="End" HorizontalOptions="Start" />
</Grid>

在此将图像设置为居中，将徽标设置为左上角。此后，您应该使用边距来操纵徽章位置，以便将徽章放置在所需的正确位置。

Answer 2

我正在分享自己建立的一个。 它的图片顶部仅带有Xamaring控件。

只需微调框架上“徽章”的高度和宽度以及标签上的内容。

使用ConstraintExpression将徽章的X轴定位为“ Constant = 14”

<RelativeLayout>
    <Image Source="picture.png" WidthRequest="28" HeightRequest="28" />
    <Frame BackgroundColor="#FF0000" OutlineColor="White"
        RelativeLayout.HeightConstraint="22"
        RelativeLayout.WidthConstraint="22"
        CornerRadius="11"
        HorizontalOptions="Center"
        Padding="0"
        IsClippedToBounds="True"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=14}"
        RelativeLayout.YConstraint="-6">
        <StackLayout WidthRequest="22">
            <Label Padding="2" Text="+5" RelativeLayout.WidthConstraint="22" TextColor="White" FontSize="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
        </StackLayout>                                            
    </Frame>
</RelativeLayout>

我的应用中上述代码的图片（“ +5”徽章）：