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>

或者，您可以使用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上設置Horizo​​ntalOptions和Vertical Options。

您也可以使用Grid而不是將Horizo​​ntalOptions和VerticalOptions設置為FillAndExpand的ContentView

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>