How To Create Feature Discovery Using Xamarin Forms

Question

I want to create a tutorial page after launching the app to give the user an overview of the features in the application and how to use it.

For example the tutorial page ↓ in anydesk app

So, How to create this page using XF?

What is the term or key should i use to find examples about this on google such as "Onboarding Pages"?

Update

I have tried to add this feature on android and it's working fine

Now The question is How to do that on Ios?

Answer 1

You can achieve this effect with a simple approach.
Use 2 layouts the first is the original view and the other,
nested inside the first layout (with Opacity < 1) is the tutorial page.

.XAML:

    <ContentPage.Content>

      
        <!--THIS IS THE LAYOUT FROM BEHIND-->
        <AbsoluteLayout x:Name="mainLayout">
          
            <!--Controls...-->

          
            <!--THIS CAN BE THE TUTORIAL PAGE, SEE THE OPACITY-->
            <AbsoluteLayout x:Name="tutorialLayout" IsVisible="true" 
            AbsoluteLayout.LayoutBounds="0, 0, [total width], [total height]" Opacity="0.8">
                        <!--Controls...-->
            </AbsoluteLayout>

        </AbsoluteLayout>


    </ContentPage.Content>  

Answer 2

After reading many resources, I ended up using Custom Renderers

In the Shared Project

1- Create a Xamarin.Forms custom control.

public class FeatureDiscoveryTarget : View
{
    public Element Target { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

public class FeatureDiscoverySequence : View
{
    public IList<FeatureDiscoveryTarget> Targets { get; }
    public Action ShowAction { get; set; }
    public FeatureDiscoverySequence()
    {
        Targets = new List<FeatureDiscoveryTarget>();
    }
    public void ShowFeatures()
    {
        ShowAction?.Invoke();
    }
}

2- Consuming the Custom Control from Xamarin.Forms.

.XAML

<StackLayout Orientation="Vertical" Padding="3">
  
    <Button x:Name="BtnTest" Text="Test Feature Discovery" Clicked="Button_Clicked"/>

    <Button x:Name="Btn1" Text="Feature 1"  HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
    
    <StackLayout Orientation="Horizontal" >
        <Button x:Name="Btn2" Text="Feature 2"  />
        <Button x:Name="Btn3" Text="Feature 3" HorizontalOptions="EndAndExpand"  />
    </StackLayout>
   
    <Button x:Name="Btn4" Text="Feature 4" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  />

    <local:FeatureDiscoverySequence x:Name="TapTargetSequence">
        <local:FeatureDiscoverySequence.Targets>
            <local:FeatureDiscoveryTarget Target="{x:Reference Name=Btn1}" Title="Feature 1" Description="Details.... " />
            <local:FeatureDiscoveryTarget Target="{x:Reference Name=Btn2}" Title="Feature 2" Description="Details.... " />
            <local:FeatureDiscoveryTarget Target="{x:Reference Name=Btn3}" Title="Feature 3" Description="Details.... " />
            <local:FeatureDiscoveryTarget Target="{x:Reference Name=Btn4}" Title="Feature 4" Description="Details.... " />
        </local:FeatureDiscoverySequence.Targets>
    </local:FeatureDiscoverySequence>

</StackLayout>

.Cs

private void Button_Clicked(object sender, EventArgs e)
    {
        TapTargetSequence.ShowFeatures();
    }

In Android Project

1- Add this library to android project only

2- Create a new instance of MainActivity Class

public static MainActivity Instance { get; private set; }

protected override void OnCreate(Bundle savedInstanceState)
 {
     // ... 
     LoadApplication(new App());
     Instance = this;
 }

3- Create the custom renderer for the control.

using System;
using Xamarin.Forms;
using Android.Views;
using Android.Widget;
using Android.Content;
using View = Android.Views.View;
using System.Collections.Generic;
using Com.Getkeepsafe.Taptargetview;
using Xamarin.Forms.Platform.Android;
using Color = Android.Resource.Color;

[assembly: ExportRenderer(typeof(FeatureDiscoverySequence), typeof(SequenceRenderer))]

namespace YourNameSpace.Droid
{
    class SequenceRenderer : Xamarin.Forms.Platform.Android.AppCompat.ViewRenderer<FeatureDiscoverySequence, View>
    {
        public SequenceRenderer(Context context) : base(context) { }
        protected override void OnElementChanged(ElementChangedEventArgs<FeatureDiscoverySequence> e)
        {
            base.OnElementChanged(e);
            e.NewElement.ShowAction = new Action(ShowFeatures);
        }
        private void ShowFeatures()
        {
            var targets = new List<Com.Getkeepsafe.Taptargetview.TapTarget>();
            foreach (var target in Element.Targets)
            {
                var formsView = target.Target;
                string title = target.Title;
                string description = target.Description;

                var renderer = Platform.GetRenderer((Xamarin.Forms.View) formsView);

                var property = renderer?.GetType().GetProperty("Control");

                var targetView = (property != null) ? (View) property.GetValue(renderer) : renderer?.View;

                if (targetView != null)
                {
                    targets.Add
                    (
                        TapTarget
                            .ForView(targetView, title, description)
                            .DescriptionTextColor(Color.White)
                            .DimColor(Color.HoloBlueLight)
                            .TitleTextColor(Color.Black)
                            .TransparentTarget(true)
                            .TargetRadius(75)
                    );
                }
            }
            new TapTargetSequence(MainActivity.Instance).Targets(targets).Start();
        }
    }
}

In Ios Project ...Todo

The Result on Android

For More Information

1. For Android
2. For IOS
3. KeepSafe/TapTargetView Github
4. Xamarin.Forms Custom Renderers