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

Using Visual Studio, when selecting 'Zebble for Xamarin - Cross Platform Solution' a default project will be created with five pages. I've modified the fifth page to implement a signature pad. Below is the following Page-5.zbl code.

 <?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>

Which ends up adding this line to .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));

I have been looking at this SignaturePad component package: https://github.com/xamarin/SignaturePad

If I wanted to use the Xamarian SignaturePad component or anyone else's SignaturePad component instead of the Zebble SignaturePad UI component, how would I do that?

Solution

To use a third party component, all you need to do is to create a Zebble wrapper around it. It's explained here: http://zebble.net/docs/customrenderedview-third-party-native-components-plugins

Step 1: Creating Native Adapter(s)

You should first create a Zebble view class to represent an instance of your component using the following pattern. This class will be in the Shared project, available to all 3 platforms.

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

Note: To make the VS IntelliSense in ZBL files recognize this, you should create a .ZBL file for MyComponent as well:

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

The next step will be to create the renderer classes.

Step 2: Creating Native Renderers(s) You need to create the following class each platform (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();
}

Using it in the application code In the application code (App.UI) you can use MyComponent just like any other built-in or custom view type.

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