Shadow Effect| Xamarin.Forms | Xamarin Community Toolkit

Hello folks, today I want to show how easily you can add shadows to your Xamarin.Forms applications (NO Frame!).

This article will be short since no one wants to read tons of text :)

First of all, let’s install Xamarin.CommunityToolkit nuget package

We need to add Xamarin.CommunityToolkit to all of our Xamarin.Forms projects (including platform-specific ones iOS, Android, UWP, etc.).

XCT installation

Now navigate to the XAML file with the page/layout/view in which you wish to add shadow and add the following namespace (It can be a C# file as well, but in this example, I’d focus on XAML).

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

That’s it! Now you can use ShadowEffect.

Use ShadowEffect’s attached properties for controlling the shadow

e.g.

<StackLayout
    xct:ShadowEffect.Color="Red"
    xct:ShadowEffect.OffsetY="5"
    xct:ShadowEffect.Radius="10"

XCT ShadowEffect

Color, Opacity, Radius, OffsetX, OffsetY properties are available for you to adjust shadow as your design requires.

The good news, this effect can be applied to any Xamarin.Forms View (Not only layouts). So you can add shadow to labels, buttons, and your custom views.

Congratulations! Now you know how to use shadow effects from Xamarin.CommunityToolkit