在AppShell中自定義FlyoutItems

我的 Xamarin Forms 5 應用程式仍在使用標準設定進行FlyoutItem定義AppShell.xaml——見下文：

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

我以為我可以簡單地添加另一個Setter，例如，Padding但這似乎根本沒有任何效果——見下文：

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

知道如何增加Padding我FlyoutItem的 s 嗎？

uj5u.com熱心網友回復：

每個FlyoutItem的外觀可以通過將Shell.ItemTemplate附加屬性設定為 a來自定義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官方參考鏈接：https ://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance

標籤：xamarin xamarin.forms

上一篇：如何將普通的Xamarin.iOS解決方案（不帶Xamarin表單）更新為.net6（不帶MAUI）以在iOS和MacCatalyst上運行？

下一篇：XamarinForms系結Swift和Android庫