Xamariin.Forms- Border Shadow Effects Using Custom Frame Renderer

In this article you will learn how to use Border Shadow Effects Using Frame Renderer in your controls in Xamarin forms. 

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).
In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Frame

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

Prerequisites

• Visual Studio 2017(Windows or Mac)

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.


Setting up a Xamarin.Forms Project


Start by creating a new Xamarin.Forms project. If you want, 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.

Creating Your Model(ListValue)

ListValue.cs

Setting up the User Interface. 

Go MainPage.Xaml and write following code.

MainPage.Xaml

In this Step Add Data to Listview.

MainPage.Xaml.cs

Now, Create a Frame Inherit class for customise the Frame control.
Go to Solution—>Empty Class—> MyFrame.cs

MyFrame.cs

Making Your Android Frame Shadows

In this step Create xml file rounded design for customizing frame control.
Go to Solution.Droid—>Empty XML File—> FrameRenderValue.xml. then click Create.

Now, Write the following code in your xml file.

FrameRenderValue.xml

In this step Create a Android FrameRenderer inherit class for customizing frame control
Go to Solution.Droid—>Empty Class—> FrameRenderer

Now write the following code between OnElementChanged override method.

FrameRenderer.cs

Making Your iOS Frame Shadows

In this step Create a iOS FrameRenderer inherit class for customizing frame control
Go to Solution.iOS—>Empty Class—> FrameRenderer

Now write the following code between OnElementChanged override method.

FrameRenderer.cs

Now Add Customise frame control in your app.

MainPage.xaml

Click the play button to try it out.

You can see the Wonderful Border shadow Effect using frame renderer in your Controls.


Summary

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

Thanks For Reading.

Please share comments and feedback.

Xamariin.Forms- Border Shadow Effects Using Frame

In this article you will learn how to use Border Shadow Effects in your controls in Xamarin forms. 

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).
In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Frame

1.HasShadow.        = true or false, to indicate whether to show a shadow effect where the platform supports it.

2 .OutlineColor = A color specification, with or without the prefix, "Color". For example, "Color.Red" and "Red" both specify the color red.

Prerequisites

• Visual Studio 2017(Windows or Mac)

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

Step 1

Go to Visual Studio for Mac.

Click New Solution—> select Multiplatform—>select App--> choose Blank Forms App. Afterwards, click Next.

Step 2

In this step, configure your app. Give the App name (Ex: sample) and Organization Identifier. Afterwards, click Next.

Step 3


In this step, give your project name (Ex: Sample) and solution name (Ex: Sample). Give the path to your project. Afterwards, click "Create".

Step 4

Subsequently, go to the solution. In there, you get all the files and sources of your project. Now, select Xaml Page and double-click to open the MainPage.Xaml page.

Step 5

In this step, Create a Label Without any borders effect.

MainPage.xaml

Frame 

Now, Add the Frame control to your label.

MainPage.xaml

Step 6

In this step, Added the frame control to Button.

MainPage.xaml

Step 7

In this step, Added the  Listview Without Border Shadow Effect in Listview Item.


MainPage.xaml

Now, Change OutlineColor of Frame.


MainPage.xaml

You can see the Wonderful Border shadow Effect in your Controls.

Summary

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

Thanks For Reading.

Please share comments and feedback.