Question

我有这个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的回答）：
如果我将图片来源设置为网址（例如https://via.placeholder.com/450x300.png?text=Computer+Says+No），则会得到预期的结果，即图片不会拉伸。但是，如果我将同一张图像保存到特定的平台目录（例如，对于iOS，则为Resources / ComputerSaysNo.png），则该图像会占据整个屏幕宽度。在iPhone 7模拟器上进行了测试。

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

Answer 1

从documentation到AspectFill

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

您应该改用AspectFit，它不会拉伸图像以填充控件，而是将整个图像容纳在控件中：

缩放图像以适合视图。某些零件可能会留空（信箱）。

编辑

我尝试了以下

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

并产生以下布局：

因此，看来我的建议是正确的-至少在原则上是正确的。我猜你的图像太大了。

无论如何，如果您想保留该图像或想对图像的显示方式进行更多控制，则可以选择以下任一选项。

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

您可以在Grid中定义列和行。用*的宽度（高度）定义的列（和行）将占用所有可用空间。如果有多列或行的大小为*，则它们将平均分配剩余的空间。此外，您可以赋予*列和行权重。宽度为2*的Ar列的宽度是宽度为*的Ar列的两倍。因此，您可以定义宽度为3*，*和3*的列，并将图像放置在第二列（列索引1）中，以获取图像{{1 }}。

使用1/7th

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

Grid

如果您希望绝对设置图像的大小，则可以执行以下操作

<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>

Answer 2

我经常使用的另一个选项是AbsoluteLayout。将PositionProportional（LayoutFlags）与LayoutBounds =“ 0.5,0.5，-1，-1（X，Y，Width，Height）组合在一起将把图像放在屏幕中央。LayoutBounds” 0.5“表示它将位于屏幕的中央。 X和Y，以及“ -1”将有助于忽略宽度和高度。确保在您的AbsoluteLayout中将VerticalOptions设置为。

代码如下：

<AbsoluteLayout VerticalOptions="FillAndExpand">
    <StackLayout  AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional">
        <Image Source="http://lorempixel.com/output/abstract-q-c-200-200-6.jpg" />
    </StackLayout>
</AbsoluteLayout>

希望对您有帮助。

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

2 个答案: