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.
  
  
  
  
  
  

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
   
   

2. Search for Syncfusion Navigation Drawer
   
   

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

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

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

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.
   
   
   
   
2. Select Xamarin.Forms -> Content Page -> Add
   
   

3. Just do the same to add page two.
   
   

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.

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
namespace NavigationDrawer
{
    public partial class App : Application
    {
        public App ()
        {
            InitializeComponent();

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

        protected override void OnStart ()
        {
            // Handle when your app starts
        }

        protected override void OnSleep ()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume ()
        {
            // Handle when your app resumes
        }
    }
}

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,

<?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:NavigationDrawer"
             xmlns:navigationdrawer="clr-namespace:Syncfusion.SfNavigationDrawer.XForms;assembly=Syncfusion.SfNavigationDrawer.XForms"
             x:Class="NavigationDrawer.MainPage">


<!-- Initialize the Navigation Menu -->
    <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" DrawerWidth ="180">
        <navigationdrawer:SfNavigationDrawer.ContentView>
            <Grid x:Name="mainLayout" BackgroundColor="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <StackLayout BackgroundColor="Turquoise" Orientation="Horizontal">
                    <Button x:Name="hamburgerButton" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start"
                            FontSize="20" BackgroundColor="Turquoise" Clicked="hamburgerButton_Clicked"/>
                    <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                           Text="Home" FontSize="Medium" TextColor="Blue" BackgroundColor="Turquoise"/>
                </StackLayout>
                <Label Grid.Row="1" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center"
                       Text="Home Page" FontSize="14" TextColor="Black"/>
            </Grid>
        </navigationdrawer:SfNavigationDrawer.ContentView>

        <!-- Initialize the Info Space at the top of the drawer. It can be used to add an Image or Info text -->
        <navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
            <Grid BackgroundColor="Turquoise">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Label Text="User" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center"
                       FontSize="Medium" TextColor="Blue"/>
            </Grid>
        </navigationdrawer:SfNavigationDrawer.DrawerHeaderView>

       <!-- Initialize the ListView inside the drawer -->
        <navigationdrawer:SfNavigationDrawer.DrawerContentView>
            <ListView x:Name="listView" ItemSelected="listView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout HeightRequest="40">
                                <Label Margin="10,10,0,0" Text="{Binding}" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </navigationdrawer:SfNavigationDrawer.DrawerContentView>
    </navigationdrawer:SfNavigationDrawer>

</ContentPage>

Step 6

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

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

namespace NavigationDrawer
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
          hamburgerButton.Image = (FileImageSource)ImageSource.FromFile("hamburgericon.png");
            List<string> list = new List<string>();
            list.Add("Home");
            list.Add("Page 1");
            list.Add("Page 2");
            listView.ItemsSource = list;
        }
        void hamburgerButton_Clicked(object sender, EventArgs e) => navigationDrawer.ToggleDrawer();

        private async void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem.ToString() == "Home")
            {
                await Navigation.PushAsync(new MainPage());
            }
            else if (e.SelectedItem.ToString() == "Page 1")
            {
                await Navigation.PushAsync(new Page1());
            }
            else if (e.SelectedItem.ToString() == "Page 2")
            {
                await Navigation.PushAsync(new Page2());
            }

            navigationDrawer.ToggleDrawer();
        }
    }
}

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:

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

 

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

Windows

Copy the file icon directly into the solution,

iOS

Copy the file icon into Resources,

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.

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.

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

Using the link into the Navigation Menu,

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.