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

• You can get some design inspiration from Xamarin design guru Steven’s tutorial, this Lottie-filled intro Xamarin repository by hardest work develop Javier, this Figma design that you can duplicate and edit for FREE!
• If you have any questions email me, or if you like my work and want more content, follow me here. The First Prototype is a mobile app development shop specializing in Xamarin!