如何使用 Xamarin Forms 创建功能发现

Question

我想在启动应用程序后创建一个教程页面，让用户大致了解应用程序中的功能以及如何使用它。

例如anydesk app

中的教程页面↓

那么，如何使用XF创建这个页面？

我应该使用什么术语或关键词在 google 上找到关于此的示例，例如“入职页面”？

更新

我在 android 上有 to add this feature，它工作正常

现在的问题是如何在 Ios 上做到这一点？

Answer 1

您可以通过简单的方法实现这种效果。
使用 2 个布局，第一个是原始视图，另一个
嵌套在第一个布局内（Opacity < 1）是教程页面。

.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

阅读了很多资源后，我最终使用了 Custom Renderers

In the Shared Project

1-Create一个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- Consuming 来自 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- 仅将此 library 添加到 android 项目

2- 创建 MainActivity 的新实例 Class

public static MainActivity Instance { get; private set; }

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

3- Create 控件的自定义渲染器。

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

了解更多信息

如何使用 Xamarin Forms 创建功能发现

How To Create Feature Discovery Using Xamarin Forms

c#

xamarin.ios

xamarin.android

xamarin.forms

feature-discovery

更新

The Result on Android