Customizing FlyoutItems in AppShell-CodePudding

My Xamarin Forms 5 app is still using the standard setup for FlyoutItem definitions in AppShell.xaml -- see below:

<Style Class="FlyoutItemLabelStyle" TargetType="Label">
   <Setter Property="TextColor" Value="White"></Setter>
   <Setter Property="FontSize" Value="16"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
   <Setter Property="VisualStateManager.VisualStateGroups">
      <VisualStateGroupList>
         <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
               <VisualState.Setters>
                  <Setter Property="BackgroundColor" Value="{StaticResource SecondaryDark}" />
                  <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource PrimaryBackground}" />
               </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Selected">
               <VisualState.Setters>
                  <Setter Property="BackgroundColor" Value="{StaticResource SecondaryDark}" />
                  <Setter Property="Margin" Value="10,20" />
               </VisualState.Setters>
            </VisualState>
         </VisualStateGroup>
      </VisualStateGroupList>
   </Setter>
</Style>


<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
   <Setter Property="VisualStateManager.VisualStateGroups">
      <VisualStateGroupList>
         <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
               <VisualState.Setters>
                  <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource PrimaryBackground}" />
               </VisualState.Setters>
            </VisualState>
         </VisualStateGroup>
      </VisualStateGroupList>
   </Setter>
</Style>

I thought this was pretty self-explanatory but I can't seem to increase padding both for FlyoutItem labels and icons.

I set my FlyoutItems using the code below -- only showing one tab but I have multiple:

<FlyoutItem Title="Home">
   <FlyoutItem.Icon>
      <FontImageSource
         FontFamily="MISHRP"
         Glyph="{StaticResource HomeIcon}"
         Color="White" />
   </FlyoutItem.Icon>
   <Tab Title="Option 1">
      <Tab.Icon>
         <FontImageSource
            FontFamily="MISHRP"
            Glyph="{StaticResource Option1Icon}"
            Color="{StaticResource SecondaryDark}">
            <FontImageSource.Size>
               <OnPlatform x:TypeArguments="x:Double">
                  <On Platform="Android">15</On>
                  <On Platform="iOS">25</On>
               </OnPlatform>
            </FontImageSource.Size>
         </FontImageSource>
      </Tab.Icon>
      <ShellContent Route="Option1" ContentTemplate="{DataTemplate local:Option1}" />
   </Tab>
</FlyoutItem>

I thought I could simply add another Setter for, say, Padding but that doesn't seem to have any effect at all -- see below:

<Setter TargetName="FlyoutItemLabel" Property="Label.Padding" Value="20" />

Any idea how I can increase Padding for my FlyoutItems?

CodePudding user response：

The appearance of each FlyoutItem can be customized by setting the Shell.ItemTemplate attached property to a DataTemplate,you could try to add padding like below:

<Shell.ItemTemplate>
     <DataTemplate>
        <Frame CornerRadius="5" Padding="0">
            <Grid ColumnDefinitions="0.2*,0.8*" VerticalOptions="FillAndExpand" BackgroundColor="LightBlue">
                <Image Source="{Binding FlyoutIcon}"
                    Margin="5"
                    HeightRequest="45" />
                <Label Grid.Column="1"
                    Text="{Binding Title}"
                    FontAttributes="Italic"
                    VerticalTextAlignment="Center" />
            </Grid>
        </Frame>
    </DataTemplate>
</Shell.ItemTemplate>

MS official reference link:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance