Shell application with flyout menu without showing the navigation in the flyout

RogerSchmidlinRogerSchmidlin CHUniversity ✭✭✭

I have a shell application that uses the flyout with tabs to navigate. Is it possible to JUST show the navigation as tabs and not have any navigation buttons in the flyout itself? I would like to use the flyout view for other things like user info.

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    In Xamarin.Forms 4.2.709249, you can achieve this feature. Update Xamarin.Forms, then use TabBar for navigation and menuitem for display info.

    <TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
        <Tab Title="About" Icon="tab_about.png">
            <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
        </Tab>
    </TabBar>
    ...
    <menuitem text="random"
                  iconimagesource="tab_feed.png" />
    <menuitem text="help"
                  iconimagesource="tab_about.png"/>
    
  • RogerSchmidlinRogerSchmidlin CHUniversity ✭✭✭

    @Jarvan When I try to replace the Flyout with a TabBar, my slideout disappears. It seems like I have to have at least one flyout defined in order for the slideout to appear.

  • JarvanJarvan Member, Xamarin Team Xamurai

    Have you updated Xamarin.Forms to the version 4.2.709249?

  • RogerSchmidlinRogerSchmidlin CHUniversity ✭✭✭

    Yep, I did. I used the sample provided in the microsoft doc about shell and changed exchanged the Flyout with TabBar in the AppShell.xaml. Everything works, but no more flyout/slideout

  • JarvanJarvan Member, Xamarin Team Xamurai

    Have you updated the Xamarin.Forms on the platform project? I've test the code, it works on my side.

  • RogerSchmidlinRogerSchmidlin CHUniversity ✭✭✭

    Yes I did. So you are saying that you can have a shell application with an empty (not even one navigation item) slideout and tabs? If so, can you share your project with me?

  • JarvanJarvan Member, Xamarin Team Xamurai

    Here is demo file, hope it'll help you.

  • RogerSchmidlinRogerSchmidlin CHUniversity ✭✭✭

    Thanks for your Demo. It shows tab bars but has no slideout (masterdetail). I want both worlds. I want masterdetail AND tabs with shell.

  • JarvanJarvan Member, Xamarin Team Xamurai

    Sorry for my mistake, I downgrated the xamairn.forms in platform project for test, but not to update it back. Cheke the new file.

  • RogerSchmidlinRogerSchmidlin CHUniversity ✭✭✭

    @Jarvan Thank you for sending me your sample. Yes, your sample works! I try to do the same thing in the Xamarin Demo and it doesn't work. I try to do everything the same. Updated to the latest Xamarin.Forms version. And I still get no menu! I know this might be asked too much, but would you mind trying it with the Sample app Xamarin provides? Xaminals used in their docu?
    I am at the end of my little wisdom :(

  • JarvanJarvan Member, Xamarin Team Xamurai

    I tested the Xaminals app and changed the code of AppShell.xmal with TabBar. It works as the demo I created.

    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    
    <TabBar>
        <Tab Title="Domestic1"
                 Icon="paw.png">
            <ShellContent Route="cats"
                              Style="{StaticResource DomesticShell}"
                              Title="Cats"
                              Icon="cat.png"
                              ContentTemplate="{DataTemplate views:CatsPage}" />
        </Tab>
        <Tab Title="Domestic2"
                 Icon="paw.png">
            <ShellContent Route="dogs"
                              Style="{StaticResource DomesticShell}"
                              Title="Dogs"
                              Icon="dog.png"
                              ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
    </TabBar>
    
    <MenuItem Text="Random"
                  Icon="random.png"
                  Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
                  Icon="help.png"
                  Command="{Binding HelpCommand}"
                  CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />
    

  • MuhiMuhi Member ✭✭

    @Jarvan
    Sorry to bug you but I am having the same problem with IOS and the not showing up. I have Xamarin.Forms 4.2.0.8 and my AppShell.xaml is based off of the example you just posted.
    If you have any other ideas on how I can troubleshoot the problem. Thanks

  • MuhiMuhi Member ✭✭
    edited October 3

    @Jarvan user @LandLu was able to help me with this and this was what ended up working just wanted to pass it along in this post.

    You need to consume FlyoutItem to display the flyout: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout
    So change the architecture like:
    <FlyoutItem>
    <Tab Title="Browse" Icon="tab_feed.png">
    </Tab>
    </FlyoutItem>
    <MenuItem Text="random" IconImageSource="tab_feed.png" />
    The first flyout item to present your tabs and the rest displays the other information.

  • MuhiMuhi Member ✭✭
    edited October 3

    Sorry problem with the code cut past

Sign In or Register to comment.