sthewissen/Xamarin.Forms.PancakeView

gradients on top of each other with no border show a one-pixel separation

SmatchyLaPaglia opened this issue · 3 comments

I have a view that tries to blend two gradients by using a grid and placing one above the other.

Here is the entire code for that view, you will see that I did everything I could to remove the line, including setting the grid's rowSpacing to 0, setting the pancakeViews' borderThicknesses to 0, and setting the borderColors to Transparent:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView
    xmlns ="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pv="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    x:Class="Displayers.Displayers_PurpleToPinkToWhiteGradientView">
    <!--Grid holding everything - background evvvvver so slightly pink-->
    <Grid
        BackgroundColor="#f9f3f8"
        RowSpacing="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <!--Title area definition-->
            <RowDefinition
                Height="4*" />
            <!--List area definition-->
            <RowDefinition
                Height="6*" />
        </Grid.RowDefinitions>
        <!--Gradient-->
        <Grid
            Grid.Row="0"
            RowSpacing="0"
            BackgroundColor="#f9f3f8"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
            <!--Title area definition-->
            <RowDefinition
                Height="6*" />
            <!--List area definition-->
            <RowDefinition
                Height="4*" />
        </Grid.RowDefinitions>
            <!--Purple-to-pink gradient-->
            <pv:PancakeView
                Grid.Row="0"
                BorderThickness="0"
                BorderColor="Transparent"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                BackgroundGradientStartColor="#9E0BE9"
                BackgroundGradientEndColor="#FF55C6" />
            <!--Pink-to-white-ish gradient-->
            <pv:PancakeView
                Grid.Row="1"
                BorderThickness="0"
                BorderColor="Transparent"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                BackgroundGradientStartColor="#FF55C6"
                BackgroundGradientEndColor="#f9f3f8"
                />
        </Grid>
        <ContentView Grid.Row="1" BackgroundColor="#f9f3f8"/>
    </Grid>
</ContentView>

And here is the result (on a page where it is behind some other components):

gradient separator line

I can also supply screenshots where the view is displayed in different sizes and on different page compositions, all showing the same glitch.

Is there a specific reason for not using the multi-colored gradient API to achieve the same?

<yummy:PancakeView BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="1,0">
   <yummy:PancakeView.BackgroundGradientStops>
      <yummy:GradientStopCollection>
         <yummy:GradientStop Color="#FF0000" Offset="0" />
         <yummy:GradientStop Color="#00FF00" Offset="0.5" />
         <yummy:GradientStop Color="#0000FF" Offset="1" />
      </yummy:GradientStopCollection>
   </yummy:PancakeView.BackgroundGradientStops>
   <Label Text="There are no mistakes, only happy accidents." />
</yummy:PancakeView>

Playing with the different offsets to define the position of your colors in the gradient should achieve the same result with just one PancakeView.

That’s a great solution, I’ve used it. Still if I were you I’d want to solve the erroneous behavior too. But no reason you have to. Should this be closed or not?

It's not necessarily that I don't want to, don't get me wrong :) Time is a bit of a problem at the moment. We can definitely leave it open as something that needs to be fixed, but I don't see myself doing it in the foreseeable future.