Free Figma Designs you can duplicate and edit for your own apps (link below)

Simple Onboarding or Walkthrough Pages in Xamarin iOS & Android

Improve UX using Free Intro, Tutorial, or Getting Started Screens

Dark Mode Walkthrough page for a published app

You’d think that Walkthrough pages were a lot more complicated to implement, but we realized that there really is no excuse for all apps made in Xamarin.Forms to have one, if needed. Recently, while rebranding the SignalCortex app to TonDone, we got a chance to play with design and created this tutorial for others to benefit.

Steps to Create the Onboarding flow

  • To explain this better, I created a sample repo starting from a blank Xamarin Forms template, and it just took these changes to get it implemented, which are explained below.
  • Add a HasRunIntro preference (you can choose another name) check to the first page of the app, which can be your Dashboard or Login page. If the intro was not run before, then we set the preference to true, ensuring that it wont run again. And within that if statement, you launch the Walkthrough page as a Modal:
var hasRunIntro = Preferences.Get("HasRunIntro", false);            if (!hasRunIntro) {
Preferences.Set("HasRunIntro", true);
await Navigation.PushModalAsync(new WalkthroughPage());
}
  • Then in your core/shared project, create a new WalkthroughPage and update it to type CarouselPage by changing the XAML & CS as shown below. Notice that, like a TabbedPage it requires passingContentPage elements instead of content layouts.
<?xml version="1.0" encoding="UTF-8" ?>
<CarouselPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="#880000"
x:Class="WalkthroughCarousel.WalkthroughPage">
<ContentPage>
<StackLayout BackgroundColor="#888888"
HorizontalOptions="Center" VerticalOptions = "Center">
<Label Text = "One"/>
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout BackgroundColor="#888888"
HorizontalOptions="Center" VerticalOptions = "Center">
<Label Text = "Two"/>
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout BackgroundColor="#888888"
HorizontalOptions="Center" VerticalOptions = "Center">
<Label Text = "Three"/>
<Button Text = "Close" Clicked="OnButtonClicked"/>
</StackLayout>
</ContentPage>
</CarouselPage>
  • Subsequently, update the CSharp code behind to inherit from CarouselPage instead of ContentPage:
namespace WalkthroughCarousel
{
public partial class WalkthroughPage : CarouselPage
{
public WalkthroughPage()
{
InitializeComponent();
}
async void OnButtonClicked(object sender, EventArgs args)
{
await Navigation.PopModalAsync();
}
}
}
  • On the last page, you’ll likely want to quit out of the Walkthrough, so in the last page you can simply add a Button with a Clicked event handler Clicked="OnButtonClicked", and then close the walkthrough using await Navigation.PopModalAsync(); inside the function. Add some more design and you will have your own intro/tutorial page!
Nike walkthrough animation in Steven’s tutorial
  • As seen in this commit, you can go one step further and instead create separate classes WalkthroughStepOnePage, WalkthroughStepTwoPage, & WalkthroughStepThreePage, and reference them directly from the CarouselPage. This will improve abstraction and also allow you to do MainPage = new WalkthroughStepThreePage() in the App.xaml.cs, if your HotReload doesn’t work.
Javier’s Lottie Walkthrough Page

--

--

--

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing Presto as an ad-hoc SQL engine for RDR data

⛳️ที่ดินของระบบ USM (เวอร์ชั่นแรก)

Using JSON for Nginx log_format

Fire fighting, the Volatile playground

Meating with my product owner

Top Websites That you don’t know — Part 1

Lifetimes of references inside structures

Conquer The Command Line: The ls Command

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
The First Prototype

The First Prototype

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

More from Medium

How to use Flutter Firebase Authentication

How to Set Up Local Notifications in Flutter

App Localization in Flutter

Navigator overview in Flutter.

Post image