Xamarin Forms - Remove Banding from ShadowView with Gradients

Question

I have a shadowview in my application as above. I have tried to achieve it using LinearGradient as below.

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Color="#D7D7DA" Offset="0.05"/>      
      <GradientStop Color="#D7D7D9" Offset="0.1"/>       
      <GradientStop Color="#D8D8DA" Offset="0.40"/>       
      <GradientStop Color="#DBDBDD" Offset="0.45"/>       
      <GradientStop Color="#DDDDDF" Offset="0.50"/>       
      <GradientStop Color="#DFDFE1" Offset="0.55"/>       
      <GradientStop Color="#E0E0E2" Offset="0.60"/>       
      <GradientStop Color="#E4E4E6" Offset="0.65"/>       
      <GradientStop Color="#E6E6E8" Offset="0.70"/>       
      <GradientStop Color="#E9E9EB" Offset="0.75"/>       
      <GradientStop Color="#ECECEE" Offset="0.80"/>       
      <GradientStop Color="#EEEEF0" Offset="0.85"/>       
      <GradientStop Color="#F4F4F6" Offset="0.95"/>       
      <GradientStop Color="Transparent" Offset="1.0"/>    
</LinearGradientBrush>

Even after following the above approach of multiple gradients, still we can see some horizontal lines are appearing.

Any idea for smooth transition other than breaking the view style in more gradient?

I have applied the above (multiple gradient stop), banding reduced to some extent but still present. I want to achieve smooth transition from top to bottom without banding lines.

Answer 1

You can use the following code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="forms.MainPage">
    <StackLayout>
        <Frame BorderColor="Transparent" 
               HeightRequest="200" 
               WidthRequest="500">
            <Frame.Background>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="#D7D7DA" Offset="0.05" />
                    <GradientStop Color="Transparent" Offset="1.0" />
                </LinearGradientBrush>
            </Frame.Background>
        </Frame>
    </StackLayout>
</ContentPage>

It works well. In addition, you can remove BorderColor="Transparent" to see the border of frame and add BackgroundColor="Tan" to see the effect of shadowview:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="forms.MainPage" 
             BackgroundColor="tan">