question

abanoubadly-0688 avatar image
0 Votes"
abanoubadly-0688 asked JarvanZhang-MSFT edited

Appshell Flyoutitems

I'm new to xamarin forms and I'm currently building an app that requires different pages and different flyout items per page .
so I tried to make the is Visible property as a bindable property but it didn't work for me.
so now I have no idea how it can be done.
for more explanation on my requirement
i need the first page to have something like this 40998574-17ca458c-68bd-11e8-8d45-639933e0dfd7.PNG


and on another page i need completely different flyout items like this 1*eAumQ3gbkkgzLb0cXZIG1A.png



thanks in advance

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

If you want to show different app template for the different use roles, try creating shell pages for the roles separately.

if (the_condition)
{
    MainPage = new AdminShell();
}
else
{
    MainPage = new CustomerShell();
}
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

Hello,​

Welcome to our Microsoft Q&A platform!

building an app that requires different pages and different flyout items per page

FlyoutItem is the on the top visual hierarchy of Shell. FlyoutItem contains some Tabs, each Tab object can contain one or more ShellContent objects, with each ShellContent object displaying a single ContentPage. So the page works as an item of flyoutItem, it's unable to display a flyoutItem per page. Instead, each flyoutItem would contain different pages.

You could define different tabs to display the pages.

<Shell ...>
    <FlyoutItem Title="item_1">
        <Tab Title="main_page" >
            <ShellContent Title="main_page_1" ContentTemplate="{DataTemplate local:MainPage_1}"/>
            <ShellContent Title="main_page_2" ContentTemplate="{DataTemplate local:MainPage_2}"/>
        </Tab>
        <Tab  Title="test_page">
            <ShellContent Title="test_page_1" ContentTemplate="{DataTemplate local:TestPage_1}"/>
            <ShellContent Title="test_page_2" ContentTemplate="{DataTemplate local:TestPage_2}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="item_2">
        ...
    </FlyoutItem>
</Shell>

Here are the related docs, you could refer to:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/introduction#application-visual-hierarchy
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@JarvanZhang-MSFT
thanks for your answer it was really helpful .
but to make sure that I understood it , you're saying that I can not achieve the requirement that I have posted earlier .
meaning that I can have a flyout items on one page and a different flyout items on another page using app shell .
if so can I have different flyout items declared on each page so that every page will have its own items .

0 Votes 0 ·

if so can I have different flyout items declared on each page so that every page will have its own items .

If you display only one page per flyoutItem, try using FlyoutPage to display the views instead.
Here is the related doc, you could refer to it.
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage

0 Votes 0 ·
abanoubadly-0688 avatar image
0 Votes"
abanoubadly-0688 answered

@JarvanZhang-MSFT
am not sure that i was clear on my question.
maybe this picture can demonstrate what am trying to achieve 144207-question.png



question.png (120.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.