How to add badge count in Navigation bar with TabbedPage In Xamarin forms?

Question

I want to add navigation bar in cart icon with badge count. I have added cart icon in navigation bar using toolbar item. and also created badge count circle view using plugin. if i am giving margin to set that badge icon to toolbar item it is hide behind tabbed page.

It is not displaying on cart icon.

Please help me out this.

As per above image i want to set badge count with tabbed page.

Below is my XAML Code.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:lang="clr-namespace:Conekto"
         xmlns:controls="clr-namespace:Conekto.Controls;"
         x:Class="ProjectName.Pages.SalePage">
<TabbedPage.Children>
    <ContentPage Title="{lang:Translate PRODUCTLIST}">
        <Grid Margin="10,10,10,0" BackgroundColor="White">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Grid.Row="0" Grid.Column="0" Text="charge 15,123" Style="{StaticResource primaryButton}" />
                <SearchBar x:Name="txtSearch" Grid.Row="1" Grid.Column="0" TextChanged="MySearchBarOnTextChanged" Placeholder="{lang:Translate Search}" SearchCommand="{Binding SearchCommand, Mode=TwoWay}" CancelButtonColor="Blue" Text="{Binding SearchText, Mode=TwoWay}" Style="{StaticResource labelgreycolour}" WidthRequest="50" HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand" />
                <StackLayout Grid.Row="2" Grid.Column="0"  VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
                    <ListView x:Name="listView" ItemsSource="{Binding ProductList}" HasUnevenRows="True" IsPullToRefreshEnabled="true" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" ItemAppearing="listView_ItemAppearing" ItemSelected="listView_ItemSelected" SelectedItem="{Binding listView_ItemSelected, Mode=TwoWay}" BackgroundColor="White" HorizontalOptions="FillAndExpand">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Grid Margin="0,5,0,5">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="10*" />
                                            <ColumnDefinition Width="50*" />
                                            <ColumnDefinition Width="40*" />
                                        </Grid.ColumnDefinitions>
                                        <Image Source="add" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Aspect="AspectFit" HeightRequest="30" WidthRequest="30" VerticalOptions="CenterAndExpand"  HorizontalOptions="CenterAndExpand">
                                            <Image.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding BindingContext.AddProductCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}" NumberOfTapsRequired="1" />
                                            </Image.GestureRecognizers>
                                        </Image>
                                        <Label Grid.Row="0" Grid.Column="1" VerticalOptions="CenterAndExpand" VerticalTextAlignment="End"  Text="{Binding ProductName,Mode=TwoWay}" Style="{StaticResource entrylogin}" />
                                        <Label Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" VerticalTextAlignment="End" Text="{Binding Cost,Mode=TwoWay,StringFormat='XOF {0}'}" Style="{StaticResource listViewsublabel}" />
                                    </Grid>                                     
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </Grid>                
            <controls:FloatingActionButton Margin="0,0,20,20"  Grid.Row="0" x:Name="FABCart" HorizontalOptions="End" VerticalOptions="End" WidthRequest="60" HeightRequest="60"  Image="cart" ButtonColor="#09999A" Clicked="FabCart_Clicked" />
            <controls:BadgeView Margin="0,0,32,52"  Grid.Row="0" Text="{Binding TotalCartItem, Mode=TwoWay}" BadgeColor="White" HorizontalOptions="End" VerticalOptions="End" />
        </Grid>
    </ContentPage>
    <ContentPage Title="{lang:Translate KEYPAD}">
        <ContentPage.BackgroundColor>
            <OnPlatform x:TypeArguments="Color">
                <OnPlatform.Platforms>
                    <On Platform="iOS" Value="Black" />
                    <On Platform="Android" Value="#eee" />
                </OnPlatform.Platforms>
            </OnPlatform>
        </ContentPage.BackgroundColor>
        <Grid x:Name="controlGrid" Margin="0,0,0,0" Padding="0,0,0,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid.ColumnSpacing>
                <OnPlatform x:TypeArguments="x:Double">
                    <OnPlatform.Platforms>
                        <On Platform="iOS" Value="1" />
                        <On Platform="Android" Value="0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Grid.ColumnSpacing>
            <Grid.RowSpacing>
                <OnPlatform x:TypeArguments="x:Double">
                    <OnPlatform.Platforms>
                        <On Platform="iOS" Value="1" />
                        <On Platform="Android" Value="0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Grid.RowSpacing>
            <Grid.RowDefinitions>
                <RowDefinition Height="74" />
                <RowDefinition Height="80" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Text="charge 15,123" Margin="12,12,12,12" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Style="{StaticResource primaryButton}" />
            <Label Text="Add note" FontSize="10" Grid.Column="0" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="End" TextColor="Black" />
            <Label x:Name="lblVal" Margin="0,0,16,0" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="End" VerticalTextAlignment="Center" TextColor="Black" FontSize="30" Grid.ColumnSpan="2" VerticalOptions="End" />
            <Button Clicked="Button_Clicked" Text ="7" Grid.Row="2" Grid.Column="0" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "8" Grid.Row="2" Grid.Column="1" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "9" Grid.Row="2" Grid.Column="2" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "4" Grid.Row="3" Grid.Column="0" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "5" Grid.Row="3" Grid.Column="1" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "6" Grid.Row="3" Grid.Column="2" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "1" Grid.Row="4" Grid.Column="0" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "2" Grid.Row="4" Grid.Column="1" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "3" Grid.Row="4" Grid.Column="2" Style="{StaticResource plainButton}" />
            <Button Clicked="ButtonClear_Clicked" Text = "C" Grid.Row="5" Grid.Column="0" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "0" Grid.Row="5" Grid.Column="1" Style="{StaticResource plainButton}" />
            <Button Clicked="Button_Clicked" Text = "+" Grid.Row="5" Grid.Column="2" Style="{StaticResource plainButton}" />
        </Grid>
    </ContentPage>
    <ContentPage Title="{lang:Translate SCAN}">
    </ContentPage>
