Xamarin使用适当的纵横比形成图像填充宽度

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

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

它填充宽度，但不希望绘制全宽图像。为什么?

---

AspectFit

按照tin上的说明进行操作，它会将整个图像放入视图中，这可能会使视图的某些部分留空。直接来自Xamarin的文档：

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

您需要的是

AspectFill

，它将缩放图像以适应：

缩放图像以填充视图。为了填充视图，可能会剪裁某些零件

如果您试图将图像视图设置为图像的高度，我建议在图像高度中添加一个

HeightRequest

。根据我的经验，在Xamarin中，图像控件似乎不会自动伸缩，因为默认情况下本机控件似乎也不支持这种伸缩

---

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

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

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

---

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

因为我没有找到有效的示例。这对我来说非常有效：

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

---

我也有类似的问题。我想在可能的情况下填充StackLayout的宽度和高度，但不裁剪实际图像。这里的答案帮助我找到了正确的方法。以下是对我有效的方法：

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

也许它对某人有用

澄清：

HorizontalOptions和VerticalOptions的值为FillAndExpand，因此网格的高度和宽度将调整为填充父网格，在本例中，即Stacklayout。图像是网格的子对象，因此它根据父对象进行变换（我们没有为图像提供任何其他选项）

图像的纵横比设置为AspectFit，这样图像将适合视图（在本例中为栅格）并保留其比率

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

---

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

尝试使用NuGet package中的

CachedImage

MyPage.xaml

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

例如，可以找到Aspect=“AspectFit”用于将图像放入布局中，如果图像较小，则会留下空间。 Aspect=“AspectFill”用于将图像放入布局中，它会拉伸图像以占据全部空间，不会留下空间，或者图像相对于父布局空间较小。

---

因此，您必须使用AspectFill代替AspectFit。

这需要两种平台的自定义渲染。创建从ImageRenderer继承的FillScreenImageRenderer

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

下面的代码可以拉伸以适合整个屏幕。您可以调整视图边界以适合任何需要的内容，例如，在您的案例中，是父视图

iOS：

protected override void OnElementChanged（ElementChangedEventArgs e）
{
基础。一个要素发生变化（e）；
UIGraphics.BeginImageContext（UIScreen.MainScreen.Bounds.Size）；
Control.Image.Draw（UIScreen.MainScreen.Bounds）；
var dest=UIGraphics.GetImageFromCurrentImageContext（）；
UIGraphics.EndImageContext（）；
Control.Image=dest；
}

安卓：

    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));
    }

protected override void OnElementChanged（ElementChangedEventArgs e）
{
基础。一个要素发生变化（e）；
变量显示=（（活动）上下文）.WindowManager.DefaultDisplay；
var b=（（BitmapDrawable）Control.Drawable）.Bitmap；
位图bitmapResized=Bitmap.CreateScaledBitmap（b，显示.宽度，显示.高度，false）；
SetImageDrawable（新的BitmapDrawable（参考资料，bitmapResized））；
}

它和我一起工作

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

来源=”https://pbs.twimg.com/media/DzZdI3AWkAYxH13.jpg" />

我认为这是可行的。诀窍是将图像包装在帧中，并将帧高度绑定到图像。在本例中，我将图像拟合到栅格的一侧。希望能有帮助

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

---

到目前为止，我找到的唯一解决方案是设置Aspect=“AspectFill”和设置HeightRequest

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

在我的例子中，图像的比例始终相同，因此我：

---

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

您可以通过使用一些CSS来实现这一点。注意：css解析现在在表单中有点挑剔，行的末尾不能有分号，需要将width调用放在类定义的末尾

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

---

你要找的是AspectFill（c）不，我不想剪切图像。我希望它填充宽度和高度，它需要，以保存图像的外观。我该怎么做？高度请求不是一个选项。我不知道我将接收到什么图像正如我所说，本机控件不可缩放，所以在XF XAML中这样做

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

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

.ImageFill {
    ...
    width: 100%
}