首页 文章

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

提问于
浏览 次
2

我正在我的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>

这是它应该是什么样子：

Mockup

这就是我实际得到的：

iOS simulator screenshot

c# xaml xamarin background xamarin.forms

3 回答

  • 0

    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>

    免责声明：我是作家 .

    回复于
  • 2

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

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

    回复于
  • 0

    您可以尝试使用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 值更改为您想要的任何颜色 . 希望这能解决您的问题 .

    回复于

相关问题