Shadows

Shadows create a visual hierarchy in your design. It indicates certain elements can be interacted with and take a higher spot in the visual hierarchy of the page, making them more important. PancakeView supports a wide variety of shadow options to play around with, although support for Android is limited due to platform / Material Design limitations.

How to use

To get started with using shadows we need to set the Shadow property to an instance of a DropShadow object.

Using plain XAML

<yummy:PancakeView>
    <yummy:PancakeView.Shadow>
        <yummy:DropShadow Color="#000000" Offset="10,10" />
    </yummy:PancakeView.Shadow>
    <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 Shadow property as well.

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

Property reference

Property	What it does	Default
BlurRadius	The radius of the blur used to generate the shadow.	10
Color	The color of the shadow.	#000000 / Color.Black
Offset	Offset of the shadow relative to its center.	X:0, Y:0
Opacity	The opacity of the shadow.	0.4

Platform support

Property	iOS	Android	UWP	WPF	macOS	Tizen
BlurRadius	✅	✅	✅	❌	✅	✅
Color	✅	❌	✅	❌	✅	✅
Offset	✅	❌	✅	❌	✅	✅
Opacity	✅	❌	✅	❌	✅	✅