</TabbedPage.Children>

And in .cs Page code i am adding cart icon in toolbar item.

  ToolbarItems.Add(new ToolbarItem("Add Product", "floating", async () =>
            {
                //var page = new ContentPage();
                //var result = await page.DisplayAlert("Title", "Message", "Accept", "Cancel");
                await Navigation.PushAsync(new CreateProductPage() { Title = Helper.GetResxNameByValue("CreateProduct") });

                //Debug.WriteLine("success: {0}", result);
            }));

As per design i have added cart button as floating button. Please do not consider that.

i dont think it is possible with forms you will have to do it with custom renderers — FreakyAli, Feb 23 '18 at 13:11
@G.hakim can you provide me a example link or any reference url for the same? — Manish Sharma, Feb 24 '18 at 04:32
did you try this? https://stackoverflow.com/a/44151505/7462031 — FreakyAli, Feb 26 '18 at 05:30
How did you set your navigation bar? Could you please provide necessary codes for implementing this layout? — Elvis Xia - MSFT, Feb 26 '18 at 08:44
@G.hakim i have used approch which is given by you. but in this approach i can not set badge for tabbed page toolbar item. — Manish Sharma, Feb 26 '18 at 10:14
**You can refer to it.** https://stackoverflow.com/questions/55763897/titleview-not-covering-the-entire-toolbar/55772150#55772150 — Pragnesh Mistry, Apr 25 '19 at 17:27

score 2 · Answer 1 · answered Aug 20 '18 at 15:59

To add badge on toolbar item you can hide the default tool bar by using NavigationPage.SetHasNavigationBar(this, false); then you can create your own tool bar with button having badge counter and hamburger to show and hide side menu.

On page in which hamburger button is clicked:

private void Button_Clicked(object sender, System.EventArgs e)
        {
            MessagingCenter.Send(this, "presnt");           
        }

On MasterDetail page:

MessagingCenter.Subscribe<YourPage>(this, "presnt", (sender) =>
            {
                IsPresented = true;
            });

Also, Before making IsPresented=true, check for sliding menu is not all-ready presented.

you can check https://github.com/LeslieCorrea/Xamarin-Forms-Shopping-Cart this link for more information. But by using this method in android may make the nav bar appear below tabs, so you may need to create tabs using buttons.

score 1 · Answer 2 · edited Mar 26 '21 at 22:56

   <NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal">
            <Label FontAttributes="Bold" TextColor="Black" FontSize="Medium" Text="Female Category" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Label>
            <AbsoluteLayout Margin="0,0,5,0" HorizontalOptions="EndAndExpand">
                <Frame  BackgroundColor="White" BorderColor="Black"  CornerRadius="50" WidthRequest="40"
                    Padding="0"
                    Margin="0,10,0,10">
                    <ImageButton Source="add_to_basket.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"  Padding="5"/>
                </Frame>
                <Frame BackgroundColor="Red" HeightRequest="30" BorderColor="Black" WidthRequest="20" CornerRadius="50" Padding="0,0,0,-10" Margin="25,5,0,0">
                    <Label HorizontalOptions="CenterAndExpand"  Text="53" TextColor="White"  />
                </Frame>

            </AbsoluteLayout>
        </StackLayout>
    </NavigationPage.TitleView>

How to add badge count in Navigation bar with TabbedPage In Xamarin forms?

2 Answers2