Gradients

Gradients. The holy grail of visual elements. You'd be hard-pressed to find an app that doesn't have one. It's one of those things that just instantly awesomifies your app! 🦄 PancakeView gives you a lot of options to craft a gradient to your liking.

How to use

To get started with using gradients we need to set the BackgroundGradientStops property on our PancakeView.

Using plain XAML

<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>

Property reference PancakeView

Property	What it does	Default
BackgroundGradientEndPoint	Defines the relative endpoint of the gradient. Both values are a value between 0 and 1, indicating the relative position inside the view.	1,0
BackgroundGradientStartPoint	Defines the relative start point of the gradient. Both values are a value between 0 and 1, indicating the relative position inside the view.	0,0
BackgroundGradientStops	The stops within the gradient.	None

Property reference GradientStop

Property	What it does	Default
Color	The Color of this part of the gradient.	Color.Default
Offset	The Offset of this color within the gradient.	None

Platform support

Property	iOS	Android	UWP	WPF	macOS	Tizen
BackgroundGradientEndPoint	✅	✅	✅	❌	✅	✅
BackgroundGradientStartPoint	✅	✅	✅	❌	✅	✅
BackgroundGradientStops	✅	✅	✅	❌	✅	✅