SideMenu In Xamarin iOS

 

Introduction

 

This blog demonstrates how to use a sidemenu or navigation drawer in Xamarin iOS since there is no default feature for the sidebar view. We can achieve this view using Xamarin.Sidebar NuGet  with some effort.

 

Let's start.

 

Create a new Xamarin iOS Single View Application in Visual Studio for Mac.

After the project creation, install Xamarin.Sidebar Nuget package by going to Solution Explorer >> right-click and select Manage NuGet Package and search Xamarin.SideMenu and select install the plugin.

 

 

Now, open your Main.Storyboard and design two scenes for the right and left navigation drawer as per your required design and one more ViewController for the Main or Root ViewController. Here, I don't want any more design, I just gave a background color for these scenes and created two ViewController classes for these scenes. This controller should be inherited from UIViewController.

 

 

Next, open your View Controller and create SideMenuManager instance and configure right and left side ViewController. Here, I created the ViewController instance and configured these ViewControllers with SideMenuManager.

var left = new UISideMenuNavigationController(sideMenuManager, leftSideController, leftSide: true);
           left.NavigationBarHidden = true;
           sideMenuManager.LeftNavigationController = left;
           sideMenuManager.RightNavigationController = new UISideMenuNavigationController(sideMenuManager, rightSideController, leftSide: false);

Now, we can add gestures for these sidemenu controllers. Here, I wrote PanGesture and EdgePanGesture and added these gestures into NavigationController; in case you want to add a specific scene you can.

// Enable gestures. The left and/or right menus must be set up above for these to work.
           // Note that these continue to work on the Navigation Controller independent of the View Controller it displays!
           sideMenuManager.AddPanGestureToPresent(toView: this.NavigationController?.NavigationBar);

           sideMenuManager.AddScreenEdgePanGesturesToPresent(toView: this.NavigationController?.View);

Next, we can set this instance to the toolbar left and right button. By default, the left and right drawer ViewController navigation bar, TitleView, is enabled. if you want to disable the NavigationBar title view, first, create an instance for that ViewController and set false for NavigationBarHidden property true.

var left = new UISideMenuNavigationController(sideMenuManager, leftSideController, leftSide: true);
            left.NavigationBarHidden = true;

Some cool effects-based properties are available for use as  blur and background image. The code for these effects is given in the SetDefault method. We have one more useful and lovely effect available, which is the Sidebar Navigation Animation type. Its types are Slide In, Slide Out, Dissolve, SlideInOut.

void SetDefaults()
        {
            sideMenuManager.BlurEffectStyle = null;
            sideMenuManager.AnimationFadeStrength = 5d;
            sideMenuManager.ShadowOpacity = 5d;
            sideMenuManager.AnimationTransformScaleFactor = 5d;
            sideMenuManager.FadeStatusBar = true;
        }

Full View Controller Code

using System;
using UIKit;
using Xamarin.SideMenu;

namespace SideMenu
{
    public partial class LeftSideViewController : UIViewController
    {
        private SideMenuManager sideMenuManager;
        private UIViewController leftSideController;
        private UIViewController rightSideController;

        public LeftSideViewController(IntPtr handle) : base(handle)
        {
        }
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem("Left Menu", UIBarButtonItemStyle.Plain, (sender, e) =>
            {
                PresentViewController(sideMenuManager.LeftNavigationController, true, null);
            }),
               false);

            this.NavigationItem.SetRightBarButtonItem(
                new UIBarButtonItem("Right Menu", UIBarButtonItemStyle.Plain, (sender, e) =>
                {
                    PresentViewController(sideMenuManager.RightNavigationController, true, null);
                }),
                false);
            sideMenuManager = new SideMenuManager();

            SetupSideMenu();
            SetDefaults();
        }
        void SetupSideMenu()
        {
            GetViewControllers();

            var left = new UISideMenuNavigationController(sideMenuManager, leftSideController, leftSide: true);
            left.NavigationBarHidden = true;
            sideMenuManager.LeftNavigationController = left;
            sideMenuManager.RightNavigationController = new UISideMenuNavigationController(sideMenuManager, rightSideController, leftSide: false);

            // Enable gestures. The left and/or right menus must be set up above for these to work.
            // Note that these continue to work on the Navigation Controller independent of the View Controller it displays!
            sideMenuManager.AddPanGestureToPresent(toView: this.NavigationController?.NavigationBar);

            sideMenuManager.AddScreenEdgePanGesturesToPresent(toView: this.NavigationController?.View);

        }

        private void GetViewControllers()
        {
            leftSideController = Storyboard.InstantiateViewController("LeftViewCOntroller_ID") as LeftViewCOntroller;
            rightSideController = Storyboard.InstantiateViewController("RightViewController_ID") as RightViewController;
        }


        void SetDefaults()
        {
            sideMenuManager.BlurEffectStyle = null;
            sideMenuManager.AnimationFadeStrength = 5d;
            sideMenuManager.ShadowOpacity = 5d;
            sideMenuManager.AnimationTransformScaleFactor = 5d;
            sideMenuManager.FadeStatusBar = true;
        }
    }
}

Now, run your application, you will get output like below.

 

Source code in Github.

 

Summary

• Install Xamarin.Sidebar plugin
• Configure the left and right view controller scene to Sidebar Manager
• Add Gestures

Thanks for reading!!!