如何替换 Zebble SignaturePad UI 组件或添加并使用另一个 SignaturePad 组件？

Question

Using Visual Studio, when selecting 'Zebble for Xamarin - Cross Platform Solution' a default project will be created with five pages.我修改了第五页以实现签名板。下面是以下 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 SignaturePad UI 组件，我该怎么做？

Answer 1

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

步骤 1：创建本机适配器

您应该首先使用以下模式创建一个 Zebble 视图 class 来表示您的组件的一个实例。此 class 将在共享项目中，可用于所有 3 个平台。

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" />

下一步将是创建渲染器 classes。

第 2 步：创建本机渲染器 您需要为每个平台（UWP、iOS、Android）创建以下 class。

 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="..." />

如何替换 Zebble SignaturePad UI 组件或添加并使用另一个 SignaturePad 组件？

How to replace the Zebble SignaturePad UI Component or add and use another SignaturePad component?

xamarin-zebble

zebble