Image 上的 LinearGradientBrush 不起作用，并且没有向底部变得更透明

Question

我想加载一个基本上像黑色 isch 颜色一样非常暗的图像，并向其添加一个 LinearGradientBrush，以便它获得更多的底部。

在网格中，我使用了一个图像，并从顶部的“透明”（以原始颜色查看图像）添加了以下 LinearGradientBrush 到底部的“白色”，以查看它对我的白色 ContentPage 背景变得更加“透明” :

<Image Grid.Row="0" 
       Grid.Column="0" 
       Grid.ColumnSpan="3" 
       Source="myImage.jpg" 
       Aspect="AspectFill" 
       HeightRequest="300"
       x:Name="myImage">

    <Image.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Transparent" Offset="0.1" />
            <GradientStop Color="White" Offset="1.0" />
        </LinearGradientBrush>
    </Image.Background>

</Image>

不幸的是，这根本不起作用，我看到没有渐变的原始图像：

我还在我的背景上尝试了具有不同颜色的 LinearGradientBrush 以查看它是否完全适用于这些值：

预期： 我想看到的是一个 LinearGradient，就像这里的背景图像一样，这样图像底部就更透明了。我也相信，这个渐变应该从上到下早点结束，这样它就可以早点变白。也许也可以使用较小的图像高度，不知道什么是最好的选择：

=============再次尝试... =======================

我尝试使用这张 Photo 重命名为 myImage.jpg

在这里，我使用 Grid 并将照片和 ScrollView 放在同一行/列中。也尝试使用 ZIndex。

这里的Gradient-Brush效果似乎不够平滑。在最顶部，它太雾了，而在最底部，它还没有褪色到足够白。你对这个渐变有足够的了解吗

<Grid RowDefinitions="Auto,*" ColumnDefinitions="*,*">
                
    <Image Grid.Row="0" 
           Grid.Column="0" 
           Grid.ColumnSpan="3" 
           Source="myImage.jpg" 
           Aspect="AspectFill" 
           HeightRequest="500"
           x:Name="myImage" />
    
    <ScrollView Grid.Row="0" Grid.Column="0" WidthRequest="800" Margin="0, -190, 0, 0">
        
        <ScrollView.Background>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="Transparent" Offset="0.1" />
                <GradientStop Color="White" Offset="1.0" />
            </LinearGradientBrush>

            <!--<RadialGradientBrush>
                <GradientStop Color="Transparent" Offset="0.1" />
                <GradientStop Color="White" Offset="1.0" />
            </RadialGradientBrush>-->
        </ScrollView.Background>
        
    </ScrollView>

</Grid>

Answer 1

您可以在

<GradientStop>

中设置更多

<LinearGradientBrush>

项目：

<LinearGradientBrush EndPoint="0,1">
    <GradientStop Color="Transparent" Offset="0.0" />
    <GradientStop Color="Transparent" Offset="0.3" />
    <GradientStop Color="White" Offset="0.7" />
    <GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>

这样你就可以控制透明和白色之间的插值。尝试使用不同的

Offset

值和停止次数，看看是否可以达到预期的结果。

Answer 2

我也测试了

Image

或者

Frame

官方提供的，但是和你一样失败了

你想要这个效果？

可以设置子元素背景线性渐变：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp1"
             x:Name="this"
             x:Class="MauiApp1.MainPage"
             BackgroundImageSource="ddd.png"
             Shell.NavBarIsVisible="False">

   <ScrollView>
        <ScrollView.Background>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="Transparent"
                          Offset="0.1" />
                <GradientStop Color="White"
                          Offset="1.0" />
            </LinearGradientBrush>
        </ScrollView.Background>

        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">            
         
            <!--<Image Source="ddd.png">
                <Image.Background>
                    <LinearGradientBrush EndPoint="0,1">
                        <GradientStop Color="Black" Offset="0.1" />
                        <GradientStop Color="Transparent" Offset="1.0" />
                    </LinearGradientBrush>
                </Image.Background>
            </Image>-->


           <Button Text="Open window" Command="{Binding Source={x:Static local:ViewModel.Instance}, Path=OpenNewWindowCommand}"/>
           <Button Text="Show alert" Clicked="Button_Clicked" />

       </VerticalStackLayout>
    </ScrollView>

</ContentPage>

更新

关于虽然Gradient不够“平滑”。就像ewerspej说的，你可以添加更多的GradientStop对象。参考 创建垂直线性渐变：

然后，将两个或多个 GradientStop 对象添加到

LinearGradientBrush.GradientStops

集合，指定渐变中的颜色及其位置。