Как создать обнаружение функций с помощью Xamarin Forms

Question

Я хочу создать обучающую страницу после запуска приложения, чтобы дать пользователю обзор функций в приложении и того, как его использовать.

Например, обучающая страница ↓ в приложении anydesk

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 попробовал добавить эту функцию на android, и она работает нормально

Теперь вопрос Как это сделать на Ios?

Answer 1

Прочитав множество ресурсов, я в итоге использовал Custom Renderers

в общем проекте

1- Создание настраиваемого элемента управления Xamarin.Forms.

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- Использование настраиваемого элемента управления из 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();
    }

В Android Project

1- Добавьте эту библиотеку только в android проект

2- Создайте новый экземпляр класса MainActivity

public static MainActivity Instance { get; private set; }

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

3- Создайте настраиваемое средство визуализации для элемента управления.

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

Результат на Android

Для получения дополнительной информации

1. Для Android
2. Для IOS
3. KeepSafe / TapTargetView Github
4. Пользовательские средства визуализации Xamarin.Forms

Answer 2

Вы можете добиться этого эффекта простым подходом. Используйте 2 макета, первый - исходный вид, а второй - внутри первого макета (с Opacity <1) вложена обучающая страница. </p>

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