Creating Text Shadow Effects In Xamarin Forms UWP
We all love drop shadows on our titles and headers, button text, anywhere we want the text to really pop. Who doesn’t?
While it’s still not as easy as we’d like it to be, text shadows are possible using Xamarin Forms Effects. Effects are much like custom renderers, but easier to use. Though not having as much flexibility as renderers, effects are perfect for modifications to controls (such as a label that needs a drop shadow).
Xamarin (and its contributors) have provided an excellent example on Github and it works perfectly fine for Android, but when it came to UWP and all its peculiarities (for our needs at least), our team felt it needed to go a bit further. We’ve provided code below that is a modification of their fine work.
ShadowEffect goes inside the core project.
For neatness and clarity, we like to put our effects inside an Effects folder within the Xamarin Forms core project, but a separate folder isn’t necessary. It’s entirely up to you.
If you compare the below code with the Github sample, you will see that we’ve added more control over the shadow effect by including Opacity, FontAttributes, FontSize (with a Xamarin Forms font converter to allow font sizes such as micro or header instead of just numbers) and a custom FontFamily if desired.
Also, we’ve added more placement control by including HorizontalOptions, VerticalOptions, HorizontalTextAlignment, and VerticalTextAlignment.
UWP Platform
Again, for neatness and clarity, we like to put our effects inside an Effects folder in the UWP Platform project.
We commented out the two fixed-value horizontal and vertical options in favor of a more-flexible solution. We also added in Opacity, FontAttributes, FontSize, and FontFamily, as well as HorizontalTextAlignment, and VerticalTextAlignment.
Importance of The Changes
When we tried to do anything custom – such as change the font size, the the TextAlignment, the FontFamily, or the FontAttributes – we ran into trouble, as the examples below will demonstrate.
No Custom FontFamily On The Shadow
No FontSize On The Shadow
No Vertical/Horizontal Options Or Alignment On The Shadow
All Settings Correct ON The Shadow
The Xaml - Which Must Be Enclosed In Its Own Grid
Even with all the custom coding, there were times when we just couldn’t get the shadow to show up.
Finally, we realized that either the label was in a Grid.ColumnSpan or a Stacklayout or any number of other situations we run across on a daily basis.
The one thing that always solved this problem was putting the label (along with its shadow) in its own grid. We first thought of using a Frame, but neither that nor a StackLayout would work.
It took quite a bit of work, but now that its done, the results are well worth it. Hope this helps you to make some text that really pops!
