[Shell] No styling properties for ShellItem or MenuItem

[davidortinau]

Description

There are some appearance styles available for tabs and other shell items, but nothing for the items that appear in the flyout.

https://github.com/xamarin/Xamarin.Forms/blob/shell-3.4.0/Xamarin.Forms.Core/Shell.cs#L80

For the flyout all we have is FlyoutBackgroundColor. Would like:

• icon color
• label color
• background color
• selected background color
• disabled background color

Additionally there's a separator between ShellItems and MenuItems that needs to be styled or hidden.

Also see #4399 about mixing Shell and Menu items.

APIS

public class ShellSection/ShellContent

// These apply to the tab 
		public static readonly BindableProperty TitleColorProperty		
		public static readonly BindableProperty TitleUnselectedColorProperty			
		public static readonly BindableProperty BackgroundColorProperty		
		public static readonly BindableProperty BackgroundColorUnselectedProperty
		public static readonly BindableProperty IconColor
		public static readonly BindableProperty IconUnselectedColor

// These apply when the element is used as a flyout
		public static readonly BindableProperty FlyoutTitleColorProperty		
		public static readonly BindableProperty FlyoutTitleUnselectedColorProperty			
		public static readonly BindableProperty FlyoutBackgroundColorProperty		
		public static readonly BindableProperty FlyoutBackgroundColorUnselectedProperty
		public static readonly BindableProperty FlyoutIconUnselectedColor

public class ShellItem

// These apply to the Flyout
		public static readonly BindableProperty TitleColorProperty		
		public static readonly BindableProperty TitleUnselectedColorProperty			
		public static readonly BindableProperty BackgroundColorProperty		
		public static readonly BindableProperty BackgroundColorUnselectedProperty
		public static readonly BindableProperty IconColor
		public static readonly BindableProperty IconUnselectedColor

Screenshots

Repro

<?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:local="clr-namespace:Gastropod"
       Route="gastropods"
       RouteHost="www.xamarin.com"
       RouteScheme="app"
       FlyoutBackgroundColor="Teal"
       BackgroundColor="Red"
       Title="Gastropods"
       x:Class="Gastropod.Shell">
    
    <Shell.FlyoutHeader>
        <ContentView HeightRequest="300">
            <Label Text="Gastropods" FontSize="48" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
        </ContentView>
    </Shell.FlyoutHeader>
    
    <Shell.MenuItems>
        <MenuItem Text="A Menu Item" />
        <MenuItem Text="Anothing Menu Item" />
    </Shell.MenuItems>
    
    <ShellItem FlyoutIcon="iconXamarin.png" Title="Home">
        <ShellContent Route="home" ContentTemplate="{DataTemplate local:MainPage}"/>
    </ShellItem>
    
    <ShellItem FlyoutIcon="iconXamarin.png" Title="Feed">
        <ShellContent Route="feed" ContentTemplate="{DataTemplate local:FeedPage}"/>
    </ShellItem>

    <ShellItem Route="tabsandwich" Title="Tab Sandwich" FlyoutIcon="iconXamarin.png">
        <ShellSection Route="activity" Title="Activity" Icon="iconXamarin.png">
            <ShellContent Route="shared" Title="Shared" ContentTemplate="{DataTemplate local:ActivityPage}" />
            <ShellContent Route="notifications" Title="Notifications" ContentTemplate="{DataTemplate local:NotificationsPage}" />
        </ShellSection>
        <ShellSection Route="updates" Title="Updates" Icon="iconXamarin.png">
            <ShellContent Route="updates" Title="Updates" Icon="iconXamarin.png" ContentTemplate="{DataTemplate local:UpdatesPage}" />
            <ShellContent Route="home" Title="Home" Icon="iconXamarin.png" ContentTemplate="{DataTemplate local:MainPage}" />
        </ShellSection>
    </ShellItem>
    
    <ShellItem Route="single" Title="Single Page" FlyoutIcon="iconXamarin.png">
        <ShellContent Route="home" Title="Home" Icon="iconXamarin.png" ContentTemplate="{DataTemplate local:MainPage}" />
    </ShellItem>
    
    <ShellItem Route="toptabs" Title="Top Tabs" FlyoutIcon="iconXamarin.png">
        <ShellSection Route="activity" Title="Activity" Icon="iconXamarin.png" >
            <ShellContent Route="shared" Title="Shared" ContentTemplate="{DataTemplate local:ActivityPage}" />
            <ShellContent Route="notifications" Title="Notifications" ContentTemplate="{DataTemplate local:NotificationsPage}" />
        </ShellSection>
    </ShellItem>
    
    <ShellItem Route="bottomtabs" Title="Bottom Tabs" FlyoutIcon="iconXamarin.png">
        <ShellSection Route="home" Title="Home" Icon="home.png">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
        </ShellSection>
        <ShellSection Route="activity" Title="Activity" Icon="iconXamarin.png" >
            <ShellContent ContentTemplate="{DataTemplate local:ActivityPage}" />
        </ShellSection>
        <ShellSection Route="updates" Title="Updates" Icon="iconXamarin.png">
            <ShellContent ContentTemplate="{DataTemplate local:UpdatesPage}" />
        </ShellSection>
        <ShellSection Route="feed" Title="Feed" Icon="iconXamarin.png">
            <ShellContent ContentTemplate="{DataTemplate local:FeedPage}" />
        </ShellSection>
    </ShellItem>
</Shell>

Parent: #2415

[davidortinau]

Perhaps would be nice to set both a template and a style on each ShellItem or MenuItem if I want to control them individually.

[cwarnke]

I would absolutely like the ability to at least style the title font. I don't believe this is currently possible? I just had a request to change the font family of the FlyoutItem Title.

[wagenheimer]

Why this bug is Inactive? I need some workaround for it.

[jeremymarabel]

Hi ! This feature would be awesome, any estimation or workaround available ?

[petzasc]

Being able to see that a tab is disabled seems important. Currently you see the tab if IsEnabled=False, but nothing happens when you tap on it. (You can with Shell.ItemTemplate)

[rapcgutz]

Any workaround on this?

[igor-eremyashev]

+1 for this issue. It would be nice to have the same properties (disabled/default/selected background/foreground color) for both Flyout and TabBar (as I understand, TabBar uses TitleColor as foreground color). Also I cannot find any property that can tell that the ShellItem is currently selected. It would certainly help to write custom item templates.

[Pinox]

plse also add a way to change the Hamburger menu color.

[anotherlab]

+1 For this. We need the ability to make a disabled ShellItem appear as disabled.

[SirJohnK]

+1. Ability to hide and/or set color on separator between ShellItems and MenuItems.

[PureWeen]

@davidortinau I think these should all be moved to attached properties and be a little less implicit. For example

Shell.FlyouotTitleColorProperty
Shell.TitleColorProperty
Shell.TabTitleColorProperty
Shell.TopTabTitleColorProperty
Shell.BottomTabTitleColorProperty

thoughts?

[samhouts]

closed by #9886