Forum Xamarin.Forms

Can't seem to be able to use Flyout menu with Shell.

I'm toying with Shell and I seem to be unable to populate and show a Flyout menu. I created a new project using the default Shell project and when I try to add items to the Flyout it never shows up, not with the hamburger button nor using the gesture.

My code is the following, I simply added a couple of items on top of the default code:

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:d="http://xamarin.com/schemas/2014/forms/design"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   xmlns:local="clr-namespace:App1.Views"
   Title="App1"
   x:Class="App1.AppShell">

<!-- 
    Styles and Resources 
-->
<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        </Style>
        <Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

<!-- Your Pages -->
<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>

<FlyoutItem Title="Browse"
            Icon="tab_feed.png">
    <Tab>
        <ShellContent>
            <local:ItemsPage />
        </ShellContent>
    </Tab>
</FlyoutItem>
<FlyoutItem Title="About"
            Icon="tab_about.png">
    <Tab>
        <ShellContent>
            <local:AboutPage />
        </ShellContent>
    </Tab>
</FlyoutItem>
</Shell>

As you can see there doesn't seem to be anything wrong. Am I missing something critical here? Should I add more in order to start using the Flyout? From the documentation it seems to be enough.

Tagged:

Best Answer

Answers

Sign In or Register to comment.