Question

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

我该怎么做？

我已经在不同的观点上尝试了各种不同的VerticalOptions，到目前为止我所做的一切都没有用，但我是表格的新手，所以请确认你是否认为解决方案可能是基本的：）

提前致谢！

以下是代码：

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

免责声明：我是作家。

Answer 2

尝试在ContentView上设置HorizontalOptions和Vertical Options。

此外，您可以使用Grid而不是ContentView，并将HorizontalOptions和VerticalOptions设置为FillAndExpand

Answer 3

您可以尝试使用非常方便的IconView。根据您的解决方案，您可以尝试如下。

首先在您的Xamarin.Forms项目中包含IconView.cs。

然后尝试以下操作。

<Grid VerticalOptions="Start">
    <local:IconView Source="PlayerBackground.png"
        VerticalOptions="Fill" HorizontalOptions="Fill"
        Foreground="Green"/>

    <local:IconView Source="Bird.png"
        VerticalOptions="Center" HorizontalOptions="Center"
        Foreground="Blue"/>
</Grid>

将Foreground值更改为您想要的任何颜色。希望这能解决你的问题。

Answer 4

如果你使用 FF CachedImage，你可以像这样应用颜色叠加：

img_radar.Transformations.Add(new TintTransformation() { HexColor = "ffffff" });

forms:CachedImage Source="img_radar_off" x:Name="img_radar" Grid.Row="1" Grid.Column="1">
                        <forms:CachedImage.GestureRecognizers>
                             <TapGestureRecognizer Tapped="tapped_radar"/>
                        </forms:CachedImage.GestureRecognizers>
                    </forms:CachedImage>

Xamarin.Forms，XAML - 如何使用颜色叠加显示图像

4 个答案: