Flyout and MenuTemplates

FlyoutMenuTemplates.md

<?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:ShellFlyouts.Views" Title="ShellFlyouts" x:Class="ShellFlyouts.AppShell"
    Shell.ItemTemplate="{StaticResource FlyoutTemplates}"
    Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}"
      >
    <!-- 
        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="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <DataTemplate x:Key="FlyoutTemplates">
                <Grid HeightRequest="{x:OnPlatform Android=50}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroupList>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="#F2F2F2" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding FlyoutIcon}"
                        VerticalOptions="Center"
                        HorizontalOptions="Center"
                        HeightRequest="{x:OnPlatform Android=24, iOS=22}"
                        WidthRequest="{x:OnPlatform Android=24, iOS=22}">
                    </Image>
                    <Label VerticalOptions="Center"
                           Text="{Binding Title}"
                           FontSize="{x:OnPlatform Android=14, iOS=Small}"
                           FontAttributes="Bold" Grid.Column="1">
                        <Label.TextColor>
                            <OnPlatform x:TypeArguments="Color">
                                <OnPlatform.Platforms>
                                    <On Platform="Android" Value="#D2000000" />
                                </OnPlatform.Platforms>
                            </OnPlatform>
                        </Label.TextColor>
                        <Label.Margin>
                            <OnPlatform x:TypeArguments="Thickness">
                                <OnPlatform.Platforms>
                                    <On Platform="Android" Value="20, 0, 0, 0" />
                                </OnPlatform.Platforms>
                            </OnPlatform>
                        </Label.Margin>
                        <Label.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <OnPlatform.Platforms>
                                    <On Platform="Android" Value="sans-serif-medium" />
                                </OnPlatform.Platforms>
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Shell.Resources>
    <!-- Your Pages -->
    <FlyoutItem Icon="tab_feed.png" Title="Cat">
        <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>
    </FlyoutItem>
    <FlyoutItem Icon="tab_feed.png" Title="Rabbits">
        <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>
    </FlyoutItem>
    <MenuItem Icon="tab_feed.png"  Text="Test Item"></MenuItem>
</Shell>