Xamarin.Forms 嵌入图像未正确拉伸

Question

我的 Xamarin.Forms 应用程序中有几个嵌入式图像。

其中大部分位于特定于平台的文件夹中。为了简单和维护，我正在尝试将它们带回嵌入式图像。

这是我的 xaml： 之前：

     <Image  Source="RJ45-Pinout-T568A-4.jpg" />

之后（2 次不同的尝试）：

     <Image Source="{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}" Aspect="AspectFill" />
     <Image Source="{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}" />

但有时我无法获得相同的结果。

在图像拉伸到屏幕一侧并保持良好的纵横比之前。

现在我得到一个小图像或仅水平拉伸的图像或在顶部和底部切割的图像。

1. 截图中的第一张图片是之前的图片。（在ios项目中）
2. 第二张图片被拉伸得很好，但顶部和底部被剪掉了
3. 第三张图片我们只能看到一部分，但它根本没有拉伸，而且太小了，尽管纵横比很好。

Answer 1

截图中的第一张图片是之前的图片。（在ios项目中）

如果使用

<Image Source="RJ45-Pinout-T568A-4.jpg"/>

Image 的尺寸会很大，设置Aspect 默认为AspectFit。

第三张图片我们只能看到一部分，但它根本没有拉伸，而且太小了，虽然纵横比很好。

如果使用

<Image Source="{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}" />

Image 的 szie 会很小，同时将 Aspect 默认设置为 AspectFit。

第二张图片被拉伸得很好，但顶部和底部都被剪掉了

关于Aspect，你可以看看下面的截图：

那么如果使用Aspect="AspectFill"，图片会被切掉并放在底部。

例如Xaml代码如下：

<ScrollView>
    <StackLayout>
        <Label Text="Image Embedded Resource XAML" FontAttributes="Bold" HorizontalOptions="Center" />
        <Label Text="Image Embedded Resource XAML" FontAttributes="Bold" HorizontalOptions="Center" />
        <!-- uses a custom Extension defined in this project for now -->
        <Image Source="Tree.png" BackgroundColor="LightBlue"/>
        <Image Source="{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor="LightBlue"/>
        <Image Source="{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor="LightBlue" Aspect="AspectFill" />
        <Image Source="{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor="LightBlue" Aspect="AspectFit"/>
        <Image Source="{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor="LightBlue" Aspect="Fill" />
        <Label Text="This image is an embedded resource, referenced in XAML. The same image file is used, regardless of the pixel density of the device (eg. iOS Retina)." />
    </StackLayout>
</ScrollView>

效果是：

=============================更新================== ===============

有没有办法让树成为手机的宽度，同时让树的图像高度和手机的宽度一样？

图片可以设置HeightRequest和Aspect="Fill"，不管是Source="RJ45-Pinout-T568A-4.jpg"还是Source="{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}"都可以。

例如Xaml代码如下：

<Image Source="Tree.png" BackgroundColor="LightBlue" HeightRequest="300" Aspect="Fill" />
<Image Source="{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor="LightBlue" HeightRequest="300" Aspect="Fill" />

效果：