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)
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.
