Published April 15, 2017 by with 23 comments

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 ...













23 comments:

  1. Replies
    1. Shopping Cart Counter In Navigation Bar ~ Xamarin Ui >>>>> Download Now

      >>>>> Download Full

      Shopping Cart Counter In Navigation Bar ~ Xamarin Ui >>>>> Download LINK

      >>>>> Download Now

      Shopping Cart Counter In Navigation Bar ~ Xamarin Ui >>>>> Download Full

      >>>>> Download LINK iK

      Delete
  2. Thanks-a-mundo for the blog post.Thanks Again. Keep writing. Ecommerce professionale

    ReplyDelete
  3. Dashiki Shirt Shop sell black dashiki shirt and white dashiki shirt. We are biggest retail of dashiki shirts to ship worldwide. dashiki shirt

    ReplyDelete
  4. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! coffee from around the world

    ReplyDelete
  5. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work buying advice

    ReplyDelete
  6. Fantastic page! I actually really liked all the following. I hope to learn from much of you. We you’ve got outstanding awareness and so perception. I’m certainly absolutely fascinated in this particular guidance. 토토사이트

    ReplyDelete
  7. Hello, i like the way you post on your blog”     파워볼사이트

    ReplyDelete
  8. Ephedrin HCL ist der unglaublichste Fatburner ohne Zweifel. Ephedrin HCL Fatburner Kapseln wirken ungemein marked! Mittels Ephedrin haben meine Frau und ich Pet Supplies

    ReplyDelete
  9. In recent times, online shopping has taken India by storm for a variety of products. This phenomenon has also spread to furniture, furnishings and interior decor. Urban Ladder is one of those filling the niche for online shopping of furniture and making the lives of customers easier on multiple fronts such as time, effort and cost. The portal has a well designed, clean and pleasant look. It is quite user friendly and products are categorised neatly. Urban Ladder is a niche player and a specialist in the furniture segment. There are numerous choices, priced reasonably with great discounts from time to time and doorstep delivery. Its products are well curated with strict quality control. If required, there are easy returns available and refunds as well. The listings are descriptive with clear images. That is not all - there are more facilities that Urban Ladder offers to customers including an attractive referral policy! ball jacket

    ReplyDelete
  10. Well we really like to visit this site, many useful information we can get here. aesthetic phone case

    ReplyDelete
  11. If you want an excellent shopping center experience, you may do well to go off the beaten track. When you take yourself away from the crowds and into smaller local settings, you can find a lot of excitement and offerings that you would never see in a large generic shopping mall setting. Finding a local bazaar or market can be a very exciting event in anyone's travel experience. ScraperAPI.com Coupons

    ReplyDelete
  12. Online shopping has caught up as a recent trend. Why not? It has made shopping so much easier as now you can shop from the comfort of your home from your laptop or smart phone without going through the hassle of getting ready and going out. Buy away from the wide range of products available to you in your searched category. 泰國佛牌

    ReplyDelete
  13. I am typically to blogging i truly appreciate your site content. This content has truly peaks my interest. I’m going to bookmark your internet site and keep checking for first time information. Buy steroids online

    ReplyDelete
  14. Online shopping has indeed grown beyond leaps and bound but it is still a long way away from becoming the choice of the majority. Many people are still not comfortable with the idea of buying anything without actually touching and feeling it. To them, it's odd to read product specifications, see some raw pictures and place an order. springfield 223

    ReplyDelete
  15. Clothing Brands Welcome to The Whaley Center, Fayetteville’s premier destination for an affordable, convenient, and conscientious shopping experience. Whether you’re"

    ReplyDelete
  16. Thank you for this fascinating post, I am happy I observed this website on Google. Not just content, in fact, the whole site is fantastic. 레플리카

    ReplyDelete
  17. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. https://frclothing.co/

    ReplyDelete
  18. Shopping Cart Counter In Navigation Bar ~ Xamarin Ui >>>>> Download Now

    >>>>> Download Full

    Shopping Cart Counter In Navigation Bar ~ Xamarin Ui >>>>> Download LINK

    >>>>> Download Now

    Shopping Cart Counter In Navigation Bar ~ Xamarin Ui >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete
  19. With a Midheaven in Taurus, you need security and a sense of direction in your career. Taurus Midheaven

    ReplyDelete
  20. With a Midheaven in Aries, you need excitement, challenge, and action in your career. Midheaven in Aries

    ReplyDelete
  21. If you have your Midheaven in Aquarius, you need a career that allows you freedom and that brings out your originality. Aquarius Midheaven

    ReplyDelete
  22. Sees for paper an especially epic sythesis, I affected close by your blog other than butcher up a bound report. I need your development for scratching... 토토사이트

    ReplyDelete