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

Question

我正在我的 Xamarin.Forms 应用中构建布局，我需要显示具有透明颜色叠加层的图像。我有一个 Grid 布局，它显示图像并在其顶部堆叠一个具有半透明背景色的 ContentView。正如您在下图中看到的，ContentView(我怀疑包含 Grid)只是拒绝缩小到图像的大小(网格)。

我该怎么做？

我已经在不同的 View 上尝试了各种不同的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>

或者您可以使用 CachedImage 替换 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>

免责声明:我是作者。