Adding The Drop Shadow Effect To A Xamarin.Forms Application

In this article, I will show how easily shadows can be added to our Xamarin.Forms applications, this without using Frames and best of all, it will be seen in less than two minutes.

Step 1

First, let's install the Xamarin.CommunityToolkit NuGet package to all of our Xamarin.Forms projects (including platform-specific iOS, Android, UWP, etc).

Step 2

Now let's navigate to whatever XAML file we want to add shadow to, then add the following namespace (it can also be a C# file, but for this example, I'll focus on XAML).

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

And voila, that's it! Now we can make use of the ShadowEffect.

Now just touch use the attached properties of ShadowEffect to control the shadow, for example,

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

Result / Output

| Before |

| After |

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

The good news is that this effect can be applied to any Xamarin.Forms view (not just layouts). So we can add shadows to both labels (labels), buttons and custom views.

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

Resume

I hope this little article has given you enough information to apply shadows to your Xamarin.Forms applications and see the results on both Android and iOS.

I take advantage of the space to invite you to leave a comment if you want me to give more details about anything in this article.

Happy Coding