Shopping Cart Counter In Navigation Bar

Many of you have tried the Navigation Bar in xamarin forms.But it has some limitations and you can't do every thing with this. For example many people want's to add an eCommerce cart counter in the navigation bar but unfortunately xamarin forms don't have any kinda such navigation bar as well.Yeah most people show some intelligence and they install third party plugins for that purpose. However this is not good approach to handle such kinda things. Also some plugins are not free and they charge heavy amount for a single code repository. What I'm trying to say is please don't install or purchase third party plugins because we'll do in xamarin forms XAML and C# as well. So let's jump into the code section. Create a new project and add a few lines of code in your Main Page . So what I'm gonna do is I'll simply add a new button on Page 1 and also make a clicked event of this button with the following lines of code.

    <StackLayout Spacing="0" VerticalOptions="Center">
    <Image Source="http://cdn.playbuzz.com/cdn/ca011f28-6e7a-4b07-8eb8-ff122e799508/c0439c4d-891a-410a-8a24-b3b586bced7a.jpg"
WidthRequest="320"
HeightRequest="480"
Aspect="AspectFit"/>
    <Button Text="Go to Page 2" Clicked="Button_OnClicked"/>
  </StackLayout>

After this simply add few lines of code in the code behind of Page 1. 

 public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
            BindingContext = this;
        }

        private async void Button_OnClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new ProfilePagexaml());
        }
    }

So once you've done with the Main Page simply add a new Content View for your custom Navigation Bar and simply add the few lines of code .

<ContentView.Content>
<Grid RowSpacing="0" ColumnSpacing="0" BackgroundColor="#F44336">
<Grid.RowDefinitions>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentView Grid.Row="0" Grid.Column="0">
<Image Source="https://maxcdn.icons8.com/Share/icon/androidL/Arrows//back1600.png" 
WidthRequest="30" 
HeightRequest="30"
HorizontalOptions="Center" VerticalOptions="Center"/>
<ContentView.GestureRecognizers>
    <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped"  />
</ContentView.GestureRecognizers>
</ContentView>
<Label x:Name="lblTitle" TextColor="#333333"
HorizontalOptions="CenterAndExpand" 
VerticalOptions="CenterAndExpand"
Grid.Row="0" Grid.Column="1"/>
<ContentView Grid.Row="0" Grid.Column="2" Margin="0,5,5,0">
        
  <RelativeLayout>

    <Image Source="http://simpleicon.com/wp-content/uploads/Shopping-Cart-9.png" HeightRequest="30" WidthRequest="30" x:Name="yellowBoxView"
             RelativeLayout.YConstraint="{ConstraintExpression 
         Type=RelativeToParent,
         Property=Height,
         Factor=0.018,Constant=0}"
       
        RelativeLayout.XConstraint="{ConstraintExpression 
         Type=RelativeToParent,
         Property=Width,
         Factor=0.85,Constant=0}"
    />

    <Image Source="http://www.iconsdb.com/icons/preview/red/circle-xxl.png" HeightRequest="15" WidthRequest="15" x:Name="redBoxView"
             RelativeLayout.YConstraint="{ConstraintExpression 
         Type=RelativeToView,
         Property=Y,
         ElementName=yellowBoxView,
         Factor=1,Constant=-5}"
       
        RelativeLayout.XConstraint="{ConstraintExpression 
         Type=RelativeToView,
         Property=X,
         ElementName=yellowBoxView,
         Factor=1,Constant=25}"
    />
    <Label HorizontalTextAlignment="Center"  FontSize="9" TextColor="White" HeightRequest="10" WidthRequest="20" x:Name="labelText"
               RelativeLayout.YConstraint="{ConstraintExpression 
         Type=RelativeToView,
         Property=Y,
         ElementName=yellowBoxView,
         Factor=1,Constant=-5}"
       
          RelativeLayout.XConstraint="{ConstraintExpression 
         Type=RelativeToView,
         Property=X,
         ElementName=yellowBoxView,
         Factor=1,Constant=25}"
    />

</RelativeLayout>
        
<ContentView.GestureRecognizers>
    <TapGestureRecognizer x:Name="tapcart" Tapped="Tapcart_OnTapped" />
</ContentView.GestureRecognizers>
</ContentView>
      
<BoxView BackgroundColor="Red" Grid.ColumnSpan="3"
Grid.Row="1" Grid.Column="0" />
</Grid>
</ContentView.Content>

Also add  the following backend for Content View as well .

  public partial class NavigationBarViewxaml : ContentView
    {
        public NavigationBarViewxaml()
        {
            InitializeComponent();
        }

        public Label FirstNameLabel
        {
            get
            {
                return labelText;
            }
        }

        private void TapGestureRecognizer_OnTapped(object sender, EventArgs e)
        {
            Navigation.PopAsync();
        }

        public static readonly BindableProperty TitleProperty =
            BindableProperty.Create(
                "Title",
                typeof(string),
                typeof(NavigationBarViewxaml),
                "this is Title",
                propertyChanged: OnTitlePropertyChanged
            );
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

        static void OnTitlePropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var thisView = bindable as NavigationBarViewxaml;
            var title = newValue.ToString();
            thisView.lblTitle.Text = title;
        }

        private void Tapcart_OnTapped(object sender, EventArgs e)
        {
            Navigation.PushAsync(new MainPage());
        }
    }

Now the next step is to add a New Page in your Xamarin Forms Project and add the Content Page code along with the Navigation Content View that I've created so far.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xWebService="clr-namespace:X_WebService;assembly=X_WebService"
             x:Class="X_WebService.ProfilePagexaml" 
             NavigationPage.HasNavigationBar="false"
            NavigationPage.HasBackButton="false" Title="Profile Is Happy">

  <ContentPage.Content>
    <StackLayout Spacing="0">
      <StackLayout>
        <xWebService:NavigationBarViewxaml x:Name="NavigationBarView" Title="{Binding Title}"  />
        <Label Text="Asfend"/>
        <Label Text="asfend@hotmail.com"/>
        <Label Text="+923114737885"/>
        
        <Button Text="Leave" Clicked="Button_OnClicked" />
        <Button Text="Add to Cart" x:Name="BtnIncrement" Clicked="BtnIncrement_OnClicked"></Button>
      </StackLayout>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

Also add some backend code as well. 

    public partial class ProfilePagexaml : ContentPage

    {

        public ProfilePagexaml()

        {

            InitializeComponent();

            BindingContext = this;

        }

        protected override bool OnBackButtonPressed()

        {

            return true;

        }

        private async void Button_OnClicked(object sender, EventArgs e)

        {

            await Navigation.PopAsync();

        }

       public double clicks = 0;

        private void BtnIncrement_OnClicked(object sender, EventArgs e)

        {

             clicks += 1;

            NavigationBarView.FirstNameLabel.Text = clicks.ToString();

        }

    }

Now one last thing is to make your Page 1 as root by simply going into the App.xaml.cs and in the constructor of the page set MainPage = new NavigationPage(new Page1);

Now it's time to watch the magic with the following output ...