CODEWITHSUNDEEP
shellxamarin.formsflyout
George M Ceaser Jr
George M Ceaser Jr

Reputation: 1791

Xamarin Forms Shell FlyoutItem

I would like to make my app have three flyout menu options as follows:

Configuration

Collect Data

About

When a user selects the Configuration flyout menu option, I would like there to be a bottom group of two tabs that say

Network Configuration ------ Data Configuration

I only want the bottom tabs visible when the Configuration flyout menu option is selected. Is there a way to do this in Xaml or do I need to do it in code manually showing and hiding the bottom tabs?

Upvotes: 0

Views: 2875

Answers (1)

nevermore
nevermore

Reputation: 15816

Yes, you can do it in Xaml. You can define differnet ShellContent in each FlyoutItem.

Create a new project with Shell template and then add those codes to config shell:

 <Shell.FlyoutHeader>
        <Grid BackgroundColor="Black">
            <Label Text="Test"
               TextColor="White"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        </Grid>
    </Shell.FlyoutHeader>

    <FlyoutItem Title="Configuration"
                >
        <ShellContent Title="Network Configuration">
            <views:NetworkConfiguration />
            </ShellContent>

        <ShellContent Title="Data Configuration">
            <views:DataConfiguration />
        </ShellContent>


    </FlyoutItem>

    <FlyoutItem Title="Collect Data"
                >
        <Tab>
            <ShellContent Title="Configuration"
                          ContentTemplate="{DataTemplate views:Page2}" />
            <ShellContent Title="Collect Data"
                          ContentTemplate="{DataTemplate views:Page3}" />
        </Tab>
    </FlyoutItem>


    <FlyoutItem Title="About">

        <ShellContent ContentTemplate="{DataTemplate views:AboutPage}" />

    </FlyoutItem>

You can refer this example: shell-example-xamarin.forms

Upvotes: 1

Related Questions