Xamarin: Shopping Cart Counter In Forms Navigation Bar
Many of you have tried the Navigation Bar in Xamarin Forms.
But it has some limitations and you can't do everything with this. For example, many people want to add an eCommerce cart counter in the navigation bar but unfortunately, Xamarin forms don't have any kind of navigation bar as well. Most people install third-party plugins for that purpose. However, this is not a good approach to handle such things.
Also, some plugins are not free and they charge heavy amount for a single code repository.
You don't need to install or purchase third-party plugins because we'll do it in Xamarin forms XAML and C# as well.
Create a new project and add a few lines of code on your Main Page. We'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 this with the Main Page simply add a new Content View for your custom Navigation Bar and 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="DarkSlateGrey"
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 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 the 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:
