MAUI项目Android平台嵌入资源图片显示位置异常求助

问题现象 #

开发MAUI项目时，使用外部DLL定义的BadgeButton组件，组件内图片通过嵌入DLL的资源加载：

ImageSource.FromResource (Instance.LOCAL_ASSEMBLY_IMAGEPATH + filename, Instance.LOCAL_ASSEMBLY);

Windows平台图片显示正常，但Android平台运行时图片位置随机偏移，按钮功能正常仅显示异常。

相关代码 #

Shell导航栏XAML #

<Shell.TitleView>
    <Grid x:Name="ShellViewObject" HorizontalOptions="FillAndExpand" Margin="0" Padding="0" ColumnSpacing="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="48" />
            <ColumnDefinition Width="48" />
            <ColumnDefinition Width="48" />
        </Grid.ColumnDefinitions>
    </Grid>
</Shell.TitleView>

按钮创建代码 #

BadgeButton vo = new SimpleControls.BadgeButton();
vo.StyleId = name;
vo.Padding = new Thickness(0, 0, 0, 0); 
vo.Margin   = new Thickness(0, 0, 0, 0);
vo.ImageSize = 40;
vo.BadgeImageText = img;
vo.HorizontalOptions = LayoutOptions.CenterAndExpand;
vo.Clicked += CALLING_TOP_BAR_BUTTON_CLICK;
vo.VerticalOptions = LayoutOptions.Center;
return vo;

BadgeButton组件XAML #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiSY.SimpleControls.BadgeButton" Padding="0" Margin="0">
    <Grid Padding="0" RowSpacing="0" ColumnSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="48" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Image  x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"
                Margin="3" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" 
                   />
        <Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="8"
               Padding="0" HasShadow="False"  BorderColor="Transparent"
               VerticalOptions="Fill"   HorizontalOptions="Fill"
                WidthRequest="35" HeightRequest="35">
            <Label x:Name="BadgeTextLabel" FontSize="3"  HorizontalOptions="Center"  VerticalOptions="Center" />
        </Frame>
    </Grid>
</ContentView>

解决方案尝试 #

1. 固定Image尺寸约束
   Android平台对未明确尺寸的图片布局计算易出现偏差，给BadgeIconImage添加明确尺寸绑定，同时调整布局选项避免额外空间分配：

   <Image  x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"
           Margin="3" HorizontalOptions="Center" VerticalOptions="Center"
           WidthRequest="{Binding ImageSize}" HeightRequest="{Binding ImageSize}" />
   

2. 简化Grid布局结构
   移除冗余行列定义，让徽章Frame相对于图片右上角定位，避免Span导致的布局冲突：

   <Grid Padding="0" RowSpacing="0" ColumnSpacing="0">
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
       <Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0"
               Margin="3" HorizontalOptions="Center" VerticalOptions="Center"
               WidthRequest="{Binding ImageSize}" HeightRequest="{Binding ImageSize}" />
       <Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="0" CornerRadius="8"
               Padding="0" HasShadow="False" BorderColor="Transparent"
               VerticalOptions="Start" HorizontalOptions="End"
               WidthRequest="35" HeightRequest="35">
           <Label x:Name="BadgeTextLabel" FontSize="3" HorizontalOptions="Center" VerticalOptions="Center" />
       </Frame>
   </Grid>
   

3. 规范资源图片尺寸
   确保嵌入DLL的图片为正方形（如40x40），Android对非标准尺寸图片可能存在渲染偏移，同时检查图片是否为2的幂次尺寸。

4. 禁用硬件加速
   部分场景下硬件加速会导致图片渲染异常，可针对Image组件禁用：

   #if ANDROID
   var nativeImage = BadgeIconImage.Handler.PlatformView as Android.Widget.ImageView;
   nativeImage.SetLayerType(Android.Views.LayerType.Software, null);
   #endif
   

内容的提问来源于stack exchange，提问作者d.mercanti