Post
Ask Question

Xamarin Community Toolkit - State Layout

Introduction

In this post, we are going to learn about the state layout which is offered in the Xamarin Community Toolkit and how we implement it in our application. This post is a part of Xamarin Community Toolkit - Tutorial Series. Please visit the post if you are new to 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.

State Layout is used for displaying a specific view when your app or screen is in a specific state. For example, displaying the activity indicator when the app is loading and waiting for a response from the service call.

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 State Layout using Xamarin Community Toolikit.

Step 1 - Creating new Xamarin.Forms Projects

Create New Project by selecting "New Project" à "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 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 State Layout using Xamarin Community Toolikit.

In this step, we will see how to implement the state layout offered in Xamarin Community Toolkit. This control allows you to have different views according to a specific state. The view will change automatically according to the current state.

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"

This control offers the "StateToBooleanConverter" which will return true if the specified state matches the bound state. To use it you have to pass the state you want to check as the ConverterParameter.

<ContentPage.Resources>
	<xct:StateToBooleanConverter x:Key="StateToBooleanConverter" />
</ContentPage.Resources>

This converter is useful for displaying the activity indicator based on the state like below

<ActivityIndicator Color="#1abc9c" 
    IsRunning="{Binding MainState, Converter={StaticResource StateToBooleanConverter}, ConverterParameter={x:Static xct:LayoutState.Loading}}" />

Also, state layout has "AnimateStateChanges" property which indicates if you want an animated transition when switching between states.

<StackLayout xct:StateLayout.CurrentState="{Binding MainState}"
	xct:StateLayout.AnimateStateChanges="False">
</StackLayout>

In this post, we will display the activity indicator when the state property changes and find the full code for the same below.

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"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             x:Class="XamarinCommunityToolkit.StateLayoutSamplePage"
             xmlns:pg="clr-namespace:XamarinCommunityToolkit"
             ios:Page.UseSafeArea="true">
    <ContentPage.BindingContext>
        <pg:StateLayoutSamplePageModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <xct:StateToBooleanConverter x:Key="StateToBooleanConverter" />
    </ContentPage.Resources>
    <ContentPage.Content>
        <Grid xct:StateLayout.CurrentState="{Binding MainState}" xct:StateLayout.AnimateStateChanges="true">
            <xct:StateLayout.StateViews>
                <xct:StateView StateKey="Loading" BackgroundColor="White" VerticalOptions="FillAndExpand">
                    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                        <ActivityIndicator Color="#1abc9c" 
                                           IsRunning="{Binding MainState, Converter={StaticResource StateToBooleanConverter}, ConverterParameter={x:Static xct:LayoutState.Loading}}" />
                        <Label Text="Loading..." HorizontalOptions="Center" />
                    </StackLayout>
                </xct:StateView>
            </xct:StateLayout.StateViews>
            <Button Command="{Binding FullscreenLoadingCommand}" 
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    Text="Show Fullscreen Loader" 
                    Margin="0,0,0,16" />
        </Grid>
    </ContentPage.Content>
</ContentPage>

The state can be changed from the view model like below.

FullscreenLoadingCommand = CommandFactory.Create(async () =>
{
	MainState = LayoutState.Loading;
	await Task.Delay(2000);
	MainState = LayoutState.None;
});
The Xamarin Community Toolkit - State Layout offering multiple properties and allow us to have custom states and please visit the below link for more details. https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/statelayout

Download Code

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


Similar Articles