Xamarin.Forms - Border Shadow Effects Using Frame

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.

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.

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

Step 1

Go to Visual Studio for Mac.

Click New Solution >> Multiplatform >> App >> 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 (PCL). Now, select XAML page and double-click to open the MainPage.Xaml page.



Step 5

In this step, create a Label without any border shadow effect.

MainPage.xaml


Now, add the Frame Control to your label.


MainPage.xaml

1. <?xml version="1.0" encoding="utf-8"?>
2. <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">
3. <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
4. <ContentView>
5. <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
6. <Frame>
7. <Label Text="Hello Xamarin Forms."></Label> </Frame>
8. </StackLayout>
9. </ContentView>
10. </ContentPage>

Step 6

In this step, add the frame control to Button.