Forum Xamarin.Forms

How do I solve the Unable to figure out route for: // in Xamarin Shell Flyout menuItems?

toyinstoyins USMember ✭✭✭
edited May 17 in Xamarin.Forms

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 &amp; 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: //

Best Answer

Answers

  • toyinstoyins USMember ✭✭✭
    edited May 18

    @LandLu When you say YourFlyOut you mean the FlyoutItem?
    Something like this?

                 <FlyoutItem Shell.TabBarIsVisible="False" Route="header" x:Name="FlyoutItem1"              FlyoutDisplayOptions="AsMultipleItems">
                            <ShellContent x:Name="BookItItem" Route="bookit" Title="BOOK IT" ContentTemplate="{DataTemplate views:HomePage}" />
        <ShellSection x:Name="ExploreItem" Route="explore" Title="EXPLORE">
                            <ShellContent ContentTemplate="{DataTemplate subs:ExplorePage}" />
        </ShellSection>
                            <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 &amp; SECURITY" ContentTemplate="{DataTemplate settings:PasswordSecurityPage}" />
                            <ShellContent x:Name="EmailPreferencesItem" Route="email" Title="EMAIL PREFERENCES" ContentTemplate="{DataTemplate settings:EmailPreferencesPage}"  />
                        </FlyoutItem>
    

    CurrentItem = FlyoutItem1;
    FlyoutItem1.CurrentItem = ExploreItem;

  • toyinstoyins USMember ✭✭✭
    edited May 18

    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.

  • LandLuLandLu Member, Xamarin Team Xamurai
Sign In or Register to comment.