Switch between several independent pages

[Stephan Schrade]

Hi support,

in order to use the navigation drawer as my main navigation menu, I want to jump to different pages selecting items from the drawer.

But the pages should not be childrens of the main page, because then they will have a return arrow in the upper left corner.

(this is shown in How to Navigate to a page in SfNavigationDrawer)

I want to have the hamburger icon on every page so I can jump from each page to every other page.

Can you please give me an example ho to code this?

TIA Stephan

[Selva Kumar Veerakrishnan]

Hi Stephan,

Thank you for contacting Syncfusion Support.

We have prepared a sample based on your requirement, in which we have set the Hamburger Button at the Top of the NavigationDrawer Control. From the Drawer content View we can able to navigate to a different page by having the Hamburger Button at the top of each page. Please download the sample from the link given below.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer2_41295522157.zip

Please let us know if you have any concern about this.

Regards,
Selva Kumar V.

[Stephan Schrade]

Hi Selva Kumar,

many thanks, this does help me a lot.

Regards,

Stephan

[Selva Kumar Veerakrishnan]

Hi Stephan,

Thanks for your response. Please let us know if you need any assistance on this.

Regards,

Selva Kumar V.

[Pete Vickers]

This works well - but how do I get back to showing the original content page?

Thanks

Pete

[Rachel A]

Hi Stephan, 

 

Thanks for your update. 

 

We have analyzed your requirement of "how do I get back to showing the original content page?" and this can be achieved by loading a page on SfNavigationDrawer ContentView initially and adding the same page to the list of pages available in the SfNavigationDrawer DrawerContentView. We have also attached the sample we prepared. Please find the sample from below link and update us if you have any other concerns on this. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavDrawerSample2087328003.zip 

 

Thanks, 

Rachel. 

[Walter]

Hi,

in the linked solution every page recreate the NavigationDrawer structure of child items, so for big projects, that mean a lot of work added to the normal layout and rendering phase. 

If I understand correctly, the standard Xamarin Forms MasterDetailPage mantain che Master part of the page, equivalent to the Drawer of SfNavigationDrawer and redraw only the page in which we have navigated to.

For performance reasons, we should look for similar behavior.

Do you think that is possible?

Thanks

[Rachel A]

Hi Walter, 

  

We would like to let you know that the Master detail page is a page that navigates between pages but the SfNavigationDrawer is used to navigate between the views and so every view is redrawn. 

  

Please let us know if you have any other concerns.  

 

Thanks, 

Rachel. 

[Walter]

Hi Rachel,

yes, I already knew what you wrote but the principle is the same.

If I have to navigate between the views but the drawer options don't change, why do I have to redesign them every time I select a new view?

Is better if I redraw che drawer content only when I need to change it.

Thanks

Walter

[Sakthivel Palaniyappan]

Hi Walter,

Thanks for your update.

We have analyzed your query and you can fulfill this requirement by initializing the view when select the first time and reuse the view after selecting already selected view as like below code snippet. 

C#: 

  void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e) 

        { 

            if (e.SelectedItem.ToString() == "Home") 

            { 

                navigationDrawer.ContentView = GetView("Home"); 

                headerLabel.Text = "Home"; 

            } 

            if (e.SelectedItem.ToString() == "Contacts") 

            { 

                navigationDrawer.ContentView = GetView("Contacts"); 

                headerLabel.Text = "Contacts"; 

            } 

            else if (e.SelectedItem.ToString() == "Remainders") 

            { 

                navigationDrawer.ContentView = GetView("Remainders"); 

                headerLabel.Text = "Remainders"; 

            } 

            else if (e.SelectedItem.ToString() == "ToDoList") 

            { 

                navigationDrawer.ContentView = GetView("ToDoList"); 

                headerLabel.Text = "ToDoList"; 

            } 

            navigationDrawer.ToggleDrawer(); 

 

        }

       private View GetView(string name) 

        { 

            View view; 

 

            if (name == "Home") 

            { 

                if (homePage == null) 

                    homePage = new Home(); 

 

                view = homePage.Content; 

            } 

            else if (name == "Remainders") 

            { 

                if (remaindersPage == null) 

                    remaindersPage = new Remainders(); 

                view = remaindersPage.Content; 

            } 

            else if (name == "Contacts") 

            { 

                if (contactsPage == null) 

                    contactsPage = new Contacts(); 

                view = contactsPage.Content; 

            } 

            else 

            { 

                if (doListPage == null) 

                    doListPage = new ToDoList(); 

                view = doListPage.Content; 

            } 

 

            return view; 

        } 

 

We have created sample based on your requirement, please find the sample from below location.

Sample link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavDrawerSample32857653.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P.