时间戳

首页 > 解决方案 > 如何在 Xamarin.Forms 中居中图像而不拉伸它

xaml - 如何在 Xamarin.Forms 中居中图像而不拉伸它

问题描述

我有这个ContentPage：

<ContentPage.Content>
    <Grid>
        <Image
            Source="background.png"
            Aspect="AspectFill"
        />
        <Image
            Source="logo.png"
            VerticalOptions="Center"
            HorizontalOptions="Center"
        />
    </Grid>
</ContentPage.Content>

但是 logo.png（在垂直和水平输入时）会拉伸以占据整个屏幕宽度。

如何阻止它拉伸并保持其原始大小？是的，XAML 解决方案绝对是首选。

编辑 1（基于 Paul Kertscher 的回答）：
如果我将图像源设置为 URL（例如https://via.placeholder.com/450x300.png?text=Computer+Says+No），我会得到预期的结果，即图像不拉伸。但是，如果我将相同的图像保存到特定的平台目录（例如 iOS 的 Resources/ComputerSaysNo.png），它会拉伸以占据整个屏幕宽度。在 iPhone 7 模拟器上测试。

编辑 2
如果我在 iOS 资源目录中制作我的 logo.png 的 @2x 和 @3x 副本，并且所有三个图像的大小相同，它的工作方式会有所不同；徽标不会拉伸以占据页面的整个宽度。

标签： xamlxamarinxamarin.forms

解决方案

从有关的文档中AspectFill

缩放图像以填充视图。某些部分可能会被剪裁以填充视图。

您应该改用AspectFit它，它不会拉伸图像以填充控件，而是使整个图像适合控件：

缩放图像以适合视图。有些部分可能是空的（字母装箱）。

编辑

我试过以下

<Grid>
    <Image HorizontalOptions="Center" 
           VerticalOptions="Center" 
           Source="http://lorempixel.com/output/abstract-q-c-200-200-6.jpg" />
</Grid>

它产生了以下布局：

生成的应用程序的屏幕截图。 中间有一张图片显示，没有拉伸。

因此，看起来我的提议是正确的——至少在原则上是正确的。我猜你的图片太大了。

无论如何，如果您想保留该图像或希望更好地控制图像的显示方式，您可以选择以下任一选项。

使用网格系统确定图像的大小

您可以在其中Grid定义列和行。用宽度（高度）定义的列（和行）*将占用所有可用空间。如果有多个具有*大小的列或行，它们将平均分配剩余空间。此外，您可以给*列和行权重。带有 width 的 Ar 列的2*宽度是带有 width 的一列的两倍*。因此，您可以使用 width 3*、*和定义列，3*并将图像放在第二列（列索引1）中，以使图像占据1/7th屏幕宽度。

使用AbsoluteLayout

在一个中，AbsoluteLayout您可以定义子元素的位置和大小。Grid您可以执行以下操作，而不是将图像定位在 a中

<AbsoluteLayout>
    <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" /> <!-- Background -->
    <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds=".5,.5,.2,.2" /> <!-- Logo with 20% width/height  -->
</AbsoluteLayout>

如果您更喜欢绝对设置图像的大小，您可以执行以下操作

<Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,150,150" />

推荐阅读