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):
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.