title: Xamarin Forms Flyout menu bottom tab style
body: <p>I have the following Shell Flyout menu in my application:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;Shell xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:views="clr-namespace:UniversalCheckInApp.Views"
     x:Class="UniversalCheckInApp.AppShell"&gt;
  
  &lt;Shell.FlyoutHeader&gt;
      &lt;StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4"&gt;
          &lt;Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
                 VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" /&gt;
      &lt;/StackLayout&gt;
  &lt;/Shell.FlyoutHeader&gt;
  
  
  &lt;Shell.ItemTemplate&gt;
      &lt;DataTemplate&gt;
          &lt;StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" &gt;
              &lt;Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
                     HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
                     TextDecorations="Underline"/&gt;
          &lt;/StackLayout&gt;
      &lt;/DataTemplate&gt;
  &lt;/Shell.ItemTemplate&gt;
  
  &lt;FlyoutItem Title="Configuration" &gt;
      &lt;ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" &gt;
          &lt;views:NetworkConfiguration /&gt;
      &lt;/ShellContent&gt;
  
      &lt;ShellContent x:Name="scDataConfiguration" Title="Data Configuration"&gt;
          &lt;views:FormFieldConfiguration /&gt;
      &lt;/ShellContent&gt;
  &lt;/FlyoutItem&gt;
  
  &lt;FlyoutItem Title="Collect Data"&gt;
      &lt;ShellContent x:Name="scCollectData" Title="Collect Data"&gt;
          &lt;views:DataCollection /&gt;
      &lt;/ShellContent&gt;
  &lt;/FlyoutItem&gt;
  
  
  &lt;FlyoutItem Title="About"&gt;
      &lt;ShellContent x:Name="scAbout" Title="About"&gt;
          &lt;views:About /&gt;
      &lt;/ShellContent&gt;
  &lt;/FlyoutItem&gt;
  </code></pre>
  
  <p></p>
  
  <p>It renders as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/Y6h7Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y6h7Z.png" alt="Screen shot"></a></p>
  
  <p>I am trying to figure out how to change the style of the two menu options that appear at the bottom of each configuration page.</p>
  
  <h2>UPDATE</h2>
  
  <p>Based on the comment below I was able to get the flyout menu options at the bottom to look as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/jNN6P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jNN6P.png" alt="New screen show"></a></p>
  
  <p>using this XAML</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;Shell xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:views="clr-namespace:UniversalCheckInApp.Views"
     x:Class="UniversalCheckInApp.AppShell"
     FlyoutBackgroundColor="#D0E1F9"
     BackgroundColor="#1E1F26"
     Shell.TabBarBackgroundColor="#1E1F26"
     Shell.TabBarTitleColor="#D0E1F9"
     Shell.TabBarUnselectedColor="White"&gt;
  
  
  &lt;Shell.FlyoutHeader&gt;
      &lt;StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4"&gt;
          &lt;Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
             VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" /&gt;
      &lt;/StackLayout&gt;
  &lt;/Shell.FlyoutHeader&gt;
  
  
  &lt;Shell.ItemTemplate&gt;
      &lt;DataTemplate&gt;
          &lt;StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" &gt;
              &lt;Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
                 HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
                 TextDecorations="Underline"/&gt;
          &lt;/StackLayout&gt;
      &lt;/DataTemplate&gt;
  &lt;/Shell.ItemTemplate&gt;
  
  &lt;FlyoutItem Title="Configuration" &gt;
      &lt;ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" &gt;
          &lt;views:NetworkConfiguration /&gt;
      &lt;/ShellContent&gt;
  
      &lt;ShellContent x:Name="scDataConfiguration" Title="Data Configuration"&gt;
          &lt;views:FormFieldConfiguration /&gt;
      &lt;/ShellContent&gt;
  &lt;/FlyoutItem&gt;
  
  &lt;FlyoutItem Title="Collect Data"&gt;
      &lt;ShellContent x:Name="scCollectData" Title="Collect Data"&gt;
          &lt;views:DataCollection /&gt;
      &lt;/ShellContent&gt;
  &lt;/FlyoutItem&gt;
  
  
  &lt;FlyoutItem Title="About"&gt;
      &lt;ShellContent x:Name="scAbout" Title="About"&gt;
          &lt;views:About /&gt;
      &lt;/ShellContent&gt;
  &lt;/FlyoutItem&gt;
  </code></pre>
  
  <p></p>
  
  <p>The challenge now is that I want to adjust the FontSize, FontAttributes and                  TextDecorations properties for the Tab Bar selected and unselected items.  Any idea how to do that?</p>