如何从 XAML 引用具有不同文件扩展名的图像？答案

【问题标题】：How to reference images with different file extensions from XAML?如何从 XAML 引用具有不同文件扩展名的图像？
【发布时间】：2023-03-12 05:02:01
【问题描述】：

我们开发了一个 Xamarin.Forms UI 库，其中图像存储为 Android 的 PNG 和 iOS 的 PDF。对于 Android，图像位于 Resources 文件夹中，对于 iOS，图像位于资产目录中。 iOS和Android每张图片的文件名相同，但文件扩展名不同。

使用 xcrun --sdk iphoneos assetutil --info Assets.car 检查 Assets.car 显示图像存储为 PDF，并且在构建时未转换为 PNG。

...
{
  "AssetType" : "Image",
  "BitsPerComponent" : 8,
  "ColorModel" : "RGB",
  "Colorspace" : "srgb",
  "Compression" : "deepmap2",
  "Encoding" : "ARGB",
  "Image Type" : "kCoreThemeOnePartScale",
  "Name" : "ic_cup_coffee",
  "NameIdentifier" : 54350,
  "Opaque" : false,
  "PixelHeight" : 24,
  "PixelWidth" : 24,
  "RenditionName" : "ic_cup_coffee.pdf",
  "Scale" : 1,
  "SHA1Digest" : "0999A4B02703DF4A5FC84AF67FEF220E560F79DD",
  "SizeOnDisk" : 334,
  "Template Mode" : "automatic"
}
...

为了从 XAML 中引用图像，我们有一个帮助类，它将类字段映射到不包括文件扩展名的文件名：

public static class Images
{
    public static readonly string Ic_cup_coffee = "ic_cup_coffee"; // value equals file name
    ...
}

在 XAML 中，我们使用 x:Static 标记扩展：

<Image Source="{x:Static images:Images.Ic_cup_coffee}" />

我们在使用这种方法时遇到的问题是，有时图像不会显示在将 Xamarin.Forms UI 库集成为 NuGet 包的 iOS 应用程序中。在 Android 上，我们不会遇到任何问题。

documentation 说明了如何跨不同平台使用单个图像文件，但没有说明如何处理用于同一图像源的具有不同文件扩展名的文件。

如何正确引用具有不同文件扩展名的 XAML 图像？我们引用图像的方法是否有效？

【问题讨论】：

你的静态类只是映射你的图片文件名，它自己的图片必须存放在各个平台的各个Resource文件夹中
在iOS中，如果图片的扩展名是png，可以忽略。但是，如果图片以.jpg结尾，则需要在后面的代码中提供完整的文件名。
图像存储为 iOS 的 PDF 扩展？我不确定 PDF 扩展是否适用于图像，您可能需要 PDF 阅读器。
在我的 experian 中，是的，我们需要设置完整的文件名，包括 jpg 图像的扩展名
看来我们的问题不是文件扩展名而是conflict between the Assets.car in the nuget and the Assets.car in the iOS app。无论如何，Xamarin 文档并不清楚如何使用 PDF 和 PNG 作为应用程序的资源。

标签： ios xaml xamarin xamarin.forms xamarin.ios

【解决方案1】：

可以像这样从 XAML 引用具有不同文件扩展名的图像：

<Image>
  <Image.Source>
    <OnPlatform x:TypeArguments="ImageSource">
        <OnPlatform.iOS><FileImageSource File="ic_cup_coffee.pdf"/></OnPlatform.iOS>
        <OnPlatform.Android><FileImageSource File="ic_cup_coffee.png"/></OnPlatform.Android>
    </OnPlatform>
  </Image.Source>
</Image>

无论如何，这并不能解决我们的图像有时不可见的问题。我们坚持使用<Image Source="ic_cup_coffee"/>，我们会分析这个bug是否是问题的根源。

【讨论】：