Switch between several independent pages

Question

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. Basically this would be the same behaviour as using .net Maui Shell (which is unfortunately still flawed)Can you please give me an example ho to code this? This is kind of a duplicate of https://www.syncfusion.com/forums/134977/switch-between-several-independent-pages but for Maui instead of Xamarin. Maybe this helps.TIA Stephan

Kamalesh Periyasamy · Accepted Answer

Hi Tobias Horn,Thanks for the
update.Query 4: Is it possible to remove the appshell or is
it somehow relevant for the functionality?Yes, it is possible
to remove AppShell file in sample if it is not needed , and you can create a
direct instance of MainPage in the App.xaml.cs file as like below code snippet
. The AppShell can be used for hosting pages and providing flyout and tab menus
for navigation if required.Code Snippet:

public partial class App : Application
   {
          public App()
       {
           InitializeComponent();
   
           MainPage = new MainPage();
       }
   }

Query 5:   I can't locate the ttf file for
the fontfamily "MauiSampleBrowserIcon". where to find it?We have maintained
the MauiSampleBrowserIcon.ttf file in our internal class library . Therefore,
it may not be accessible to you as it is an internal file.
 If you have any
questions or need further clarification, feel free to reach out.Regards,Kamalesh
P

Kamalesh Periyasamy · Answer

Hi Tobias Horn,We have checked your query, and we would like to inform you that SfNavigationDrawer is a content view control. We can set  the content page content as content in the navigation drawer. We have created a workaround sample with navigation to different pages. In this sample, we have set different page content as navigation drawer content based on drawer content  listview selected item in listview selection changed event. The sample has been tested on both Android and iOS platforms, and we have attached it for your reference. Please check and let us know if you need any other details.Regards,Kamalesh PAttachment: SfNavigationDrawerSample_c5b68144.zip

Tobias Horn · Answer

Hi Kamalesh,thank you very much! That already helps a lot. Couple of questions are open:In MainPage.xaml Row 65-91 (<navigationdrawer:SfNavigationDrawer.ContentView>) doesnt seem to have any effect. The program fully runs without it?On Windows, when first page change has been done, the Drawer appears to be empty (or text color is white). I can still click the items and navigate though. Therefore it must be a visualisation probemI was not able to reduce the size of the hamburger icon below 40px, is there a reason why?Actually really wanted to recreate the Syncfusion .NET MAUI examples NavigationDrawer (https://github.com/syncfusion/maui-demos/tree/master/MAUI/NavigationDrawer). This looks very modern and stylish.Would it be much work for you to extract the navigationdrawer from the samplebrowser and equip it with the functionality of switching pages as you did with the example above?For this demo, the icon size issue issoled by a workaround using fonts, but I dont understand how the hamburger Icon is created with a font byFontFamily="MauiSampleBrowserIcon" Text="&#xe70e"as I cant locate the font anywhere and cant reproduce the icon in another app.Sorry for the many questions and thanks for the help! It is highly appreaciated :)Cheers,Toby

Kamalesh Periyasamy · Answer

Hi Tobias Horn,

Query 1: In MainPage.xaml Row 65-91 (<navigationdrawer:SfNavigationDrawer.ContentView>) doesn't seem to have any effect. The program fully runs without it?

After reviewing your query, we have made modifications by removing the content within <navigationdrawer:SfNavigationDrawer.ContentView> in the MainPage.xaml file.

Query 2: When first page change has been done, the Drawer appears to be empty.(or text color is white).

In Windows, framework listview items are not shown after the first navigation and it works properly on Android and iOS. So that we have removed ListView and used basic VerticalStackLayout and Labels with TapGestureRecognizer for Selection. Now it updates the text properly in the all platform after the navigation.

Query 3: I was not able to reduce the size of the hamburger icon below 40px.

This issue occurred due to the use of ImageButton for displaying the hamburger icon. To address this, we replaced ImageButton with Image and added a TapGestureRecognizer for toggling the Drawer. You can now resize the Hamburger icon as desired.

Query 4: Wanted to recreate the Syncfusion .NET MAUI examples NavigationDrawer

We have modified the sample layout to be similar to the Sample Browser layout. We have attached a sample for your reference.

Query 5: Can't locate the font anywhere and cant reproduce the icon in another app. (FontFamily="MauiSampleBrowserIcon" Text="&#xe70e")

To achieve this, you can add a FontIcon file to the Fonts folder and reference it in the MauiProgram.cs file, as shown in the code snippet below.

Please refer the below links for this

( https://github.com/syncfusion/maui-demos/tree/master/MAUI/NavigationDrawer/SampleBrowser.Maui.NavigationDrawer/Resources/Fonts)

https://github.com/syncfusion/maui-demos/blob/master/MAUI/NavigationDrawer/SampleBrowser.Maui.NavigationDrawer/MauiProgram.cs

Code Snippet:

In MauiProgram.cs

fonts.AddFont("NavigationDrawerFontIcon.ttf", "NavigationDrawerFontIcon");

Please check the attached sample and let us know if you have any other queries.

Regards,

Kamalesh P

Attachment: SfNavigationDrawerSample_d67b96f.zip

Tobias Horn · Answer

Hi Kamalesh,

thx again so much!

for query4:

is it possible to remove the appshell or is it somehow relevant for the functionality?

for query5:

the process here is now clear to me, nevertheless I cant locate the ttf file for the fontfamily "MauiSampleBrowserIcon". is it within NavigationDrawerFontIcon.ttf or where to find it?

Thanks again in advance! your help and Support is awesome!

Cheers,

Toby

Kamalesh Periyasamy · Answer

Hi Tobias Horn, Query 4: Is it possible to remove the appshell or
is it somehow relevant for the functionality? After reviewing your
query, we are unable to get your exact requirement for removing AppShell. To
better understand your needs, we kindly request more detailed information.
Please provide additional context or clarification regarding your requirements. Query 5:  I can't locate the ttf file for
the fontfamily "MauiSampleBrowserIcon". is it within
NavigationDrawerFontIcon.ttf or where to find it? We would like to
inform you that  MauiSampleBrowserIcon is not located
within NavigationDrawerFontIcon.ttf . We have attached the
MauiSampleBrowserIcon.ttf file for obtaining the Hamburger icon. Please check
the attached file and let us know if you have any other queries.  Regards,Kamalesh
PAttachment: MauiSampleBrowserIcon_bb6a4e30.zip

Tobias Horn · Answer

Hi Kamalesh,Query4:I just thought that the Shell is not needed anymore as we basically invoke/create it but make it unvisible. Wouldn't it be better to use Base navigation pages as described in:https://www.syncfusion.com/blogs/post/page-navigation-in-net-maui-an-overview.aspx or simply remove AppShell as done here:https://www.mauicestclair.fr/en/posts/tips/maui-app-with-no-shell/ I'm not saying it has to be different from your awesome example you send me, As a .net Maui beginner, I'm just interested in the best/most appropriate way and/or try to understand the differences and what to use when :)Query5:Thanks for the ttf! If you know I would be interested where to find the ttf and your maui demos where it is definetely used. Thats why I asked, I was baffled when the code refers to fontfamily "MauiSampleBrowserIcon" but I could not lacate the correct ttf and/or the font was also not registered anywhere in the code.Thanks for all your help and most likely hear back soon as SfDatagrid will be next for me to implement :)Have a nice o