Xamarin.Forms - Border Shadow Effects Using Custom Frame Renderer

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

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

 

 

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

using System;
namespace XamarinForms_Frame {
    public class ListValue {
        public string Title {
            get;
            set;
        }
        public string Content {
            get;
            set;
        }
    }
}

Setting up the User Interface.

 

 

Go MainPage.Xaml and write following code.

MainPage.Xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinForms_Frame" x:Class="XamarinForms_Frame.XamarinForms_FramePage">
    <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
    <ContentView>
        <StackLayout Margin="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <ListView x:Name="lstValue" HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,0" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout>
                                <Label Text="{Binding Title}"></Label> </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentView>
</ContentPage>

In this Step Add Data to Listview.

 

MainPage.Xaml.cs

using System.Collections.Generic;
using Xamarin.Forms;
using XamarinForms_Frame;
namespace XamarinForms_Frame {
    public partial class XamarinForms_FramePage: ContentPage {
        List < ListValue > list = new List < ListValue > ();
        public XamarinForms_FramePage() {
            InitializeComponent();
            list.Add(new ListValue() {
                Title = "Xamarin Android"
            });
            list.Add(new ListValue() {
                Title = "Xamarin iOS"
            });
            list.Add(new ListValue() {
                Title = "Xamarin.Forms"
            });
            lstValue.ItemsSource = list;
        }
    }
}

Now, Create a Frame Inherit class for customise the Frame control.

 

Go to Solution—>Empty Class—> filename

 

 

MyFrame.cs 

using System;
using Xamarin.Forms;
namespace XamarinForms_Frame {
    public class MyFrame: Frame {
        public MyFrame() {}
    }
}

 

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

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1dp" android:color="#252525" />
    <corners android:radius="5dp" />
    <solid android:color="#FFFFFF" />
</shape>

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.

 

 

MyFrameRender.cs

using Android.Graphics;
using Android.Graphics.Drawables;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using XamarinForms_Frame;
using XamarinForms_Frame.Droid;
[assembly: ExportRenderer(typeof(MyFrame), typeof(MyFrameRender))]
namespace XamarinForms_Frame.Droid {
    public class MyFrameRender: FrameRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < Frame > e) {
            base.OnElementChanged(e);
            if (e.NewElement != null && e.OldElement == null) {
                this.SetBackgroundResource(Resource.Drawable.FrameRenderValue);
                GradientDrawable drawable = (GradientDrawable) this.Background;
                drawable.SetColor(Android.Graphics.Color.ParseColor("#F0F0F0"));
            }
        }
    }
}

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.

 

MyFrameRender.cs

using System;
using CoreGraphics;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XamarinForms_Frame;
[assembly: ExportRenderer(typeof(MyFrame), typeof(XamarinForms_Frame.iOS.MyFrameRender))]
namespace XamarinForms_Frame.iOS {
    public class MyFrameRender: FrameRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < Frame > e) {
            base.OnElementChanged(e);
            Layer.BorderColor = UIColor.White.CGColor;
            Layer.CornerRadius = 10;
            Layer.MasksToBounds = false;
            Layer.ShadowOffset = new CGSize(-2, 2);
            Layer.ShadowRadius = 5;
            Layer.ShadowOpacity = 0.4 f;
        }
    }
}

Now Add Customise frame control in your app.

 

 

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinForms_Frame" x:Class="XamarinForms_Frame.XamarinForms_FramePage" xmlns:controls="clr-namespace:XamarinForms_Frame;assembly=XamarinForms_Frame">
    <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
    <ContentView>
        <StackLayout Margin="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <ListView x:Name="lstValue" HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,0" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <controls:MyFrame HasShadow="true" OutlineColor="Silver">
                                <StackLayout>
                                    <Label Text="{Binding Title}"></Label> </StackLayout>
                            </controls:MyFrame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentView>
</ContentPage>

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.