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

Question

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?

Answer 1

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