1

使用Visual Studio,在选择Xamarin -cross Platform解决方案的“ Zebble”时,将使用五页创建默认项目。我修改了第五页以实现签名板。下面是下面的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 组件,我该怎么做?

4

1 回答 1

0

要使用第三方组件,您需要做的就是围绕它创建一个 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="..." />
于 2017-04-18T09:37:21.873 回答