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
-
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
In this step, we will see how to setup 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.
-
Open your XAML design file and add the following namespace to utilise the
views in 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:
-
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
- It is used to have shadow effect for Xamarin Forms Views and we have five properties that need to be understood to using this effect.
-
Properties:
- Color: It's the color that the shadow will have.
- Opacity: With this property, you can control the opacity you want in the shadow.
- Radius: It’s responsible for handling the blurring in the shadow.
- 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.
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances