mauilineargradientbrush

LinearGradientBrush not working on Android in Landscape View

In my .NET MAUI App I use a LinearGradientBrush on top of a BackgroundImage like this:

<Grid RowDefinitions="Auto, *">

    <!-- BackgroundImage and LinearGradient -->
    <Image x:Name="BackgroundImage" Grid.Row="0" Source="radiant_gradient.png" Aspect="AspectFill"/>
    <ScrollView Grid.Row="0">
        <ScrollView.Background>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="Transparent" Offset="0.1" />
                <GradientStop Color="White" Offset="1.0" />
            </LinearGradientBrush>
        </ScrollView.Background>
    </ScrollView>

    <ScrollView x:Name="ScrollView" Grid.Row="0" Grid.RowSpan="2" VerticalScrollBarVisibility="Always" BackgroundColor="Transparent" VerticalOptions="StartAndExpand">
    
    </ScrollView
    
</Grid>

In Code-Behind there is an adaption of the Size of the BackgroundImage so that it looks good when in Portrait and Landscape View:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    if (height > 0)
    {
        BackgroundImage.HeightRequest = height * 0.7;
    }
}

Now, on iOS it all looks good and smooth:

Portrait-View:

enter image description here


Landscape-View:

enter image description here

Unfortunately, on Android only the Portrait-View looks good and Landscape-View looks like there is no LinearGradient calculated:

Portrait-View:

enter image description here


Landscape-View:

On this Screenshot you see a hard edge and it is not blurred out/fade out like on iOS

enter image description here



I also tried with an inner Grid instead of the ScrollView for the LinearGradientBrush, but without effect.

Is there anything I can do here to make Android look the same as iOS in Landscape-View? The effect on iOS is what it should look like.

Solution

  • I created a new project to test your code on the Android. And I found:

    1. If I remove the BackgroundImage.HeightRequest = height * 0.7; in the code behind. The LinearGradientBrush will work in Landscape-View. But the image will look strange.
    2. If I keep the BackgroundImage.HeightRequest = height * 0.7; in the code behind and run the project in Landscape-View at first. The LinearGradientBrush will also work.

    But if I keep the BackgroundImage.HeightRequest = height * 0.7; in the code behind and run it Portrait-View at first. After I change the device to Landscape-View, the imageview seems to be cut off by BackgroundImage.HeightRequest = height * 0.7;.

    It seems a new issue for the android. You can post a new issue on the github. And you can try to set the BackgroundImage.HeightRequest = height * 0.7; only for Portrait-View for the android. Such as:

    protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
#if IOS
    if (height > 0)
    {
        BackgroundImage.HeightRequest = height * 0.7;
    }
#endif
#if ANDROID 
    if (height > width)
    {
        BackgroundImage.HeightRequest = height * 0.7;
    }
#endif
}