.NET MAUI应用中如何按平台调整PNG标签页图标大小？

针对你在AppShell标签页中使用PNG图标需要按平台调整大小的需求，有几种直接可行的实现方式：

方法1：使用OnPlatform标记扩展直接设置（XAML内联） #

你可以直接在Tab的Icon属性里显式声明ImageSource，结合OnPlatform指定不同平台的图标尺寸。修改你的AppShell代码如下：

<FlyoutItem Title="Home" Icon="home.png">
   <Tab Title="Cats">
      <Tab.Icon>
         <ImageSource>
            <FileImageSource File="cat.png">
               <FileImageSource.WidthRequest>
                  <OnPlatform x:TypeArguments="x:Double">
                     <On Platform="Android" Value="24" />
                     <On Platform="iOS" Value="28" />
                     <On Platform="Windows" Value="32" />
                  </OnPlatform>
               </FileImageSource.WidthRequest>
               <FileImageSource.HeightRequest>
                  <OnPlatform x:TypeArguments="x:Double">
                     <On Platform="Android" Value="24" />
                     <On Platform="iOS" Value="28" />
                     <On Platform="Windows" Value="32" />
                  </OnPlatform>
               </FileImageSource.HeightRequest>
            </FileImageSource>
         </ImageSource>
      </Tab.Icon>
      <ShellContent Route="Cats" ContentTemplate="{DataTemplate local:Cats}" />
   </Tab>
   <Tab Title="Dogs">
      <Tab.Icon>
         <ImageSource>
            <FileImageSource File="dog.png">
               <FileImageSource.WidthRequest>
                  <OnPlatform x:TypeArguments="x:Double">
                     <On Platform="Android" Value="24" />
                     <On Platform="iOS" Value="28" />
                     <On Platform="Windows" Value="32" />
                  </OnPlatform>
               </FileImageSource.WidthRequest>
               <FileImageSource.HeightRequest>
                  <OnPlatform x:TypeArguments="x:Double">
                     <On Platform="Android" Value="24" />
                     <On Platform="iOS" Value="28" />
                     <On Platform="Windows" Value="32" />
                  </OnPlatform>
               </FileImageSource.HeightRequest>
            </FileImageSource>
         </ImageSource>
      </Tab.Icon>
      <ShellContent Route="Dogs" ContentTemplate="{DataTemplate local:Dogs}" />
   </Tab>
</FlyoutItem>

方法2：通过资源字典统一管理尺寸 #

如果多个图标需要统一的平台尺寸，建议在App.xaml中定义全局资源，再在Tab中引用：

1. 在App.xaml的ResourceDictionary中添加平台特定尺寸：

<Application.Resources>
   <ResourceDictionary>
      <OnPlatform x:Key="TabIconWidth" x:TypeArguments="x:Double">
         <On Platform="Android" Value="24" />
         <On Platform="iOS" Value="28" />
         <On Platform="Windows" Value="32" />
      </OnPlatform>
      <OnPlatform x:Key="TabIconHeight" x:TypeArguments="x:Double">
         <On Platform="Android" Value="24" />
         <On Platform="iOS" Value="28" />
         <On Platform="Windows" Value="32" />
      </OnPlatform>
   </ResourceDictionary>
</Application.Resources>

2. 在AppShell中引用这些资源：

<FlyoutItem Title="Home" Icon="home.png">
   <Tab Title="Cats">
      <Tab.Icon>
         <FileImageSource File="cat.png" 
                          WidthRequest="{StaticResource TabIconWidth}"
                          HeightRequest="{StaticResource TabIconHeight}" />
      </Tab.Icon>
      <ShellContent Route="Cats" ContentTemplate="{DataTemplate local:Cats}" />
   </Tab>
   <Tab Title="Dogs">
      <Tab.Icon>
         <FileImageSource File="dog.png" 
                          WidthRequest="{StaticResource TabIconWidth}"
                          HeightRequest="{StaticResource TabIconHeight}" />
      </Tab.Icon>
      <ShellContent Route="Dogs" ContentTemplate="{DataTemplate local:Dogs}" />
   </Tab>
</FlyoutItem>

方法3：自定义Shell Tab模板 #

如果需要更灵活的控制（比如同时调整图标和文字的布局），可以自定义Shell的TabBarItemTemplate：

<Shell.Resources>
   <DataTemplate x:Key="CustomTabTemplate">
      <Grid Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
         <Image Source="{Binding Icon}" 
                WidthRequest="{OnPlatform Android=24, iOS=28, Windows=32}"
                HeightRequest="{OnPlatform Android=24, iOS=28, Windows=32}" />
         <Label Text="{Binding Title}" FontSize="10" Margin="0,20,0,0" />
      </Grid>
   </DataTemplate>
</Shell.Resources>

<!-- 应用模板到TabBar -->
<TabBar ItemTemplate="{StaticResource CustomTabTemplate}">
   <Tab Title="Cats" Icon="cat.png">
      <ShellContent Route="Cats" ContentTemplate="{DataTemplate local:Cats}" />
   </Tab>
   <Tab Title="Dogs" Icon="dog.png">
      <ShellContent Route="Dogs" ContentTemplate="{DataTemplate local:Dogs}" />
   </Tab>
</TabBar>

以上三种方法都能实现PNG图标按平台设置大小的需求，你可以根据项目复杂度选择合适的方式。

内容的提问来源于stack exchange，提问作者Sam