如何在我的 Xamarin.Forms 应用程序的 UWP 版本中显示图像

Posted 2023-03-25

【中文标题】如何在我的 Xamarin.Forms 应用程序的 UWP 版本中显示图像

【英文标题】：How do I make images show up in UWP version of my Xamarin.Forms application

【发布时间】：2021-01-28 06:39:07

【问题描述】：

我有一个像这样的简单 Xaml：

...
    <ContentPage.Content>
        <Grid Padding="0,40,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Image  Grid.Row ="0" Source="iMobile"
                        HorizontalOptions="CenterAndExpand"
                        WidthRequest="260" HeightRequest="129"/>
        </Grid>
    </ContentPage.Content>

图像iMobile 显示在android 和ios 上。对于Android，我在单独的可绘制文件夹中有不同尺寸的图像。对于ios，我在 Assets 目录中有不同大小的图像。

我尝试为 UWP 做同样的事情，但似乎没有任何效果。以下是我尝试做的一些事情：

我已将图像添加到 UWP 项目的根目录，但这不起作用。

我将图像添加到 Assets 目录，但没有成功。

我尝试将.scale-100、.scale-200 和.scale-400 添加到图像文件的名称中（分别尝试了它们）但没有奏效。

我也尝试将图像放在名为 scale-100 的目录中，但这也不起作用。

任何想法可能导致我的问题以及如何解决这个问题？如此琐碎的事情占用了我这么多时间，真是令人沮丧。

更新： 我尝试使用 URL 作为源而不是 iMobile，这也不适用于 UWP，但它适用于 Android，知道为什么会这样吗？

【问题讨论】：

您是否将构建操作设置为“内容”？ docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…

是的构建操作设置为内容

@Jason 似乎图像根本不起作用，我尝试使用 URL 作为源而不是 iMobile，这不会出现在 UWP 但它确实可以工作或 Android，任何知道为什么会这样吗？

我对 UWP 知之甚少。我建议您从 Xamarin 下载其中一个示例并检查它们的图像是如何工作的

【参考方案1】：

如何在我的 Xamarin.Forms 应用程序的 UWP 版本中显示图像

请参考Images in Xamarin.Forms官方文档。 Xamarin 表单支持Native resolutions.

UWP 图像文件名可以在文件扩展名前加上 .scale-xxx 后缀，其中 xxx 是应用于资产的缩放百分比，例如myimage.scale-200.png。然后可以在没有比例修饰符的代码或 XAML 中引用图像，例如只是 myimage.png。平台会根据显示器当前的 DPI 选择最接近的合适资产比例。

如果您将图像文件放在 UWP Assets 文件夹中，您可以使用以下 xaml，请注意默认的空白 xamarin 应用程序 iamge 文件的颜色为白色，我们需要设置黑色背景以突出显示它们。

<Grid BackgroundColor="Black">
    <Image>
        <Image.Source>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="UWP" Value="Assets/LargeTile.png" />
                <On Platform="iOS" Value="LargeTile.png" />
                <On Platform="Android" Value="LargeTile.png" />
            </OnPlatform>
        </Image.Source>
    </Image>
</Grid>

【讨论】：

我已经阅读了您提供的链接中的文档，并且我已经完成了那里所述的步骤，我将图像放在我的 UWP 项目的根目录中并使用了 iMobile.png 但它仍然没有不行。更令人困惑的是，我尝试使用谷歌图像 URL 作为图像源，但它仍然无法正常工作。但是，当我尝试在 github.com/xamarin/xamarin-forms-samples/tree/master/Todo 的示例项目中使用此链接作为图像源（代替 check.png）时，它工作正常，关于为什么它可能不适合我的任何想法？

您能分享您的 imobile png 文件进行测试吗？

所以我想通了，结果我所要做的就是将 .png 添加到 iMobile 以使其适用于 UWP，但是使用 URL 作为图像源仍然没有工作，我不知道为什么会这样，但既然这工作，这对我来说不是一个问题。

你能分享你的图片 uri 进行测试吗？

freepngimg.com/thumb/google/…