如何使用 Xamarin 表单创建功能发现

Question

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

例如anydesk app中的教程页面↓

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

我应该使用什么术语或关键字在 Google 上找到有关此内容的示例，例如“入职页面”？

更新

我有tried 在android 上添加这个feature，它工作正常

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

Answer 1

您可以通过简单的方法实现此效果。
使用 2 个布局，第一个是原始视图，另一个
嵌套在第一个布局中（Opacity

.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

在共享项目中

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();
    }

在 Android 项目中

1- 仅将此library 添加到 android 项目中

2- 创建 MainActivity 类的新实例

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();
        }
    }
}

在 Ios 项目中...Todo

The Result on Android

更多信息

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