如何替换Ze球SignaturePad UI组件或添加和使用其他SignaturePad组件？

Question

使用Visual，当选择“Cross Platform解决方案”时，将创建一个包含5页的默认项目。我修改了第五页以实现签名垫。下面是下面的Page-5.zbl代码。

 <?xml version="1.0"?>

<z-Component z-type="Page5" z-base="Templates.Default" z-namespace="UI.Pages"
    z-partial="true" Title="About us" data-TopMenu="MainMenu" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml">

  <z-place inside="Body">

    <TextView Text="Hello world!" />
    <SignaturePad Id="sigPad1" Enabled="true" LineThickness="4" Style.Border.Color="red" Style.Width="100" Style.Height="100"/>

  </z-place>

</z-Component>

最后将这一行添加到.zebble-generated.cs中。

    await Body.Add(sigPad1 = new SignaturePad { Id = "sigPad1", Enabled = true, LineThickness = 4 }
    .Set(x => x.Style.Border.Color = "red")
    .Set(x => x.Style.Width = 100)
    .Set(x => x.Style.Height = 100));

我一直在看这个SignaturePad组件包：https://github.com/xamarin/SignaturePad

如果我想使用Xamarian SignaturePad组件或其他任何人的SignaturePad组件，而不是Zebble组件，我将如何做到这一点？

Answer 1

要使用第三方组件，您所需要做的就是围绕它创建一个Zebble包装器。在这里解释：http://zebble.net/docs/customrenderedview-third-party-native-components-plugins

步骤1:创建本机适配器

您应该首先创建一个Ze球视图类来使用下面的模式来表示组件的实例。这个类将在共享项目中，对所有三个平台都可用。

namespace Zebble.Plugin
{
    partial class MyComponent : CustomRenderedView<MyComponentRenderer>
    {
         // TODO: Define properties, method, events, etc.
    }
}

注意:要使ZBL文件中的VS IntelliSense识别这一点，您还应该为MyComponent创建一个.ZBL文件：

<z-Component z-type="MyComponent" z-base="CustomRenderedView[MyComponentRenderer]" z-namespace="Zebble.Plugin"
    z-partial="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml" />

下一步是创建呈现器类。

步骤2:创建原生渲染器()--每个平台(UWP、iOS、Android)都需要创建以下类。

 public class MyComponentRenderer : ICustomRenderer
  {
        MyComponent View;
        TheNativeType Result;

        public object Render(object view)
        {
            View = (MyComponent)view;
            Result = new TheNativeType();
            // TODO: configure the properties, events, etc.
            return Result;
        }

        public void Dispose() => Result.Dispose();
}

在应用程序代码(App.UI)中使用它的应用程序代码，您可以像使用任何其他内置或自定义视图类型一样使用MyComponent。

<Zebble.Plugin.MyComponent Id="..." Property1="..." on-Event1="..." />