Shell - Flyout menu items and tab menu items

dumanadamdumanadam Member ✭✭

Hi all,
Ive run into an issue Im not quite sure how to resolve.

I have created a Flyout with several ShellContent. These display in the flyout and as menu items in the bottom tab. I can hide the bottom tab on a page with Shell.TabBarIsVisible="False", but how would I do the opposite?

So for example,

Flyout menu has
news
mydocs
settings
logout

How do I have each page display a tab menu, but only have mydocs and settings on the bottom tab and not display news and logout on the bottom tab?

Currently I can hide the bottom tab on a page completely with Shell.TabBarIsVisible="False", but how would I show the tab bar on every page, just not every item on the bottom tab that is displayed on the flyout menu?

Best Answer

  • dumanadamdumanadam ✭✭
    edited July 19 Accepted Answer

    As is tradition with new coders, after a week of trying to figure it out, I figured it out after I posted asking for help.... So for anyone else looking to resolve this the problem was the way I was laying everything out.

    The correct way to lay it out is to treat each flyoutitem individually.

        <flyoutitem …>
            <tab …..>
                <shellcontent>
            </tab>
            <tab …..>
                <shellcontent>
            </tab>
            <tab …..>
                <shellcontent>
            </tab>
        </flyoutitem>
    

    will give you a menu item with 3 tabs that you want. So for the next menu item if you want a different set of tab menus, then you lay them out for each page individually.

    watch Davids stream towards the end he has an example (sorry forgot the time) which shows the above.

    youtube.com/watch?v=0y1bUAcOjZY

Answers

  • dumanadamdumanadam Member ✭✭
    edited July 19 Accepted Answer

    As is tradition with new coders, after a week of trying to figure it out, I figured it out after I posted asking for help.... So for anyone else looking to resolve this the problem was the way I was laying everything out.

    The correct way to lay it out is to treat each flyoutitem individually.

        <flyoutitem …>
            <tab …..>
                <shellcontent>
            </tab>
            <tab …..>
                <shellcontent>
            </tab>
            <tab …..>
                <shellcontent>
            </tab>
        </flyoutitem>
    

    will give you a menu item with 3 tabs that you want. So for the next menu item if you want a different set of tab menus, then you lay them out for each page individually.

    watch Davids stream towards the end he has an example (sorry forgot the time) which shows the above.

    youtube.com/watch?v=0y1bUAcOjZY

  • dumanadamdumanadam Member ✭✭
    edited July 20

    ok it looks like I spoke too soon unfortunately.

    While the above does work in some sense, I have ended up with a huge AppShell.xaml file as I have a lot of repeated code, which I doubt is the way Shell is meant to be used. For example I have 7 menu items in the flyout, 5 of which have the same 4 bottom tabs on the page, so I have essentially copy pasted the below code 5 times, which seems incorrect?

     <flyoutitem A…>
            <tab ….. 1>
                <shellcontent >
            </tab>
            <tab ….. 2>
                <shellcontent>
            </tab>
            <tab ….. 3>
                <shellcontent>
            </tab>
       <tab ….. 4>
                <shellcontent>
            </tab>
        </flyoutitem>
    
     <flyoutitem B…>
            <tab ….. 1>
                <shellcontent >
            </tab>
            <tab ….. 2>
                <shellcontent>
            </tab>
            <tab ….. 3>
                <shellcontent>
            </tab>
       <tab ….. 4>
                <shellcontent>
            </tab>
        </flyoutitem>
    

    In addition the other problem is that when I click on a flyout item, it loses track of highlighting the correct tab if you are on a tab page. I think this is due to each tab being linked to an individual flyoutitem.

    So if I click FlyoutItem A, then click Tab 2,

    The flyout is still highlighting FlyoutItem A, and does not highlight FLyoutItem B which is linked to Tab 2 that I clicked

    Hopefully someone can point me in the right direction as to how I can correctly lay out this menu with shell?

    Thanks!

Sign In or Register to comment.