Quick Tour using Xamarin Community Toolkit

Introduction

A Quick Tour in app allows us to understand what’s an application about and how the app works before using it. In this post, we are going to learn how to create a Quick Tour for the Xamarin Forms Application using the Xamarin Community Toolkit. 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.

Xamarin Community Toolkit Popup

The Popup control allows developers to create and display popups within their applications. The Popup can be extended to return data to the invocation code. This Popup can be used just like a ContentView or ContentPage is used in the Xamarin Forms Application.

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 Interactive Quick Tour 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 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 Interactive Quick Tour using Xamarin Community Toolikit

In this step, we will see how to implement the Quick Tour for the Xamarin Forms App using Popup offered in Xamarin Community Toolkit. This control allows you to have customised popup according the application requirement.

I have divided the quick tour implementation into 3 steps, explained one by one.

• In the each step will have a common footer that shows a Skip button, an actual Step indicator, and a Next button. I have created a BasePage that will contain a ContentView with the common part contains the above mentioned views along with the ContentView. This view is useful to display the different views on the each steps.
  
  
• In the code behind, we will add the Next and Skip functions. Also will initialize them with the navigation logic, so that every time the next is executed it will remove the previous page, and navigate to the next page.
  
  
• Each step will inherit from the BaseQuickTourPage and will wrap the view in the ContentView control. All the steps in the Quick Tour will be followed like the first step.
  
  
• In order to handle which step/page goes next, I created a QuickTourBuilder using the builder pattern, which will handle the logic to indicate which step is going to go next.
  
  
• On the first page of the Quick Tour, implement the IQuickTourLauncher interface, and use the LaunchAsync method to navigate to it.
  
  
• In the sample page code-behind, we need to create the quick tour by using the QuickTourBuilder and specifying the sequence of pages that will be part of it like below.
  
  

Result

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