Xamarin.iOS
Xamarin.iOS-navigatielade

Syntaxis

1. Flayout-navigatiecomponent: https://components.xamarin.com/view/flyoutnavigation

Xamarin.iOS-navigatielade

1. Maak een nieuw Xamarin.iOS-blanco project (Single View-app).

2. Klik met de rechtermuisknop op de map "Componenten" en selecteer "Meer componenten ophalen":

3. Typ in het zoekvak: "Navigatie met navigatie" en voeg de onderstaande component toe aan uw app:

Vergeet niet ook de referentie "Mono.Touch.Dialog-1" toe te voegen:

4. Klik nu strak op het project en voeg een nieuwe UIViewController toe met de naam "NavigationDrawerController":

5. Nu moet de code voor de klasse "NavigationDrawerController" er als volgt uitzien:

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;
    }
}

Geen zorgen dat "MainNavigationController" rood is gemarkeerd - we zullen het in de volgende stap toevoegen.

6. Open nu het bestand "Main.storyboard":

a) Voeg een UIViewController toe:

Vul de velden "Klasse" en "StoryboardID" in met deze naam: "FirstViewController"

b) Voeg daarna Navigation Controller met root UIViewController toe:

Vul de velden "Class" en "StoryboardID" in met deze naam: "MainNavigationController" voor de Navigation Controller

Vul de velden "Klasse" en "StoryboardID" in met deze naam: "DetailsViewController" voor de rootcontroller

Xamarin (of Visual) Studio maakt code-achter klassen voor bovenstaande controllers.

7. Open nu de klasse "FirstViewController" en plak de onderstaande code:

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. Open de klasse "MainNavigationController" en plak de onderstaande code:

   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. Laatste klasse genaamd "DetailsViewController" zou er zo uit moeten zien:

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

Houd er rekening mee dat "DetailsViewController" is afgeleid van "NavigationDrawerController" die we in het begin hebben gemaakt.

Dat is het. Nu kunt u de lade naar wens aanpassen. Vind ook een kant-en-klaar monster op mijn GitHub:

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