Post
Ask Question

Create ToolBarItems In Xamarin.Forms Using Visual Studio

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Prerequisites
  • Visual Studio 2017 RC.
The steps given below are required to be followed in order to create ToolBarItems in Xamarin.Forms, using Visual Studio.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of the projects in Visual Studio or click (Ctrl+Shift+N).

 

Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Cross-Platform-->choose Cross Platform App. Now, give your Xamarin form app a name (Ex:sample) and give the path of your project. Afterwards, click OK.

 

Step 3

Now, choose Blank app and select forms PCL (sharing). Afterwards, click OK.

 

Step 4

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project. You can add Universal Windows Platform (UWP). In Reference, go to Solution Explorer-->Your Project-->UWP-->Reference-->Right click --> Select Add reference.

 

Step 5

Now, you can select Universal Windows and select Extensions.Check.
  • Windows Desktop Extension for the UWP. version:10.0.1439
  • Windows Desktop Extension for the UWP. version:10.0.1058
Afterwards, click OK.

 

Step 6

In this step, add one page, whose name is called MainPage.xaml. Go to Solution Explorer-->Your Project-->Portable-->Right click-->Add-->New Item (Ctrl+Shift+A).

 

Step 7

Now, select Forms XAML page and give the name (MainPage.xaml).

 

Step 8

In this step, go to the MainPage.xaml page and write the code given below.

MainPage.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ToolBar.MainPage" BackgroundColor="White">  
  3.     <ContentPage.ToolbarItems>  
  4.         <ToolbarItem Text="Add" Priority="0" Order="Secondary" Clicked="ToolbarItem_Clicked" />  
  5.         <ToolbarItem Text="Cancel" Priority="1" Order="Secondary" Clicked="ToolbarItem_Clicked" />  
  6.     </ContentPage.ToolbarItems>  
  7.     <StackLayout>  
  8.         <Label x:Name="MainLable" HorizontalOptions="Center" FontSize="30" TextColor="Black"></Label>  
  9.     </StackLayout>  
  10. </ContentPage>  
 

Step 9

In this step, go to the MainPage.xaml.cs page. Write the code given below.

MainPage.xaml.cs
  1. using Xamarin.Forms;  
  2. namespace ToolBar {  
  3.     public partial class MainPage: ContentPage {  
  4.         public MainPage() {  
  5.             InitializeComponent();  
  6.         }  
  7.         private void ToolbarItem_Clicked(object sender, EventArgs e) {  
  8.             MainLable.Text = "Your Selected Item Clicked";  
  9.         }  
  10.     }  
  11. }  
 

Step 10

In this step, go to App.cs page. Write the code, mentioned below.

App.cs
  1. public App()  
  2. {  
  3.    MainPage = new MainPage();  
  4. }  
 

Step 11

Now, you can run your app. Go to the Debug Configuration Manager. Choose platform, check the build and deploy option. Afterwards, click close.

 

Step 12

If you have Windows 10 Emulator, you can run it. If you don't have it, simply run Local Machine.

 

Output

After a few seconds, the app will start running on your Windows 10 Emulator. You will see your app works successfully. You will see the three dots in bottom of the app. Click the three dots and you will see the ToolBarItems start working successfully.

 

If you choose any ToolBarItems, it will work successfully.

 

Summary

This was the process of how to create ToolBarItems in Xamarin.Forms, using Visual Studio.


Similar Articles