Xamarin.iOS
Xamarin.iOS Navigation Drawer

Sintaxis

1. Flayout Navigation Component: https://components.xamarin.com/view/flyoutnavigation

Xamarin.iOS Navigation Drawer

1. Crear un nuevo proyecto en blanco Xamarin.iOS (aplicación de vista única).

2. Haga clic derecho en la carpeta "Componentes" y seleccione "Obtener más componentes":

3. En el cuadro de búsqueda, escriba "Navegación flotante" y agregue el siguiente componente a su aplicación:

Recuerde también agregar la referencia "Mono.Touch.Dialog-1":

4. Ahora haga clic en el proyecto y agregue el nuevo UIViewController llamado "NavigationDrawerController":

5. Ahora el código para la clase "NavigationDrawerController" debería verse a continuación:

public partial class NavigationDrawerController : UIViewController
{
    public NavigationDrawerController(IntPtr handle) : base(handle)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        NavigationItem.LeftBarButtonItem = getMenuItem();
        NavigationItem.RightBarButtonItem = new UIBarButtonItem { Width = 40 };
    }

    UIBarButtonItem getMenuItem()
    {
        var item = new UIBarButtonItem();
        item.Width = 40;
        //Please provide your own icon or take mine from the GitHub sample:
        item.Image = UIImage.FromFile("Images/[email protected]");
        item.Clicked += (sender, e) =>
        {
            if (ParentViewController is MainNavigationController)
                (ParentViewController as MainNavigationController).ToggleMenu();
        };

        return item;
    }
}

No se preocupe si "MainNavigationController" está resaltado en rojo, lo agregaremos en el siguiente paso.

6. Ahora abra el archivo "Main.storyboard":

a) Agrega un UIViewController:

Rellene los campos "Class" y "StoryboardID" con este nombre: "FirstViewController"

b) Después de eso agregue Navigation Controller con root UIViewController:

Rellene los campos "Class" y "StoryboardID" con este nombre: "MainNavigationController" para el controlador de navegación

Rellene los campos "Class" y "StoryboardID" con este nombre: "DetailsViewController" para el controlador raíz

Xamarin (o Visual) Studio creará clases de código subyacente para los controladores anteriores.

7. Ahora abra la clase "FirstViewController" y pegue el siguiente código:

public partial class FirstViewController : UIViewController
{
    public FirstViewController (IntPtr handle) : base (handle)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        createNavigationFlyout();
    }

    void createNavigationFlyout()
    {
        var navigation = new FlyoutNavigationController
        {
            //Here are sections definied for the drawer:
            NavigationRoot = new RootElement("Navigation")
            {
                new Section ("Pages") 
                {
                    new StringElement ("MainPage")
                }
            },

            //Here are controllers definied for the drawer (in this case navigation controller with one root):
             ViewControllers = new[] 
             {
                     (MainNavigationController)Storyboard.InstantiateViewController("MainNavigationController")
             }
        };

        View.AddSubview(navigation.View);
   }
}

8. Abra la clase "MainNavigationController" y pegue el siguiente código:

   public partial class MainNavigationController : UINavigationController
   {
        public MainNavigationController (IntPtr handle) : base (handle)
        {
        }
        //Responsible for opening/closing drawer:
        public void ToggleMenu()
        {
            if (ParentViewController is FlyoutNavigationController)
            (ParentViewController as FlyoutNavigationController).ToggleMenu();
        }
    }
   

9. La última clase llamada "DetailsViewController" debería verse así:

public partial class DetailsViewController : NavigationDrawerController
{
    public DetailsViewController (IntPtr handle) : base(handle)
    {
    }
}

Tenga en cuenta que "DetailsViewController" deriva de "NavigationDrawerController" que creamos al principio.

Eso es. Ahora puedes personalizar el cajón como quieras. Por favor, también encontrar la muestra lista en mi GitHub:

https://github.com/Daniel-Krzyczkowski/XamarinIOS/tree/master/Xamarin.iOS.NavigationDrawer