Xamarin.Forms - Rounded BoxView Using Custom BoxRenderer

Introduction

BoxView renders a simple rectangle of a specified width, height, and color. You can use BoxView for decoration, rudimentary graphics, and for interaction with the user through touch.

Because Xamarin.Forms does not have a built-in vector graphics system, the BoxView helps to compensate. Some of the sample programs described in this article use BoxView for rendering graphics. The BoxView can be sized to resemble a line of a specific width and thickness, and then rotated by any angle using the Rotation property.

Custom Renderers

Xamarin.Forms user interfaces are rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform. Custom Renderers let developers override this process to customize the appearance and behavior of Xamarin.Forms controls on each platform.

• Renderer Base Classes and Native Controls

 

 

Prerequisites

• Visual Studio 2017(Windows or Mac)

The steps given below are required to be followed in order to Create Rounded BoxView Using BoxRenderer in your controls in Xamarin.Forms, using Visual Studio.

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You’ll learn more by going through the steps yourself.

Choose the Xamarin.Forms App Project type under Cross-platform/App in the New Project dialog.

 

 

Name your app, select “Use Portable Class Library” for shared code, and target both Android and iOS.

 

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click Create.

 

You now have a basic Xamarin.Forms app. Click the play button to try it out.

 

 

Create a Custom BoxView

Now, Create an Inherit class form BoxView for Customizing BoxView control.

Go to Solution—>Empty Class—> filename

 

 

Now, write the following code

MyBoxView.cs

using System;
using Xamarin.Forms;
namespace XamarinForms_RBoxView {
    public class MyBoxView: BoxView {
        //Create a Bindable Property For CornerRadius
        public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(double), typeof(MyBoxView), 0.0);
        public double CornerRadius {
            get {
                return (double) GetValue(CornerRadiusProperty);
            }
            set {
                SetValue(CornerRadiusProperty, value);
            }
        }
    }
}

Making Your Android Implementation

In this step create an inherit Class form, BoxRenderer, for customizing BoxView control

Go to Solution.Droid—>Empty Class—> RoundBoxViewRender

 

 

Now, write the code given below.

RoundBoxViewRender.cs

using System;
using Android.Graphics;
using Android.Util;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using XamarinForms_RBoxView;
using XamarinForms_RBoxView.Droid;
[assembly: ExportRenderer(typeof(MyBoxView), typeof(RoundBoxViewRender))]
namespace XamarinForms_RBoxView.Droid {
    public class RoundBoxViewRender: BoxRenderer {
        private float _cornerRadius;
        private RectF _bounds;
        private Path _path;
        protected override void OnElementChanged(ElementChangedEventArgs < BoxView > e) {
            base.OnElementChanged(e);
            if (Element == null) {
                return;
            }
            var element = (MyBoxView) Element;
            _cornerRadius = TypedValue.ApplyDimension(ComplexUnitType.Dip, (float) element.CornerRadius, Context.Resources.DisplayMetrics);
        }
        protected override void OnSizeChanged(int w, int h, int oldw, int oldh) {
            base.OnSizeChanged(w, h, oldw, oldh);
            if (w != oldw && h != oldh) {
                _bounds = new RectF(0, 0, w, h);
            }
            _path = new Path();
            _path.Reset();
            _path.AddRoundRect(_bounds, _cornerRadius, _cornerRadius, Path.Direction.Cw);
            _path.Close();
        }
        public override void Draw(Canvas canvas) {
            canvas.Save();
            canvas.ClipPath(_path);
            base.Draw(canvas);
            canvas.Restore();
        }
    }
}

Making Your iOS Implementation

In this step Create a inherit Class form BoxRenderer for customizing BoxView control

Go to Solution.iOS—>Empty Class—> RoundBoxViewRender

 

 

Now, write the code given below.

RoundBoxViewRender.cs

using System;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XamarinForms_RBoxView;
using XamarinForms_RBoxView.iOS;
[assembly: ExportRenderer(typeof(MyBoxView), typeof(RoundBoxViewRender))]
namespace XamarinForms_RBoxView.iOS {
    public class RoundBoxViewRender: BoxRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < BoxView > e) {
            base.OnElementChanged(e);
            if (Element == null) return;
            Layer.MasksToBounds = true;
            Layer.CornerRadius = (float)((MyBoxView) this.Element).CornerRadius / 2.0 f;
        }
    }
}

 

Setting up the User Interface.

 

Now Add Customized BoxView control in your app. Go to MainPage.Xaml and write the following code.

MainPage.xaml

<local:MyBoxView Margin="0,50,0,0" VerticalOptions="End"
   HorizontalOptions="Center"
   BackgroundColor="Blue"
   CornerRadius="50"
   WidthRequest=“300”
   HeightRequest="100">
</local:MyBoxView>

 

 

 

 

Oval Shape

<local:MyBoxView VerticalOptions="Center"
   HorizontalOptions="Center"
   BackgroundColor="Blue"
   CornerRadius="100"
   WidthRequest="100"
   HeightRequest="100">
</local:MyBoxView>

 

 

 

 

Diamond Shape 

<local:MyBoxView VerticalOptions="Start" HorizontalOptions="Center" BackgroundColor="Blue" CornerRadius="900" WidthRequest="300" HeightRequest="300">
</local:MyBoxView>

 

 

 

 

Click the play button to try it out.

 

 

You can see the Rounded BoxView Using Custom BoxViewRenderer in your Controls.

Summary

This was the process of how to Create Rounded BoxView Using BoxRenderer in Xamarin.Forms.

Thanks For Reading.

Please share comments and feedback.