Customising Frame shadow in Xamarin Forms. Everything you need to know!
Hello lovely ones,
Great to be back with you guys after some hectic work days(yeah yeah i hear that actually not really great but ok ill take my chances. 😬) recently i was working on Xamarin Forms Frames shadow. Hope you know about Frame. It is an UI element which has some good properties with it like HasShadow, CornerRadius, IsClippedToBounds and etc,(I heard you, Frame is a UI element everyone on the world knows that 😏)
Note: Improvisation of Frame shadow with blur options using SkiaSharp is added. You can check the story here(Customising Frame shadow in Xamarin Forms with Blur option using SkiaSharp. Everything you need to know!).
Well i am going to discuss about shadow of the frame and how we can customise it according to our needs(Well designers have their perception of shadow,atleast 😜). I will discuss in three forms with you guys to get a clear picture about shadow of the frame and ways to customise it.
Default shadow
By deafault if you don’t mention HasShadow property XF will take it as true and shadow will be visible in iOS device but sadly not for Android devices(XF Frames are like girls they don’t ask you permission they apply by themselves. If you don’t like it mention it clearly🤪). XF frame shadows don’t give support for Android platform. so obviously we need to go for custom renderer, you will see that on 3rd option of this story.
<Frame WidthRequest=”100" HeightRequest=”100" CornerRadius=”10"></Frame>The above frame will have a shadow by default and most importantly frames have a default Padding(I’ve said earlier XF frames behaviour obviously matches😛). so if you tend to insert a label inside the frame it will obviously takes the padding all the sides and will displayed accordingly. you have to mention Padding=”0” in order to avoid that. Its completely depend on your design aspects.
This will show a nice shadow all the sides of the frame in iOS and no shadow in Android like below,
NOTE: If you are thinking of the top selection bar like segmented control you can check the details of it here in my earlier story(Segmented Control in Xamarin Forms. No Plugins!!).
UI tweak to adjust shadow in iOS
I don’t like the default shadow i want to customise it😬. Well what can i do.? But how can i do? 🤔 well guys this tweak only works on iOS as only iOS devices support default shadow. Don’t freak at me we will be seeing for both platforms in next point.
We place frame inside a frame. The inner frame is set to have no shadow and outer frame will be set to have shadow. ok cool i see the shadows , how do u expect to customise it.?🤷♂️ well that’s the easiest part. place Margin to outer frame. Bingo you can costimize by adjsting the margins. Simple right(I know you are searching for my feet. Oh please i don’t really like that shit. ah but ok. 😬). cheers guys this is how the output will be like
Well you can see that android no shadow but gives a good look, not bad really. iOS device left and right side even shadow and bottom has much shadow and top there is no shadow. i have used Margin=”3,6,3,0" to achieve this. play with it change the values feel the difference. cheers.✌️
<Grid VerticalOptions=”Center” HorizontalOptions=”Center”>
<Frame WidthRequest=”100" HeightRequest=”100" Margin=”3,6,3,0" CornerRadius=”10"></Frame>
<Frame WidthRequest=”100" HeightRequest=”100" HasShadow=”False” CornerRadius=”10">
<Label Text=”Hello World” VerticalOptions=”Center”></Label>
</Frame>
</Grid>Custom Renderer
Well lets get some hands on native implementation this helps to achieve shadow on both platforms. I have created CustomFrame.cs and CustomBoxView.cs in PCL project. well we are talking about custom frame shadow why create CustomBoxView? Reason is XF(Yeah wt ever goes wrong blame XF. its not your problem 🤪). But this is serious XF 4.5+ messed things with frame shadow and even if u place custom renderer for frame it takes default shadow values and renderers it(trust me i didn’t do that 😬).
So for iOS we are going to use CustomBoxView Renderer and For Android CustomFrame. In Andorid project create the CustomFrameRenderer.cs class which implements, Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer and CustomBoxRenderer.cs class in iOS project which implements BoxRenderer.
Android CustomFrameRenderer.cs
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
var element = e.NewElement as CustomFrame;if (element == null) return;if (element.HasShadow)
{
Elevation = 30.0f;
TranslationZ = 0.0f;
SetZ(30f);
}}
Android deliver its shadow in 3D dimension.XAxis,YAxis,ZAxis you can get a clear picture from below image,
Elevation is the shadowRadius and TranslationZ is ZAxis translation of the view from its original place and SetZ is,
Z-Value = Elevation + TranslationZ
This is how shadow works on Android. You can change the values and check the differences.
iOS CustomBoxRenderer.cs
iOS says any UI view can have shadow effect. you can apply shadow for StackLayout, Grid, Label, Entry and etc; We are using BoxView.
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.BoxView> e)
{
base.OnElementChanged(e);
var elem = (CustomBoxView)this.Element;
if (elem != null)
{// Border
//this.Layer.CornerRadius = 10;
//this.Layer.Bounds.Inset((int)elem.BorderThickness, (int)elem.BorderThickness);
//Layer.BorderColor = elem.BorderColor.ToCGColor();
//Layer.BorderWidth = (float)elem.BorderThickness;// Shadow
this.Layer.ShadowColor = UIColor.DarkGray.CGColor;
this.Layer.ShadowOpacity = 0.2f;
this.Layer.ShadowRadius = 8.0f;
this.Layer.ShadowOffset = new SizeF(0, 5);}
}
this BoxView to take ShadowColor as DarkGray, ShadowOpacity as 0.2float, ShadowRadius as 8.0float, ShadowOffset as new Size(0,5). here in Offset we set the XAxis and YAxis. so it takes 0 offset in XAxis and 5 offset in YAxis.Below is the out put,
Further more you can add border as well(Commented code section) and create these values as bindable property and define this in Xaml in PCL project itself. change the values and feel the difference. cheers everyone.
Hope you like the output(no give me my money back😬). well guys the source code in updated in GitHub. Feel free to use it. Xamarin Forms never been easier. If you have any feedbacks or ideas share it in the comments. Cheerzzzzz✌️
NOTE: If you are thinking of the top selection bar like segmented control you can check the details of it here in my earlier story(Segmented Control in Xamarin Forms. No Plugins!!).
NOTE: Improvisation of Frame shadow with blur options using SkiaSharp is added. You can check the story here(Customising Frame shadow in Xamarin Forms with Blur option using SkiaSharp. Everything you need to know!).
