Custom components
You can write reusable custom components either using Blazor components or by wrapping existing MAUI 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.
Wrapping MAUI components
To make a MAUI element available in Blazor markup you can use ComponentGenerator tool. First, you need to install it:
dotnet tool install --global BlazorBindings.Maui.ComponentGenerator
You can specify which controls to process by adding assembly attributes to your project. Create a file /Properties/GenerateComponentAttributes.cs
(or any other .cs file), and put GenerateComponent assembly attributes there. For example, here how you can add an attribute to generate component for CommunityToolkit's DrawingView:
using BlazorBindings.Maui.ComponentGenerator;
[assembly: GenerateComponent(typeof(CommunityToolkit.Maui.Views.DrawingView))]
Now, you need to run the generator tool in the project folder:
dotnet generate-maui-blazor-components
Generator configuration
You can customize the generation by setting the attribute's parameters:
Exclude
Exclude members from generation (either because the generated member is incorrect, or because if conflicts with other members).
[assembly: GenerateComponent(typeof(ToggleSwitch),
Exclude = new[] { nameof(ToggleSwitch.Toggled) }]
PropertyChangedEvents
EventCallback
properties are usually generated based on control's events. However, if your control has some properties with two-way binding, you can force generation explicitly:
[assembly: GenerateComponent(typeof(ToggleSwitch),
PropertyChangedEvents = new[] { nameof(ToggleSwitch.IsOn) })]
GenericProperties
If your control has some non-generic properties (e.g. object
or IEnumerable
), you can make them generic (e.g. T
or IEnumerable<T>
) in the generated component (the component itself will be generated as generic as well). It can also be applied to templates as well (template property will have RenderFragment<T>
type).
[assembly: GenerateComponent(typeof(Sharpnado.CollectionView.CollectionView),
GenericProperties = new[] { nameof(Sharpnado.CollectionView.CollectionView.ItemsSource) })]
In case you want to have it with a certian generic argument (e.g. RenderFragment<MenuItem>
), you can specify the type after a colon (you'll need to specify full type name).
[assembly: GenerateComponent(typeof(CalendarView),
GenericProperties = new[] {
$"{nameof(CalendarView.DayNameTemplate)}:XCalendar.Core.Interfaces.ICalendarDay",
$"{nameof(CalendarView.DayTemplate)}:XCalendar.Core.Interfaces.ICalendarDay",
})]
Sample
You take a look at a sample project with generated components for AlohaKit
and CommunityToolkit
libraries.