First Steps with Blazor Hybrid
The WebView feature available since .NET 6.0 allows you to embed Blazor components in native MAUI, WPF, and WinForms apps.
This article provides details on how to setup the apps to use the Telerik UI for Blazor components.
Explore the Blazor Hybrid Sample Apps—Blazor Web Apps running in WinForms, WPF, and MAUI.
Prerequisites
Before adding the Telerik UI for Blazor components, ensure that the corresponding technology stack is set up and the basic Blazor Hybrid WebView runs as expected in this stack.
Install the latest version of .NET 6.0. It requires Visual Studio 2022 Preview for Windows or Mac.
Install WebView.
Make sure you have the necessary bits to work with WinForms, WPF, or .NET MAUI apps. For the MAUI installation, follow the instructions in the official documentation.
Adding the UI for Blazor Components
The process for adding Telerik UI for Blazor to a WinForms, WPF, or MAUI app is similar to including the components in a native Blazor app and involves the six steps listed below.
1. Get the Telerik UI for Blazor Package
To use the UI for Blazor components, install the Telerik.UI.for.Blazor package and include its reference in the .csproj file of the app. Read more on where to get the Telerik.UI.for.Blazor package...
2. Add the Telerik Client Assets
To have the Telerik Blazor components look and behave as expected, you need the Telerik CSS and JavaScript assets. Include the assets inside the <head> of the wwwroot/index.html file.
You can add the Telerik resources as static assets.
3. Include @using Statements
You can set the project to recognize all Telerik components without explicit @using statements in every .razor file. To achieve this, add the code below to your ~/_Imports.razor file. You can register one or both icon namespaces depending on the icon type you will be using.
_Imports.razor
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons
4. Add the TelerikRootComponent
Use a single TelerikRootComponent component as a top-level component in the app and make sure it wraps all content. At the time of writing, custom layouts are not supported, so you can add it to:
-
Shared/MainLayout.razorfor MAUI apps -
Main.razorfor WPF and WinForms apps
Make sure that the TelerikRootComponent matches the web view viewport and remove the default margin of the <body> HTML element.
Once custom layouts are supported, you will be able to configure a Telerik layout in the same way as with regular Blazor web apps (check Common Configuration).
5. Register the Telerik Services
The next step is to register the Telerik services. Add the Telerik services in accordance to the practice your native app requires.
For example, in a MAUI app, you register the services in MauiProgram.cs:
namespace MyBlazorMauiAppName
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
builder.Services.AddMauiBlazorWebView();
// register the Telerik services
builder.Services.AddTelerikBlazor();
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif
builder.Services.AddSingleton<WeatherForecastService>();
return builder.Build();
}
}
}
5. Add the UI for Blazor Components
Add your desired Telerik Blazor components in the app as in a native Blazor app. Explore the available UI for Blazor components and their features in our live demos.
Running the Blazor Hybrid App
You can now run the hybrid application in debug mode, but it's recommended to be aware of possible caveats during deployment and prevent them upfront.
Refer to the following articles for more information on each technology stack: