Introduction
In this post, we are going 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
and visit the post for 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
- Step 1: Creating new Xamarin.Forms Projects.
-
Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net
Standard Project.
- Step 3: Implementation of Effects using Xamarin Community Toolikit.
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 Xamarin Community Toolkit 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 click 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 Toolikit.
In this step, we will see how to implement the featured effects offered in
Xamarin Community Toolkit. Here, we have expalined the implementation of
Safe Area Effect, Shadow Effect, Life Cycle Effect and StatusBar Effect.
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:
SafeArea
- Indicates which safe areas should be taken into account for this
element
<StackLayout xct:SafeAreaEffect.SafeArea="True" BackgroundColor="White"> </StackLayout>
Before Applying the Effect
After Applying the Effect
ShadowEffect
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.
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances