Post
Ask Question

Xamarin Community Toolkit - Effects

Introduction

In this post, we are going to see the featured effects available in Xamarin Community Toolkit and how to use them. This post is a part of Xamarin Community Toolkit - Tutorial Series, visit the post to know about the Xamarin Community Toolkit. The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF, and Universal Windows Platform (UWP) apps using Xamarin.Forms. 

Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of Effects using Xamarin Community Toolkit.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New Project à Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the scanner in Xamarin.Forms .Net Standard Project

In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right clicking the solution and select “Manage Nuget Packages”.
     
     
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

    ​​​​​

Step 3: Implementation of Effects using Xamarin Community Toolkit.

In this step, we will see how to implement the featured effects offered in Xamarin Community Toolkit. Here, we have explained the implementation of Safe Area Effect, Shadow Effect, Life Cycle Effect, and StatusBar Effect.

  • Open your XAML design file and add the following namespace to utilize the views on the screen. 
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

SafeAreaEffect

  • The SafeAreaEffect is an effect that can be added to any element through an attached property to indicate whether or not that element should take current safe areas into account.
  • This is an area of the screen that is safe for all devices that use iOS 11 and greater.

Specifically, it will help to make sure that content isn't clipped by rounded device corners, the home indicator, or the sensor housing on an iPhone X. The effect only targets iOS, meaning that on other platforms it does not do anything.

Properties

<StackLayout xct:SafeAreaEffect.SafeArea="True" BackgroundColor="White"> </StackLayout>

SafeArea

Indicates which safe areas should be taken into account for this element

Before Applying the Effect

After Applying the Effect

ShadowEffect

It is used to have a shadow effect for Xamarin Forms Views and we have five properties that need to be understood to use this effect.

Properties

  1. Color: It's the color that the shadow will have.
  2. Opacity: With this property, you can control the opacity you want in the shadow.
  3. Radius: It’s responsible for handling the blurring in the shadow.
  4. OffsetX/OffsetY: It allows us to define the displacement that the shadow will have, therefore OffsetX is responsible for specifying the distance of the horizontal displacement, while OffsetY of the vertical displacement.

In this example, I have updated the shadow effect for the Image Control like in the following code block

<Image
	x:Name="img"
	HeightRequest="150"
	Margin="10"
	xct:ShadowEffect.Color="Green" 
	xct:ShadowEffect.OffsetY="15"
	Source="https://shorturl.at/qsvJ1">
</Image>

Lifecycle Effect

The LifecycleEffect allows you to determine when a VisualElement has its renderer allocated by the platform. It can be identified by using the LifeCycleEffect event handlers.

<Image
	x:Name="img"
	HeightRequest="150"
	Margin="10"
	Source="https://shorturl.at/qsvJ1">
	<Image.Effects>
		<xct:LifecycleEffect Loaded="LifeCycleEffect_Loaded" Unloaded="LifeCycleEffect_Unloaded" />
	</Image.Effects>
</Image>
private void LifeCycleEffect_Loaded(object sender, EventArgs e)
{
	Console.WriteLine("Image loaded...");
}

private void LifeCycleEffect_Unloaded(object sender, EventArgs e)
{
	Console.WriteLine("Image Unloaded...");
}

Statusbar Effect

  • This effect is used to control the status bar color in the Xamarin Forms Application during the compile time or runtime or like button clicks. It is a single line code to be useful to control.

In this example, we will create color resource in the App.xaml file like below. It will be updated later dynamically.

<Color x:Key="StatusBarColor">Firebrick</Color>

Then add the following line in the root element of your XAML page as a DynamicResource

xct:StatusBarEffect.Color="{DynamicResource StatusBarColor}"

Then add the 3 buttons like in the sample screen and update your dynamic resource color on button click like below.

private void ButtonClicked(object sender, EventArgs e)
{
	Application.Current.Resources["StatusBarColor"] = ((Button)sender).TextColor;            
}

Full Code

<?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:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkit.EffectsSamplePage"
             xct:StatusBarEffect.Color="{DynamicResource StatusBarColor}">
    <ContentPage.Content>
        <StackLayout xct:SafeAreaEffect.SafeArea="True"
                     BackgroundColor="White">

            <Frame BackgroundColor="#2196F3" 
                   Padding="24" 
                   CornerRadius="0">
                <Label Text="Xamarin Forms Effects using XCT" 
                       HorizontalTextAlignment="Center" 
                       TextColor="White" 
                       FontSize="36"/>
            </Frame>
            
            <Image
                x:Name="img"
                HeightRequest="150"
                Margin="10"
                xct:ShadowEffect.Color="Green" 
                xct:ShadowEffect.OffsetY="15"
                Source="https://shorturl.at/qsvJ1">
                <Image.Effects>
                    <xct:LifecycleEffect Loaded="LifeCycleEffect_Loaded" Unloaded="LifeCycleEffect_Unloaded" />
                </Image.Effects>
            </Image>
            <Grid Padding="10">
                <Button Clicked="ButtonClicked" Text="Red" TextColor="Red" BorderColor="Red" BorderWidth="2" Grid.Column="0"/>
                <Button Clicked="ButtonClicked" Text="Green" TextColor="Green" BorderColor="Green" BorderWidth="2" Grid.Column="1"/>
                <Button Clicked="ButtonClicked" Text="Blue" TextColor="Blue" BorderColor="Blue" BorderWidth="2" Grid.Column="2"/>
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
The XCT offering other type effects as well and please visit the below link for more samples. https://github.com/xamarin/XamarinCommunityToolkit/tree/main/samples/XCT.Sample/Pages/Effects

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.


Similar Articles