在 AppShell 中自定义 FlyoutItems

Question

我的 Xamarin Forms 5 应用仍在使用 AppShell.xaml 中 FlyoutItem 定义的标准设置 -- 见下文：

<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>

我认为这是不言自明的，但我似乎无法增加 FlyoutItem 标签和图标的填充。

我使用下面的代码设置我的 FlyoutItems -- 只显示一个选项卡，但我有多个：

<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>

我想我可以简单地为 Padding 添加另一个 Setter 但这似乎根本没有任何效果 -- 见下文：

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

知道如何为我的 FlyoutItem 增加 Padding 吗？

Answer 1

每个 FlyoutItem can be customized by setting the Shell.ItemTemplate 的外观附加属性到 DataTemplate，您可以尝试像下面这样添加填充：

<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官方参考link:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance

在 AppShell 中自定义 FlyoutItems

Customizing FlyoutItems in AppShell

xamarin

xamarin.forms