Navigation Menu With Syncfusion In Xamarin.Forms

Introduction

An important item for an Application User Interface is represented by the Navigation Menu. A user considers that as a natural tool to have a satisfying experience with the app he uses.

In addition, a Navigation Menu allows us as developers to give a cleaner aspect to the app, avoiding the use of too many buttons, and achieving a compliance to the new app layout standards (such as Material Design for Android and Fluent Design for Windows).

A simple method to implement a Navigation Menu in Xamarin.Forms are using the Syncfusion NavigationDrawer PlugIn. We can find it in NuGet for free.

In this tutorial, I’ll show you how to implement a simple Navigation Menu in Xamarin.Forms with a list of links to other pages into that one.

Prerequisites

  • IDE: Visual Studio 2017 (all versions).

The steps given below will lead you to the goal.

Step 1

  • Launch Visual Studio and create a default application.

    Xamarin

    Xamarin

    Xamarin

Step 2

Now, we need to install the Syncfusion Navigation Drawer PlugIn. Lets take a look at how to do this:

  1. Go to Tools -> NuGet Package Manager -> Manage NuGet Packages For Solution

    Xamarin
  1. Search for Syncfusion Navigation Drawer

    Xamarin
  1. Select the Syncfusion.Xamarin.SfNavigationDrawer and be sure to install that in all the solutions of the project.

    Xamarin
  1. Select Syncfusion.Xamarin.SfNavigationDrawer.Android and install it in the Android Solution.

    Xamarin
  1. Select Syncfusion.Xamarin.SfNavigationDrawer.IOS and install it in the iOS Solution:

    Xamarin

Step 3

Now, we are going to add to the project two new pages:

  1. Go to Solution Explorer -> Right click on the PCL Solution -> Select Add -> New Item.

    Xamarin

  2. Select Xamarin.Forms -> Content Page -> Add

    Xamarin
  1. Just do the same to add page two.

    Xamarin

Step 4

Now, we need to prepare the app to navigate between pages.

Go to Solution Explorer -> Double click on App.xaml.cs, delete the auto-generated code and write the following.

  1. using System;    
  2. using Xamarin.Forms;    
  3. using Xamarin.Forms.Xaml;    
  4.     
  5. [assembly: XamlCompilation (XamlCompilationOptions.Compile)]    
  6. namespace NavigationDrawer    
  7. {    
  8.     public partial class App : Application    
  9.     {    
  10.         public App ()    
  11.         {    
  12.             InitializeComponent();    
  13.     
  14.             MainPage = new NavigationPage(new MainPage());    
  15.         }    
  16.     
  17.         protected override void OnStart ()    
  18.         {    
  19.             // Handle when your app starts    
  20.         }    
  21.     
  22.         protected override void OnSleep ()    
  23.         {    
  24.             // Handle when your app sleeps    
  25.         }    
  26.     
  27.         protected override void OnResume ()    
  28.         {    
  29.             // Handle when your app resumes    
  30.         }    
  31.     }    
  32. }  
Step 5

Now, we are ready to implement the Navigation Menu.

Go to Solution Explorer -> Double click on MainPage.xaml and replace the auto generated code with the following,

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:NavigationDrawer"  
  5.              xmlns:navigationdrawer="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"  
  6.              x:Class="NavigationDrawer.MainPage">  
  7.       
  8.       
  9. <!-- Initialize the Navigation Menu -->  
  10.     <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" DrawerWidth ="180">  
  11.         <navigationdrawer:SfNavigationDrawer.ContentView>  
  12.             <Grid x:Name="mainLayout" BackgroundColor="White">  
  13.                 <Grid.RowDefinitions>  
  14.                     <RowDefinition Height="auto"/>  
  15.                 </Grid.RowDefinitions>  
  16.                 <StackLayout BackgroundColor="Turquoise" Orientation="Horizontal">  
  17.                     <Button x:Name="hamburgerButton" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start"   
  18.                             FontSize="20" BackgroundColor="Turquoise" Clicked="hamburgerButton_Clicked"/>  
  19.                     <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"   
  20.                            Text="Home" FontSize="Medium" TextColor="Blue" BackgroundColor="Turquoise"/>  
  21.                 </StackLayout>  
  22.                 <Label Grid.Row="1" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center"   
  23.                        Text="Home Page" FontSize="14" TextColor="Black"/>  
  24.             </Grid>  
  25.         </navigationdrawer:SfNavigationDrawer.ContentView>  
  26.           
  27.         <!-- Initialize the Info Space at the top of the drawer. It can be used to add an Image or Info text -->  
  28.         <navigationdrawer:SfNavigationDrawer.DrawerHeaderView>  
  29.             <Grid BackgroundColor="Turquoise">  
  30.                 <Grid.RowDefinitions>  
  31.                     <RowDefinition Height="auto"/>  
  32.                 </Grid.RowDefinitions>  
  33.                 <Label Text="User" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center"   
  34.                        FontSize="Medium" TextColor="Blue"/>  
  35.             </Grid>  
  36.         </navigationdrawer:SfNavigationDrawer.DrawerHeaderView>  
  37.           
  38.        <!-- Initialize the ListView inside the drawer -->   
  39.         <navigationdrawer:SfNavigationDrawer.DrawerContentView>  
  40.             <ListView x:Name="listView" ItemSelected="listView_ItemSelected">  
  41.                 <ListView.ItemTemplate>  
  42.                     <DataTemplate>  
  43.                         <ViewCell>  
  44.                             <StackLayout HeightRequest="40">  
  45.                                 <Label Margin="10,10,0,0" Text="{Binding}" />  
  46.                             </StackLayout>  
  47.                         </ViewCell>  
  48.                     </DataTemplate>  
  49.                 </ListView.ItemTemplate>  
  50.             </ListView>  
  51.         </navigationdrawer:SfNavigationDrawer.DrawerContentView>  
  52.     </navigationdrawer:SfNavigationDrawer>  
  53.   
  54. </ContentPage>  

Step 6

Go to Solution Explorer -> Double click on MainPage.xaml.cs , delete the auto generated code and write the following.

  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Text;    
  5. using System.Threading.Tasks;    
  6. using Xamarin.Forms;    
  7.     
  8. namespace NavigationDrawer    
  9. {    
  10.     public partial class MainPage : ContentPage    
  11.     {    
  12.         public MainPage()    
  13.         {    
  14.             InitializeComponent();    
  15.           hamburgerButton.Image = (FileImageSource)ImageSource.FromFile("hamburgericon.png");    
  16.             List<string> list = new List<string>();    
  17.             list.Add("Home");    
  18.             list.Add("Page 1");    
  19.             list.Add("Page 2");    
  20.             listView.ItemsSource = list;    
  21.         }    
  22.         void hamburgerButton_Clicked(object sender, EventArgs e) => navigationDrawer.ToggleDrawer();    
  23.     
  24.         private async void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)    
  25.         {    
  26.             if (e.SelectedItem.ToString() == "Home")    
  27.             {    
  28.                 await Navigation.PushAsync(new MainPage());    
  29.             }    
  30.             else if (e.SelectedItem.ToString() == "Page 1")    
  31.             {    
  32.                 await Navigation.PushAsync(new Page1());    
  33.             }    
  34.             else if (e.SelectedItem.ToString() == "Page 2")    
  35.             {    
  36.                 await Navigation.PushAsync(new Page2());    
  37.             }    
  38.     
  39.             navigationDrawer.ToggleDrawer();    
  40.         }    
  41.     }    
  42. }   
Step 7

An additional step is required for iOS project. We need to create an instance of the NavigationDrawer as shown below.

To do this, go to Solution Explorer -> Open the iOS project node -> Double click on AppDelegate.cs and add the following code as shown below:

  1. new Syncfusion.SfNavigationDrawer.XForms.iOS.SfNavigationDrawerRenderer();  

 

Xamarin

Step 8

Import the HamburgerButton icon into the solution.

To do this we have to consider one different location for every OS.

Android

Copy the file icon in: Resources -> Drawable

Xamarin

Windows

Copy the file icon directly into the solution,

Xamarin

iOS

Copy the file icon into Resources,

Xamarin

Step 9

Well, now we’ll take a look at the output of our application. We need to set the concerned one as a start-up project, and setup the Configuration Manager.

To do that, go to Solution Explorer, right click on the project of our interest and click on SetUp As StartUp Project. Then, go to the Configuration Manager and be sure to check all the concerned platforms.

Xamarin

Xamarin

Xamarin

Step 10

Now, we’ll see the output on the two mobile platforms, on Windows desktop, and the relative behavior within:

The Home Page in iOS, Android, Windows desktop.

Xamarin

The Navigation Menu opened in iOS, Android, Windows desktop.

Xamarin

Using the link into the Navigation Menu,

Xamarin

Conclusion

In this tutorial, I have shown you how to implement a Navigation Menu in Xamarin.Forms with the Syncfusion Navigation Drawer PlugIn.

Of course, we can do that with different methods, but using the Syncfusion PlugIn we can focus on the business code, having the UI just ready to use.

For more information about the Syncfusion World, click here: Syncfusion WebSite.

You can download the solution from:  TheKlingon on GitHub.

In the next tutorial, I’ll show you how to implement a ListView with and without Syncfusion PlugIn.

Thank you for your attention and interest.


Similar Articles