I have created the Flyout menuItems below. In this particular order.
<FlyoutItem Shell.TabBarIsVisible="False" Route="header" FlyoutDisplayOptions="AsMultipleItems"> <ShellContent x:Name="BookItItem" Route="bookit" Title="BOOK IT" ContentTemplate="{DataTemplate views:HomePage}" /> <ShellContent x:Name="ExploreItem" Route="explore" Title="EXPLORE" ContentTemplate="{DataTemplate subs:ExplorePage}" /> <ShellContent x:Name="ContactItem" Route="contact" Title="CONTACT" ContentTemplate="{DataTemplate login:ContactPage}" /> </FlyoutItem> <FlyoutItem Shell.TabBarIsVisible="False" Route="main" FlyoutDisplayOptions="AsMultipleItems"> <ShellContent x:Name="MyReservationsItem" Route="reservation" Title="MY RESERVATIONS" ContentTemplate="{DataTemplate reservations:MyReservationsPage}" /> <ShellContent x:Name="MyGuestItem" Route="guest" Title="MY GUESTS" ContentTemplate="{DataTemplate guests:MyGuestsPage}" /> <ShellContent x:Name="OverViewItem" Route="account" Title="OVERVIEW" Icon="" ContentTemplate="{DataTemplate settings:OverViewPage}" /> <ShellContent x:Name="PasswordSecurityItem" Route="password" Title="PASSWORD & SECURITY" ContentTemplate="{DataTemplate settings:PasswordSecurityPage}" /> <ShellContent x:Name="EmailPreferencesItem" Route="email" Title="EMAIL PREFERENCES" ContentTemplate="{DataTemplate settings:EmailPreferencesPage}" /> </FlyoutItem>
However, the requirement based on certain conditions, is for the landing page to be the ExplorePage.
In the AppShell I have set it like so.
public AppShell(string pageName) { InitializeComponent(); Routing.RegisterRoute("explore", typeof(ExplorePage)); if( pageName == “explore”) { this.CurrentItem = this.Items[0].Items[1]; this.CurrentItem.Style = (Style)this.Resources[“MainShell"]; ExploreItem.SetValue(FlyoutBackgroundColorProperty, Color.Blue); } }
It lands on that page, the FlyoutBackgroundColor does not change to blue, meaning it doesn’t highlight the row on the flyout menu item list.
When I click on the same Explore MenuItem, it throws an exception.
Error Message : Unable to figure out route for: //
I set the FlyoutDisplayOptionsProperty to "AsMultipleItems" to group the items such that the separator separates the groups.
I added the
Routing.RegisterRoute("explore", typeof(ExplorePage)); to the constructor with the hope that would resolve the problem but it hasn't.
How do I solve this problem?
Unable to figure out route for: //
If you want to change the selected item at startup time, try to follow this blog:
https://medium.com/@jasper76/selecting-a-default-flyout-menu-item-in-xamarin-forms-shell-626d9abe9b58
Firstly, name your flyout item and then wrap your ShellContent
with a ShellSection
like:
<ShellSection x:Name="ExploreItem" Route="explore" Title="EXPLORE"> <ShellContent ContentTemplate="{DataTemplate subs:ExplorePage}" /> </ShellSection>
Finally, setup like:
CurrentItem = YourFlyout; YourFlyout.CurrentItem = ExploreItem;
Answers
If you want to change the selected item at startup time, try to follow this blog:
https://medium.com/@jasper76/selecting-a-default-flyout-menu-item-in-xamarin-forms-shell-626d9abe9b58
Firstly, name your flyout item and then wrap your
ShellContent
with aShellSection
like:Finally, setup like:
@LandLu When you say YourFlyOut you mean the FlyoutItem?
Something like this?
CurrentItem = FlyoutItem1;
FlyoutItem1.CurrentItem = ExploreItem;
Thanks @LandLu, if I need to disable a FlyoutItem for example, I want to disable the explore shell content now wrapped in the Shell Section how do I disable it?
I tried ExploreItem.IsEnabled = false.
It's not working. When I click on Explore, it's navigates to the page.
I saw you raised a new thread here:
https://forums.xamarin.com/discussion/181896/how-does-one-disable-a-shellcontent-in-a-shellsection-using-shell-in-xamarin-forms
We could discuss this specific issue there.