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.

 

 

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

<?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 HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Label Text="Hello Xamarin Forms."></Label> </StackLayout>
    </ContentView>
</ContentPage>

Now, add the Frame Control to your label.


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 HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Frame>
                <Label Text="Hello Xamarin Forms."></Label> </Frame>
        </StackLayout>
    </ContentView>
</ContentPage>

 

 

Step 6

In this step, add the frame control to Button.

 

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 HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Frame>
                <Button HeightRequest="20" WidthRequest="200" Text="Click Me."></Button> </Frame>
        </StackLayout>
    </ContentView>
</ContentPage>

 

 

Step 7

In this step, create a ListView without any Border Shadow Effect.


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" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout>
                                <Label Text="{Binding Title}"></Label> </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentView>
</ContentPage>

 

Now, add the Frame Control to your ListView Item for Border Shadow effect.

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" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Frame HasShadow="true">
                                <StackLayout>
                                    <Label Text="{Binding Title}"></Label> </StackLayout>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentView>
</ContentPage>

 

 

Now, change the OutlineColor Property in frame.

 

 

 

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" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Frame Margin="10,10,10,-10" OutlineColor="Blue" HasShadow="true">
                                <StackLayout>
                                    <Label Text="{Binding Title}"></Label> </StackLayout>
                            </Frame>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentView>
</ContentPage>

 

 

You can see the wonderful Border shadow Effect in your controls.

 

Summary

 

This was the process of using Border Shadow effect in your Controls in Xamarin.Forms.

 

Please share your comments and feedback.