Question

这是xaml（stacklayout中的图像）。一切都是合乎逻辑的：我将Aspect设置为AspectFit，将HorizontalOptions设置为FillAndExpand。图像宽度必须填充stacklayout的宽度。必须计算高度才能对Aspect进行成像。

<Image BackgroundColor="Fuchsia"
       Aspect="AspectFit"
       Source="{Binding GroupLogo}"
       HorizontalOptions="FillAndExpand"
       VerticalOptions="FillAndExpand"/>

填充宽度但不想绘制图像全宽。为什么呢？

Answer 1

AspectFit执行它在锡上所说的内容，它会将整个图像放入视图中，这可能会使视图的某些部分变空。直接来自Xamarin的文档：

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

您要找的是AspectFill，它会缩放图片以适合：

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

如果您尝试将图片视图设置为图片的高度，我建议您在图片的高度添加HeightRequest。根据我的经验，图像控件似乎没有在Xamarin中自动缩放，因为默认情况下本机控件似乎不支持。

Reference

Answer 2

我有类似的问题。我希望尽可能填充StackLayout的宽度和高度，但不要裁剪实际图像。这里的答案帮助我找到了正确的方法。这对我有用：

            <Grid 
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                 >
                <Image
                   x:Name="photo"                         
                   Aspect="AspectFit"                    
                />
            </Grid>

也许这对某人有用。

澄清：

HorizontalOptions 和 VerticalOptions 的值为 FillAndExpand ，因此调整网格的高度和宽度以填充父级，这种情况就是Stacklayout。图像是网格的子图形，因此它根据父图像进行转换（我们没有为图像提供任何其他选项）。

图像的方面设置为 AspectFit ，因此图像将适合视图（在本例中为网格）并保留其比率。

这样，如果图像处于纵向模式但是太窄，它将填充网格（StackLayout）的高度但不会填充宽度以保持其比率并且不会从上方或下方裁剪。

如果图像处于横向模式，它将填充网格（StackLayout）的宽度，但不会填充高度以保持其比例并且不会从左或右裁剪。

Answer 3

因为我没有发现任何有效的例子。这对我很有用：

<Grid VerticalOptions="FillAndExpand">
      <Image Source="{Binding MyImageSrc}" Aspect="AspectFill" />
</Grid>

Answer 4

方面=＆＃34; AspectFit＆＃34;用于使图像适合布局，如果图像很小，它可以留空。方面=＆＃34; AspectFill＆＃34;用于使您的图像适合布局，它将拉伸您的图像以占据整个空间，并且它不会留下空间，或者您的图像相对于父布局空间是小的。所以你必须使用AspectFill代替AspectFit。

Answer 5

到目前为止，我发现的唯一解决方案是设置Aspect =“ AspectFill”并设置HeightRequest。

您可以将HeightRequest绑定到属性，然后根据页面宽度计算高度。

就我而言，图像始终是相同比例，所以我这样做：

HeightRequest =（int）Math.Truncate（Xamarin.Forms.Application.Current.MainPage.Width / 1.41）;

Answer 6

尝试在网格中包含图像，如：

<grid>
    <image></image>
</grid>

有时当我的图像没有正确调整大小时，将其放入网格中可以解决问题。

Answer 7

尝试使用FFImageLoading NuGet包

中的CachedImage

<强> MyPage.xaml

<StackLayout HorizontalOptions="FillAndExpand"
             VerticalOptions="FillAndExpand"
             Padding="0">
    <ff:CachedImage Source="{Binding GroupLogo}"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill"
                    Aspect="Fill"
                    DownsampleToViewSize="True"/>
</StackLayout>

这将导致图像尝试水平填充容器并自动生成宽度，同时保持其宽高。

在global::Xamarin.Forms.Forms.Init(this, bundle);

之后将此行代码添加到 MainActivity.xaml

CachedImageRenderer.Init(true);

可以找到示例here

Answer 8

stacklayout的heightrequest必须是StartAndExpand或FillAndExpand或EndAndExpand才能自动调整高度

Answer 9

这需要两个平台都进行自定义渲染。创建一个从ImageRenderer继承的FillScreenImageRenderer。

<local:FillScreenImage Source="{ImageSource}"></local:FillScreenImage>

下面的代码可以拉伸以适合整个屏幕。您可以调整视图范围以适合您想要的任何内容，例如您的情况是父视图。

iOS：

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);
        UIGraphics.BeginImageContext(UIScreen.MainScreen.Bounds.Size);
        Control.Image.Draw(UIScreen.MainScreen.Bounds);
        var dest = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        Control.Image = dest;
    }

Android：

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);
        var display = ((Activity)Context).WindowManager.DefaultDisplay;
        var b = ((BitmapDrawable)Control.Drawable).Bitmap;
        Bitmap bitmapResized = Bitmap.CreateScaledBitmap(b, display.Width, display.Height, false);
        Control.SetImageDrawable(new BitmapDrawable(Resources, bitmapResized));
    }

Answer 10

与我合作

<Grid HorizontalOptions="FillAndExpand"
  VerticalOptions="FillAndExpand">
  <Image
         Aspect="AspectFill" 
         HeightRequest="255"
         WidthRequest="255">
         Source="https://pbs.twimg.com/media/DzZdI3AWkAYxH13.jpg" />
</Grid>

Answer 11

我认为这可行。诀窍是将图像包装在框架中并将框架高度绑定到图像。在此示例中，我将图像拟合到网格的一侧。希望对您有帮助

 <Label Text="one lable" FontSize="Large"></Label>
                    <Grid  HorizontalOptions="Center"  BackgroundColor="Yellow" Margin="0"  >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Frame Padding="0" Margin="0"  HeightRequest="{Binding Source={x:Reference image}, Path=Height}" HasShadow="False"   Grid.Row="0" Grid.Column="0" VerticalOptions="Start" >
                            <Image x:Name="image"   Source="roth9_2.bmp" Aspect="AspectFit" ></Image>
                        </Frame>
                    </Grid>

                    <Label Text="another label" FontSize="Large"></Label>

Answer 12

我认为您不走运，至少在 Android 上，必须设置 HeightRequest。只需确保所有上部布局都具有自动高度调整功能。

Answer 13

您可以使用一些 CSS 来实现这一点。注意：css现在对表单的解析有点挑剔，行尾不能有分号，需要在类def的末尾放置宽度调用...

<Image BackgroundColor="Fuchsia"
   Source="{Binding GroupLogo}"
   class="ImageFill"/>

和你相关的 css...

.ImageFill {
    ...
    width: 100%
}

Xamarin表示图像填充宽度与适当的方面

13 个答案: