Share via

Custom components

  • Article

Important

This project is an experimental release. We hope you try out Experimental Mobile Blazor Bindings and provide feedback at https://github.com/xamarin/MobileBlazorBindings.

You can write reusable custom components either using Blazor components or by wrapping existing Xamarin.Forms components.

Blazor components

You can create a reusable Blazor component by writing a .razor file just like you would in an application. The component can be shipped as a NuGet package so that it is easily reusable in other projects.

To learn more about component libraries, check out the ASP.NET Core Razor components class libraries.

More details coming soon!

Wrapping Xamarin.Forms components

To make a Xamarin.Forms element available in Blazor markup you need to implement two types of classes:

  1. A component representing the markup that the developer will use in the .razor file. This type will need to derive from NativeControlComponentBase or one of its derived classes.
  2. An element handler representing the UI component that will be created when the component is used. This type will either implement the IXamarinFormsElementHandler interface or derive from one of the existing handler types that implement the interface.

An example that shows how to wrap the popular PancakeView component is available here.

The component uses a static constructor to register the component mapping to the element handler, as seen here.