Learn About Frame Renderer

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (write once and access to multiple platforms).

Here, we are going to create a FrameRenderer in Xamarin.Forms.

Frame

• HasShadow. = true or false, to indicate whether to show a shadow effect where the platform supports it.
• OutlineColor = A color specification, with or without the prefix, "Color". For example, "Color.Red" and "Red" both specify the color red.

Steps

The steps given below are required to be followed in order to use Border Shadow effect using Frame Renderer in your controls in Xamarin forms, using Visual Studio.

This way, you can create a project for Visual Studio.

File -> New Project.

MainPage.xaml

MainPage.xaml.cs

Create a Class (MyFramee.cs) Model.

Add this code to the MyFramee,

1. namespace Custom_FrameeRenderer {
2. publicclassMyFramee: Xamarin.Forms.Frame {
3. public MyFramee() {}
4. }
5. }

Create a class in Custom_FrameeRenderer.Droid -> FrameRendererr

Then, add a code in this Class.

1. publicclassRoundBorderFrameRenderer: FrameRenderer {
2. public RoundBorderFrameRenderer(Context context): base(context) {}
3. publicoverridevoid Draw(Canvas canvas) {
4. base.Draw(canvas);
5. if (Element == null || Element.OutlineColor.A <= 0) {
6. return;
7. }
8. using(var paint = new Paint {
9. AntiAlias = true
10. })
11. using(var path = new Path())
12. using(Path.Direction direction = Path.Direction.Cw)
13. using(Paint.Style style = Paint.Style.Stroke)
14. using(var rect = new RectF(0, 0, canvas.Width, canvas.Height)) {
15. var raduis = Android.App.Application.Context.ToPixels(Element.CornerRadius);
16. path.AddRoundRect(rect, raduis, raduis, direction);
17. //paint.StrokeWidth = Context.Resources.DisplayMetrics.Density * 2;
18. paint.SetStyle(style);
19. paint.Color = Element.OutlineColor.ToAndroid();
20. canvas.DrawPath(path, paint);
21. }
22. }
23. }

Create a local namespace in MainPage.

1. xmlns:local="clr-namespace:NotesFinalPage;assembly=NotesFinalPage"

Then, Create.

1. <local:MyFramee outlinecolor=”blue” cornerRadius=”5”>
2. <Label Text=”FrameRenderer” HeightRequest=”10”/>
3. </ local:MyFramee>

Summary

This was the process of how to use Border Shadow effect using Custom Frame Renderer in your controls in Xamarin.Forms.