Switch between several independent pages

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.

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

9 Replies

SK Selva Kumar  Veerakrishnan Syncfusion Team December 11, 2017 08:52 AM UTC

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.


SS Stephan Schrade December 11, 2017 02:13 PM UTC

Hi Selva Kumar,
many thanks, this does help me a lot.

Regards,
Stephan


SK Selva Kumar  Veerakrishnan Syncfusion Team December 12, 2017 04:00 AM UTC

Hi Stephan,

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

Regards,

Selva Kumar V.


PV Pete Vickers December 27, 2019 10:20 AM UTC

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

Thanks

Pete


RA Rachel A Syncfusion Team December 30, 2019 12:19 PM UTC

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. 
 
 
Thanks, 
Rachel. 



WA Walter January 2, 2020 08:41 PM UTC

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


RA Rachel A Syncfusion Team January 3, 2020 01:08 PM UTC

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. 



WA Walter January 3, 2020 01:48 PM UTC

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


SP Sakthivel Palaniyappan Syncfusion Team January 9, 2020 01:55 PM UTC

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.
 


Loader.
Up arrow icon