Skip to content

Instantly share code, notes, and snippets.

@PureWeen
Last active December 11, 2019 00:01
Show Gist options
  • Save PureWeen/9538d37de1f8c0d979ce061b97e5b751 to your computer and use it in GitHub Desktop.
Save PureWeen/9538d37de1f8c0d979ce061b97e5b751 to your computer and use it in GitHub Desktop.
FlyoutItem and Tab Styling with Shell

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}

Terminology

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

Problems trying to solve

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment