Xamarin.Forms-Rounded BoxView Using Custom BoxRenderer

In this article you will learn how to Create Rounded BoxView Using BoxRenderer in Xamarin forms. 

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 a Inherit class form BoxView for Customise BoxView control.

Go to Solution—>Empty Class—> filename

Now, Write the following code

MyBoxView.cs

Making Your Android Implementation


In this step Create a inherit Class form BoxRenderer for customizing BoxView control
Go to Solution.Droid—>Empty Class—> RoundBoxViewRender

Now, write the code given below.

RoundBoxViewRender.cs

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

Setting up the User Interface.

Now Add Customised BoxView control in your app.
Go MainPage.Xaml and write following code.


MainPage.xaml

Oval View

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.