Xamarin.Forms、XAML - 如何显示带有颜色叠加的图像

Question

我正在我的 Xamarin.Forms 应用程序中构建布局，我需要显示带有透明颜色叠加层的图像。我有一个Grid布局，显示图像并ContentView在其顶部堆叠一个半透明背景色。正如您在下面的图片中看到的，ContentView（我怀疑包含Grid）只是拒绝缩小到图像的大小（ 中最大的项目Grid）。

我怎样才能做到这一点？

我已经VerticalOptions在不同的视图上尝试了各种不同的方法，到目前为止我所做的一切都没有奏效，但我是 Forms 的新手，所以请确认您是否认为解决方案可能是基本的。:)

提前致谢！

这是代码：

<Grid VerticalOptions="Start">
    <Image Source="PlayerBackground.png" />
    <ContentView BackgroundColor="#88000000"></ContentView>
    <StackLayout VerticalOptions="Center">
        <Image/>
        <Label/>
    </StackLayout>
</Grid>

它应该是这样的：

这就是我实际得到的：

Answer 1

Aspect 属性是关键。

   <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
        <Image HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Source="PlayerBackground.png" />
        <BoxView HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="#000000" Opacity="0.8"/>
    </Grid>

或者你可以使用CachedImagewhich 是Image替换：

<ffimageloading:CachedImage Source="{Binding ImageUrl}">
    <ffimageloading:CachedImage.Transformations>
        <!-- First two digits from HexColor = ALPHA channel -->
        <fftransformations:TintTransformation HexColor="#60ff0000" EnableSolidColor="true"/>
    </ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>

免责声明：我是作者。