SideMenu In Xamarin iOS

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.
 
SideMenu In Xamarin iOS
 
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.
 
 SideMenu In Xamarin iOS

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.
  1. var left = new UISideMenuNavigationController(sideMenuManager, leftSideController, leftSide: true);  
  2.            left.NavigationBarHidden = true;  
  3.            sideMenuManager.LeftNavigationController = left;  
  4.            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.
  1. // Enable gestures. The left and/or right menus must be set up above for these to work.  
  2.            // Note that these continue to work on the Navigation Controller independent of the View Controller it displays!  
  3.            sideMenuManager.AddPanGestureToPresent(toView: this.NavigationController?.NavigationBar);  
  4.   
  5.            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.
  1. var left = new UISideMenuNavigationController(sideMenuManager, leftSideController, leftSide: true);  
  2.             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.
  1. void SetDefaults()  
  2.         {  
  3.             sideMenuManager.BlurEffectStyle = null;  
  4.             sideMenuManager.AnimationFadeStrength = 5d;  
  5.             sideMenuManager.ShadowOpacity = 5d;  
  6.             sideMenuManager.AnimationTransformScaleFactor = 5d;  
  7.             sideMenuManager.FadeStatusBar = true;  
  8.         }  
Full View Controller Code
  1. using System;  
  2. using UIKit;  
  3. using Xamarin.SideMenu;  
  4.   
  5. namespace SideMenu  
  6. {  
  7.     public partial class LeftSideViewController : UIViewController  
  8.     {  
  9.         private SideMenuManager sideMenuManager;  
  10.         private UIViewController leftSideController;  
  11.         private UIViewController rightSideController;  
  12.   
  13.         public LeftSideViewController(IntPtr handle) : base(handle)  
  14.         {  
  15.         }  
  16.         public override void ViewDidLoad()  
  17.         {  
  18.             base.ViewDidLoad();  
  19.   
  20.             this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem("Left Menu", UIBarButtonItemStyle.Plain, (sender, e) =>  
  21.             {  
  22.                 PresentViewController(sideMenuManager.LeftNavigationController, truenull);  
  23.             }),  
  24.                false);  
  25.   
  26.             this.NavigationItem.SetRightBarButtonItem(  
  27.                 new UIBarButtonItem("Right Menu", UIBarButtonItemStyle.Plain, (sender, e) =>  
  28.                 {  
  29.                     PresentViewController(sideMenuManager.RightNavigationController, truenull);  
  30.                 }),  
  31.                 false);  
  32.             sideMenuManager = new SideMenuManager();  
  33.   
  34.             SetupSideMenu();  
  35.             SetDefaults();  
  36.         }  
  37.         void SetupSideMenu()  
  38.         {  
  39.             GetViewControllers();  
  40.   
  41.             var left = new UISideMenuNavigationController(sideMenuManager, leftSideController, leftSide: true);  
  42.             left.NavigationBarHidden = true;  
  43.             sideMenuManager.LeftNavigationController = left;  
  44.             sideMenuManager.RightNavigationController = new UISideMenuNavigationController(sideMenuManager, rightSideController, leftSide: false);  
  45.   
  46.             // Enable gestures. The left and/or right menus must be set up above for these to work.  
  47.             // Note that these continue to work on the Navigation Controller independent of the View Controller it displays!  
  48.             sideMenuManager.AddPanGestureToPresent(toView: this.NavigationController?.NavigationBar);  
  49.   
  50.             sideMenuManager.AddScreenEdgePanGesturesToPresent(toView: this.NavigationController?.View);  
  51.   
  52.         }  
  53.   
  54.         private void GetViewControllers()  
  55.         {  
  56.             leftSideController = Storyboard.InstantiateViewController("LeftViewCOntroller_ID"as LeftViewCOntroller;  
  57.             rightSideController = Storyboard.InstantiateViewController("RightViewController_ID"as RightViewController;  
  58.         }  
  59.   
  60.   
  61.         void SetDefaults()  
  62.         {  
  63.             sideMenuManager.BlurEffectStyle = null;  
  64.             sideMenuManager.AnimationFadeStrength = 5d;  
  65.             sideMenuManager.ShadowOpacity = 5d;  
  66.             sideMenuManager.AnimationTransformScaleFactor = 5d;  
  67.             sideMenuManager.FadeStatusBar = true;  
  68.         }  
  69.     }  
  70. }  
Now, run your application, you will get output like below.
 
SideMenu In Xamarin iOSSideMenu In Xamarin iOSSideMenu In Xamarin iOS

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!!!