MAUI Windows端FontImageSource无法像Android/iOS水平居中问题问询

我正在开发一款面向Android和iOS的MAUI应用，已完成大部分平台特定配置调整，能自行修复问题或找到解决方案。近期新增Windows平台支持（目标框架net8.0-windows10.0.19041.0）后，发现导航按钮中的FontImageSource图标无法水平居中——和Android/iOS端不同，图标（尤其是垂直省略号ellipses-vertical）会偏向渲染区域的右上侧。这个问题在Frame+Image组合以及Button组件中都存在。

相关代码 #

MauiProgram.cs #

.ConfigureFonts(fonts =>
{
    fonts.AddFont("lucide.ttf", "lucide"); // 使用lucide图标库
});

App.xaml #

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
  <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
  <ResourceDictionary Source="Resources/Styles/Lucide.xaml" />
</ResourceDictionary.MergedDictionaries>

Lucide.xaml #

<x:String x:Key="luc-fontfamily">lucide</x:String>
<x:String x:Key="luc-ellipsis-vertical">&#57531;</x:String>
<x:String x:Key="luc-send-horizontal">&#58614;</x:String>

ContentPage.xaml（Frame+Image场景） #

垂直省略号图标

<Frame x:Name="LnButton_IconOnly_Logout" Grid.Column="2" Margin="0,0,10,0"  BackgroundColor="Yellow" HorizontalOptions="Center" VerticalOptions="Center">
  <Image HeightRequest="25" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Red">
    <Image.Source HorizontalOptions="Center" VerticalOptions="Center">
    <FontImageSource
      FontFamily="{StaticResource luc-fontfamily}"
      Glyph="{StaticResource luc-ellipsis-vertical}"
      Color="{StaticResource TextColorLightMode}"/>
    </Image.Source>
  </Image>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleInfoCommand}" />
  </Frame.GestureRecognizers>
</Frame>

水平发送图标

<Frame x:Name="LnButton_IconOnly_Logout" Grid.Column="2" Margin="0,0,10,0"  BackgroundColor="Yellow" HorizontalOptions="Center" VerticalOptions="Center">
  <Image HeightRequest="25" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Red">
    <Image.Source HorizontalOptions="Center" VerticalOptions="Center">
    <FontImageSource
      FontFamily="{StaticResource luc-fontfamily}"
      Glyph="{StaticResource luc-send-horizontal}"
      Color="{StaticResource TextColorLightMode}"/>
    </Image.Source>
  </Image>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleInfoCommand}" />
  </Frame.GestureRecognizers>
</Frame>

Windows端显示效果 #

• Windows下垂直省略号图标显示
• Windows下水平发送图标显示

Button组件场景 #

代码 #

<StackLayout Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,10,0" BackgroundColor="Yellow">
  <Button
      x:Name="LnButton_IconOnly_Logout"
      HorizontalOptions="Start"
      BackgroundColor="Red"
      Command="{Binding ToggleInfoCommand}"
      CornerRadius="25">
    <Button.ImageSource>
      <FontImageSource
        FontFamily="{StaticResource luc-fontfamily}"
        Glyph="{StaticResource luc-ellipsis-vertical}"
        Color="{StaticResource TextColorLightMode}" />
    </Button.ImageSource>
  </Button>
</StackLayout>

Windows显示效果 #

• Windows下Button中的垂直省略号图标显示

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