How To Apply ToolbarItems Navigation In Xamarin.Forms Application

Introduction

 

This article demonstrates how to apply ToolBarItems navigation to Xamarin.Forms.

 

Let's start.

 

Step 1 

 

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.

 

Select Cross-Platform app, then give your project a name and location.

 

 

 

Step 2 

 

Update the following NuGet Packages to your project.

• Xamarin.Forms 

 Go to Solution Explorer and select your solution. Right click and select "Manage NuGet Packages for Solution".

 

 

 

Now, select the following NuGet packages and select your project to update this version.

 

 

 

Step 3 

 

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-click >> drawable.

 

 

 

Next, a dialogue box will open. Choose image location and add images.

 

 

 

The image is added successfully.

 

 

 

Step 4 

 

Open Solution Explorer >> Project Name >> Mainpage.xaml. Open the Design View of this page.

 

 

 

The code is given below.

 

We are going to create a ToolbarItem Text and Icon on the Content page. For, ToolbarItems and image name, copy and paste an icon "Icon=download.png".

 

 

 

XAML Code

<?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:local="clr-namespace:ToolbarItems"
             x:Class="ToolbarItems.MainPage">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="New"
                     Icon="download.png"
                     Priority="0"
                     Order="Primary"
                     Clicked="ToolbarItem_Clicked"/>

    </ContentPage.ToolbarItems>
    <StackLayout>
        <Label Text="ToolbarItem"
               FontSize="50"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               TextColor="YellowGreen"/>
        <Label x:Name="MyLabel"
               FontSize="70"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               TextColor="Red"/>
    </StackLayout>
</ContentPage>

Step 5 

 

Open Solution Explorer >> Project Name >> Right-click >> Add >> New Item. 

 

 

 

The Dialogue box will open. Now, add the XAML page and give your own name and click the "ADD" button.

 

 

 

Step 6 

 

Open Solution Explorer >> Project Name >> Page1.xaml. Open the Design View of this page.

 

 

 

The code is given below.

 

 

 

XAML Code 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ToolbarItems.Page1"
             Title="Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="ToolbarItemNavigation"
                   FontSize="50"
                   TextColor="Red"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 7 

 

Next, open Solution Explorer >> Project Name >> Mainpage.xaml.cs. Open the Design View of this page.

 

 

The code is given below. 

 

 

 

C# Code 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ToolbarItems
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }


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

Step 8 

 

Open Solution Explorer >> Project Name >> App.xaml.cs. Open the Design View of this page.

 

 

 

The code is given below.

 

 

 

C# Code 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace ToolbarItems
{
    public partial class App : Application
    {
        public App ()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }

Step 9 

 

Next, select the build & deploy option, followed by selecting from the list of Android Emulators or simulator. You can choose any API (Application Program Interface) Level Emulator and simulator to run it.

 

Output 

 

After a few seconds, you will see your app working.

 

Click on the ToolbarItems Icon Navigation page in page1. 

 

 

 

Finally, we have successfully created Xamarin.Forms ToolbarItems Navigation.