Question

使用Visual Studio，在选择'Zebble for Xamarin - 跨平台解决方案'时，将创建一个包含五个页面的默认项目。我修改了第五页以实现签名板。以下是$(document).on('click', '#leftArrow', function() { slider(-1); }); $(document).on('click', '#rightArrow', function() { slider(-1); });代码。

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

我一直在关注这个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视图类以表示组件的实例。该课程将在共享项目中，适用于所有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" />

下一步是创建渲染器类。

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

如何更换Zebble SignaturePad UI组件或添加和使用其他SignaturePad组件？

1 个答案: