Borders

Borders frame your content. Literally. They make distinguishing individual items easier. PancakeView supports a wide variety of border options to play around with.

How to use

To get started with using borders we need to set the Border property to an instance of a Border object.

Using plain XAML

<yummy:PancakeView>
    <yummy:PancakeView.Border>
        <yummy:Border Color="#000000" Thickness="10" />
    </yummy:PancakeView.Border>
    <Label Text="This is just a happy little label." />
</yummy:PancakeView>

Using a markup extension

Alternatively, you can use the markup extension syntax for the Border property as well.

<yummy:PancakeView Border="{yummy:BorderMarkup Color=#FF0000, Thickness='10'}">
    <Label Text="This is just a happy little label." />
</yummy:PancakeView>

Using dash pattern

The dash pattern always takes a multiple of two arguments. The first one is for the dash length and the second one for the dash gap. Setting only one value results in the dash length and the dash gap to have the same value. Setting e.g. 4 values like 10,2,5,20 results in an uneven pattern of dashes with irregular spacing in between.

Property reference

Property	What it does	Default
Color	The color of the border.	Color.Default
DashPattern	Indicates whether or not the border has a dash pattern.	None
DrawingStyle	The drawing style of the border (Inside, Outside, Centered).	Inside
GradientEndPoint	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
GradientStartPoint	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
GradientStops	The stops within the gradient.	None
Thickness	The thickness of the border.	0

For more information on using gradients, check out the gradients documentation

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

For more information on using gradients, check out the gradients documentation

Platform support

Property	iOS	Android	UWP	WPF	macOS	Tizen
Color	✅	✅	✅	❌	✅	✅
DashPattern	✅	✅	❌	❌	✅	✅
DrawingStyle	✅	❌	❌	❌	✅	❌
GradientEndPoint	✅	✅	✅	❌	✅	✅
GradientStartPoint	✅	✅	✅	❌	✅	✅
GradientStops	✅	✅	✅	❌	✅	✅
Thickness	✅	✅	✅	❌	✅	✅