问题描述
我正在尝试将Image
的大小调整为BindableLayout
中父容器的宽度,但是我没有找到实现此目的的方法。
我基于其他topic来实现这一目标。
我首先尝试将Image
嵌入到Grid
容器中,如下所示:
<StackLayout x:Name="NewsList"
BindableLayout.ItemsSource="{Binding News}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame>
<Grid Padding="0" Margin="0"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
BackgroundColor="Red">
<Image Source="{Binding Image}" Aspect="AspectFit"/>
</Grid>
<Label Text="Description" />
</Frame>
</DataTemplate>
</BindableLayout>
</StackLayout
=>,但我们可以看到图像周围出现红色条纹(在顶部/底部,或在左侧/右侧):
然后,我尝试像这样使用CachedImage
中的FFImageLoading
:
<Grid Padding="0" Margin="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Orange">
<ffimageloading:CachedImage Source="{Binding Image}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Aspect="AspectFill"
DownsampletoViewSize="True"/>
</Grid>
=>,但在这种情况下,图像不完全可见或被截断
=>那么还有另一种方法可以让我在父容器的整个宽度上显示图像,并保持原始比例吗?
更新1:
- https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-9/s720x720/118713552_3623822074306674_9076571821151026884_n.jpg?_nc_cat=110&_nc_sid=110474&_nc_ohc=8xcbXj0tf5IAX-b_jE9&_nc_ht=scontent-cdt1-1.xx&tp=7&oh=60af4b756944856e28327736fd542c65&oe=5F98D58D
- https://scontent-cdg2-1.xx.fbcdn.net/v/t15.13418-10/96415113_248439429597332_6367448024599232512_n.jpg?_nc_cat=100&_nc_sid=ad6a45&_nc_ohc=2jBGHupMA20AX-8Y-M8&_nc_ht=scontent-cdg2-1.xx&oh=918470153ca23c927b921b2f1a61d4a5&oe=5F97D9C7
- https://scontent-cdg2-1.xx.fbcdn.net/v/t15.5256-10/95397765_284933452664428_1743250590344937472_n.jpg?_nc_cat=111&_nc_sid=ad6a45&_nc_ohc=LWajKszkHiMAX-sqkeZ&_nc_oc=AQmqjn5ykjy2tYfmRvpQChhtdsJZgk9_Smn3oU9weGt5xe9QY4933u_sNV1qAnZrIFc&_nc_ht=scontent-cdg2-1.xx&oh=c93af2de18eb417b224d8ea211197cda&oe=5F98A096
- https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/s720x720/95921743_3263337923688426_3234683279575613440_o.jpg?_nc_cat=102&_nc_sid=8024bb&_nc_ohc=AkRxtEdIyU8AX99QWmR&_nc_ht=scontent-cdg2-1.xx&tp=7&oh=6dc746bd0ea30097aee78f57a6395fb4&oe=5F980B69
更新2:
我已经尝试了@Leo给出的解决方案:
<StackLayout Orientation="Vertical" x:DataType="model:News">
<Image Source="{Binding Image}" Aspect="AspectFill"/>
<Label Text="Description" />
</StackLayout>
但是由于第一张和第四张图片被截断,结果仍然不理想:
解决方法
我下载了图片并按照下面的方法进行操作,您可以检查一下:
<StackLayout x:Name="NewsList" BackgroundColor="Red"
BindableLayout.ItemsSource="{Binding News}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical">
<Image Source="{Binding .}" Aspect="AspectFill"/>
<Label Text="Description" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
效果如下:
,我终于找到了对我here有效的解决方案,这是 Frankvans 提供的解决方案:
class ImageFit : Image {
protected override SizeRequest OnMeasure(double widthConstraint,double heightConstraint) {
SizeRequest sizeRequest = base.OnMeasure(double.PositiveInfinity,double.PositiveInfinity);
var innerRatio = sizeRequest.Request.Width / sizeRequest.Request.Height;
if (double.IsNaN(innerRatio))
return sizeRequest;
// Width needs to be adjusted
if (double.IsInfinity(heightConstraint)) {
// Height needs to be adjusted
if (double.IsInfinity(widthConstraint)) {
widthConstraint = sizeRequest.Request.Width;
heightConstraint = sizeRequest.Request.Height;
} else {
// Adjust height
heightConstraint = widthConstraint * sizeRequest.Request.Height / sizeRequest.Request.Width;
}
} else if (double.IsInfinity(widthConstraint)) {
// Adjust width
widthConstraint = heightConstraint * sizeRequest.Request.Width / sizeRequest.Request.Height;
} else {
// strech the image to make it fit while conserving it's ratio
var outerRatio = widthConstraint / heightConstraint;
var ratioFactor = (innerRatio >= outerRatio) ?
(widthConstraint / sizeRequest.Request.Width) :
(heightConstraint / sizeRequest.Request.Height);
widthConstraint = sizeRequest.Request.Width * ratioFactor;
heightConstraint = sizeRequest.Request.Height * ratioFactor;
}
sizeRequest = new SizeRequest(new Size(widthConstraint,heightConstraint));
return sizeRequest;
}
}