Uno 平台：从资产加载 xaml 图像

Question

对于 Uno 平台，我想使用 XAML 从资产加载图像 (PNG)。此外，我想为所有目标平台使用单个图像，并将其缩放到其容器的大小。

这可能吗？

我已使用以下语法成功为 UWP 和 Wasm 执行此操作：

<Image Source="Assets/icons/arrow_back_white.png" />

但是，对于 Android，不显示图像，我只看到我的背景颜色。

我意识到正确的方法是为每个目标平台提供单独的图像，并且可以选择为每个平台中的每个分辨率提供单独的图像。这是一个不错的理想，但我正在努力避免这种巨大的开发开销，至少目前是这样。

谢谢。

编辑：

首先，为了更加清楚，我确实为我的图片选择了Content。

我在使用AppBarButton 时遇到了更严重的失败，例如：

<CommandBar>
  <AppBarButton Icon="arrow_back_white.png" Label="Back" Click="OnBackClicked" />
  <AppBarButton Icon="arrow_back_white.png" Label="Page" Click="OnPageClicked" />
  <AppBarButton Icon="more_menu_white.png" Label="More" Click="OnMoreMenuClicked"/>
</CommandBar>

在应用初始化期间，UWP 失败并出现错误：

Failed to create a 'Windows.UI.Xaml.Controls.IconElement' from the text 'arrow_back_white.png'.

它也因 Wasm 和 Android 的构建错误而失败。

我把图标文件直接放在Assets目录下还是嵌套目录下都没关系。

引用图标和图像的正确语法和配置是什么？

编辑 2：

仍然不适用于 Android，但适用于 UWP 和 Wasl。我将我的图像移到 Assets 目录中并拥有这个 XAML：

  <Button
    Width="25" Height="25"
    Padding="5" 
    Click="OnBackClicked" >
    <Image Source="ms-appx:///Assets/arrow_back_white.png" Height="100" Width="100" />
  </Button>

  <Button
    Width="25" Height="25"
    Padding="5"
    Click="OnPageClicked" >
    <Image Source="ms-appx:///Assets/crop_din_white.png" />
  </Button>

  <Button
    Width="25" Height="25"
    Padding="5" 
    Click="OnMoreMenuClicked" >
    <Image Source="ms-appx:///Assets/more_menu_white.png" />
  </Button>

所有三个按钮都显示为大约 1 厘米高和宽的空白灰色。

编辑 3

尝试使用新创建的默认应用程序，该应用程序有效。我对代码所做的唯一更改是通过删除网格并添加到 MainPage.xaml：

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >

  <Button
    Width="25" Height="25"
    Padding="5" >
    <Image Source="ms-appx:///Assets/arrow_back_white.png" Height="100" Width="100" />
  </Button>

  <Button
    Width="25" Height="25"
    Padding="5" >
    <Image Source="ms-appx:///Assets/crop_din_white.png" />
  </Button>

  <Button
    Width="25" Height="25"
    Padding="5" >
    <Image Source="ms-appx:///Assets/more_menu_white.png" />
  </Button>
</StackPanel>

所以，现在，找到显着差异的艰巨任务。

Answer 1

我遇到了类似的问题，下面是我的解决方法。我使用了以下内容： <Image Source="ms-appx:////Assests/yourimage.png"> 我做的另一件事——你可能已经做过了——但我必须在它周围放一个透明的边框。希望这会有所帮助！

Answer 2

很抱歉，这没有帮助。只是检查一些明显的东西 - 您是否将图片添加到 Shared Project Assets 文件夹？

Answer 3

假设您在共享项目下有一个名为 Assets 的目录，并且在其中有一个名为 wasm_logo.png 的图像。

正如 Jt6 所指出的，您应该能够将该图像用于 Uno 支持的所有不同平台，包括 Android，通过使用这个：

<Image Source="ms-appx:///Assets/wasm_logo.png" Height="300" Width="300"/>

注意：如果您有嵌套目录，即 Assets 中的另一个目录，您只需将其添加为路径的一部分。

<Image Source="ms-appx:///Assets/Icons/wasm_logo.png" Height="300" Width="300"/>

如果您的 wasm_logo.png 图像位于 Assets 目录中的 Icons 目录中，则上述代码将起作用。

注意事项：

• 图像应标记为内容（您已经验证了这一点）

针对不同大小进行缩放 Uno 支持（作为 UWP）不同的资产限定符。假设您要支持 3 种不同尺寸的同一张图片，那么您将在 Assets Directory 中的这 3 个文件：

wasm_logo.scale-100.png
wasm_logo.scale-300.png
wasm_logo.scale-500.png

对于 Android，这些被翻译成 mdpi、xhdpi 和 xxhdpi。但最好的部分是使用它你不需要指定大小，使用与上面相同的代码你会得到相同的结果。

<Image Source="ms-appx:///Assets/wasm_logo.png" Height="300" Width="300"/>

注意：对于 Android，当您未指定任何限定符时，图像将被视为 nodpi

有关资产和限定符的更多信息可以阅读here。

如果上述方法仍然不起作用，请尝试将您的 Uno.Platform 更新到最新版本。

您还可以验证在运行应用程序时 Visual Studio 输出窗口上没有报告任何错误。

最后，您可以尝试在编译时检查图像是否被正确移动。您可以通过构建您的 Android 项目然后在此路径打开文件资源管理器来做到这一点：

ProjectName\ProjectName.Droid\obj\Debug\100\res

您应该在其中找到适用于 Android 的可绘制目录。

按照第一个示例，您的图像应该在 Drawable-nodpi 文件夹中

希望这是有用的。

安德烈斯

应用运行