FlyoutItem and Tab Styling with Shell

Alternative.md

Currently we already do everything with property explosion based on the following

Shell.TitleColor //applies to tab and flyout color
Shell.TabBarTitleColor //applies to tab and overrides TitleColor

So if we were to keep consistent here then we should just add the following Attached Properties

Shell.IsVisible // applies to visibilty of item in flyout and tab
Shell.TabBarIsVisible // applies tab

Modal then becomes

Shell.NavigationIsAnimated
Shell.NavigationIsModal
Shell.NavigationTransition= {Static Resource}

ShellVisualStyling.md

Terminology

ShellElement - Means any element of the following type ShellItem, ShellSection, ShellContent, FlyoutItem, TabBar, Tab, ContentPage

Problems trying to solve

• Currently tabs cannot be styled as much as a TabPage xamarin/Xamarin.Forms#7730 , xamarin/Xamarin.Forms#4509
• Currently FlyoutItems can be limited in styling
• We need to conceptually separate visual settings from the Shell.Map

Description

These can be attached to any Shell element or a Content Page. These will describe how these Shell elements will visually operate when they occupy said area on the Shell. So if a ShellSection shows up in the Flyout it will use these settings to get styled

TabSetting and FlyoutSetting

We could possibly just condense these into a single class like VisualSettings

publc class TabSetting
{
  Color SelectedColor;
  Color UnSelectedColor;
  bool IsEnabled;
  bool IsVisible
  //DataTemplate DataTemplate //v2
}

These can be attached to any Shell element or a Content Page

publc class FlyoutSetting
{
  Color SelectedColor;
  Color UnSelectedColor;
  bool IsEnabled;
  bool IsVisible
  //DataTemplate DataTemplate //v2
}

public class Shell
{
    TabSetting //Attached Property
    FlyoutSetting //Attached Property
}

Usage Examples

<FlyoutItem>
  <Shell.FlyoutSetting>
    <FlyoutSetting IsVisible={Binding Something} SelectedColor=Purple>
    </FlyoutSetting>
  </Shell.FlyouSetting>
</FlyoutItem>


<FlyoutItem>
  <Tab>
    <Shell.FlyoutSetting>
      <FlyoutSetting IsVisible={Binding Something} SelectedColor=Purple>
      </FlyoutSetting>
    </Shell.FlyoutSetting>
    <Shell.TabSetting>
      <TabSetting SelectedColor=Purple />
    </Shell.TabSetting>    
  </Tab>
</FlyoutItem>

You can specify these settings at the Content Page level as well

<FlyoutItem>
  <Tab>
    <ShellContent>
        <ContentPage>
          <Shell.FlyoutSetting>
            <FlyoutSetting IsVisible={Binding Something} SelectedColor=Purple>
            </FlyoutSetting>
          </Shell.FlyoutSetting>
          <Shell.TabSetting>
            <TabSetting SelectedColor=Purple />
          </Shell.TabSetting>    
        </ContentPage>
    </ShellContent>
  </Tab>
</FlyoutItem>

ShellElement IsEnabled Is Set to False behavior

Current Behavior

• Flyout - not visible can navigate to via code
• Bottom Tab - greyed out can navigate to via code
• Top Tab - no effect can navigate to via code

Probably can't do but would be cool to do

• Flyout - non existent and cannot navigate to at all
• Bottom Tab - non existent and cannot navigate to at all
• Top Tab - non existent and cannot navigate to at all

What we'll most likely do

• Flyout - greyed out and cannot navigate to at all
• Bottom Tab - greyed out and cannot navigate to at all
• Top Tab - greyed out and cannot navigate to at all