如何在Xamarin表单中显示ToolBarItem图标的徽章计数 [英] How to show a badges count of ToolBarItem Icon in Xamarin Forms

问题描述

这与如何显示通知标志无关，也与工具栏项目图标无关.很明显的问题是，如何在工具栏项目图标上显示徽章. ?

It is not about how to show notification badges nor it's about to show toolbar item icon. It is clear question that how to show a badges count on a toolbar item icon. ?

我正在共享代码以在XF内容页面中创建带有图标的ToolbarItem:

I am sharing code to create ToolbarItem with icon in XF content page:

在cs文件中:

    ToolbarItem cartItem = new ToolbarItem();
    scanItem.Text = "My Cart";
    scanItem.Order = ToolbarItemOrder.Primary;
    scanItem.Icon = "carticon.png";

    ToolbarItems.Add(cartItem );

在Xaml文件中:

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Cart" Priority="0" x:Name="menu1"> 
    </ToolbarItem>   
  </ContentPage.ToolbarItems>

现在，我想在上面添加的工具栏项目图标上放置徽章计数.如何实现?

Now I want to Place a badge count on the above added tool bar item icon. How it can be achieved ?

推荐答案

在本机工具栏中放置徽章图标实际上要花很多功夫.如果需要徽章图标，请删除导航页面.

Placing badge icon's in the native toolbars is actually more effort than its worth. If I need a badge icon, I remove the navigation page.

NavigationPage.SetHasNavigationBar(myPageInstance, false);

然后，我从头开始创建自己的工具栏.在此工具栏中，我可以在其中覆盖图像，也可以根据需要在其中放置数字.例如.

Then I create my own toolbar from scratch. In this toolbar, I can overlay an image in there, you can also place a number in it as needed. For example.

 <Grid>           
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding IconCommand}" />
        </Grid.GestureRecognizers>

        <iconize:IconImage
                     Icon="fa-drawer"
                     IconColor="white"
                     IconSize="20" />

        <Grid Margin="15,-15,0,0">
            <iconize:IconImage Grid.Row="0"
                       HeightRequest="40"
                       WidthRequest="40"
                       Icon="fa-circle"
                       IconColor="red"
                       IsVisible="{Binding IsCircleVisible}"
                       IconSize="10" />
        </Grid>

    </Grid>

我将FontAwesome用作图标的图标化

I use Iconize wtih FontAwesome for the icons

这篇关于如何在Xamarin表单中显示ToolBarItem图标的徽章计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！