|
| 1 | +--- |
| 2 | +title: UI for Blazor in Hybrid Apps |
| 3 | +page_title: UI for Blazor in Hybrid Apps |
| 4 | +description: Explore how to use Telerik UI for Blazor in native MAUI, WPF and WinForms apps. |
| 5 | +slug: hybrid-blazor-apps |
| 6 | +tags: hybrid,blazor,apps,telerik ui,maui,wpf,winforms |
| 7 | +published: true |
| 8 | +position: 270 |
| 9 | +--- |
| 10 | + |
| 11 | +# UI for Blazor in Hybrid Apps |
| 12 | + |
| 13 | +The [WebView](https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-preview-3/#blazorwebview-controls-for-wpf-windows-forms) feature available since .NET 6.0 allows you to embed Blazor components in native MAUI, WPF and WinForms apps. |
| 14 | + |
| 15 | +This article provides details on how to setup the apps to use the Telerik UI for Blazor components. |
| 16 | + |
| 17 | +>tip Explore the [Hybrid Blazor Apps (Blazor Web apps running in WinForms, WPF, MAUI)](https://github.com/telerik/blazor-ui/tree/master/common/hybrid-blazor-apps) sample app. |
| 18 | +
|
| 19 | + |
| 20 | +>caption In this article: |
| 21 | +
|
| 22 | +* [Prerequisites](#prerequisites) |
| 23 | +* [Add the UI for Blazor components](#add-the-ui-for-blazor-components) |
| 24 | +* [Run the apps](#run-the-apps) |
| 25 | +* [Notes](#notes) |
| 26 | + |
| 27 | + |
| 28 | +## Prerequisites |
| 29 | + |
| 30 | +Prior to adding the Telerik components, ensure the corresponding technology stack is setup and the basic Hybrid Blazor WebView runs as expected in it. |
| 31 | + |
| 32 | + |
| 33 | +1. Install the latest version of [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0). It requires [Visual Studio 2022 Preview for Windows](https://visualstudio.microsoft.com/vs/preview/) or for [Mac](https://docs.microsoft.com/en-us/visualstudio/releasenotes/vs2019-mac-preview-relnotes). |
| 34 | + |
| 35 | +1. Install [WebView](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/webview). |
| 36 | + |
| 37 | +1. Make sure you have the necessary bits to work with WinForms/WPF/MAUI apps. For MAUI installation, follow the instructions in the [official documentation](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android). |
| 38 | + |
| 39 | +## Add the UI for Blazor components |
| 40 | + |
| 41 | +The process for adding Telerik UI for Blazor in the WinForms/WPF/MAUI app is similar to including the components in a native Blazor app. |
| 42 | + |
| 43 | +#### 1. Get the `Telerik UI for Blazor` package |
| 44 | + |
| 45 | +To use the UI for Blazor components you need to 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...]({%slug getting-started/what-you-need%}#get-the-telerik-packages) |
| 46 | + |
| 47 | +#### 2. Add the Telerik client assets |
| 48 | + |
| 49 | +To have the Telerik Blazor components look and behave as expected, you need the Telerik [CSS and JavaScript assets]({%slug getting-started/what-you-need%}#client-assets). Include the assets inside the `<head>` of the `wwwroot/index.html` file. |
| 50 | + |
| 51 | +You may add the Telerik resources as [static assets]({%slug getting-started/what-you-need%}#static-assets) or reference them from a [cloud CDN]({%slug getting-started/what-you-need%}#cdn). |
| 52 | + |
| 53 | +#### 3. Include `@using` statements |
| 54 | + |
| 55 | +You can set the project to recognize all Telerik components without explicit `@using `statements on every `.razor` file. To achieve this, add the following to your `~/_Imports.razor`file: |
| 56 | + |
| 57 | +```` |
| 58 | +@using Telerik.Blazor |
| 59 | +@using Telerik.Blazor.Components |
| 60 | +@using Telerik.Blazor.Services |
| 61 | +```` |
| 62 | + |
| 63 | +#### 4. Add the `TelerikRootComponent` |
| 64 | + |
| 65 | +You must add a `TelerikRootComponent` component as a top-level component in the app to make sure it wraps all the content. At the time of writing, custom layouts are not supported, so you can add it to the: |
| 66 | + |
| 67 | +* `Shared/MainLayout.razor` for MAUI apps |
| 68 | +* `Main.razor` for WPF and WinForms apps |
| 69 | + |
| 70 | +Make sure that the `TelerikRootComponent` matches the webview viewport. Remove the default margin of the `<body>` HTML element. |
| 71 | + |
| 72 | +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]({%slug getting-started/what-you-need%}#common-configuration)). |
| 73 | + |
| 74 | +#### 5. Add the UI for Blazor components |
| 75 | + |
| 76 | +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](https://demos.telerik.com/blazor-ui). |
| 77 | + |
| 78 | + |
| 79 | +## Run the apps |
| 80 | + |
| 81 | +You can now run the hybrid application. Refer to the following resources for each technology stack: |
| 82 | + |
| 83 | +* [MAUI](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android) |
| 84 | +* [WinForms](https://docs.microsoft.com/en-us/visualstudio/ide/create-csharp-winform-visual-studio?view=vs-2022#run-the-application) |
| 85 | +* [WPF](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-6.0#run-the-app) |
| 86 | + |
| 87 | + |
| 88 | +## Notes |
| 89 | + |
| 90 | +* There is no debugging protocol exposed for the webview, so inspecting content and debugging is difficult. |
| 91 | +* The Blazor web app code cannot make calls to native APIs. This feature is yet to be exposed by the framework. At the moment, you have to write your own calls to services and native app code that you need to explicitly expose. |
| 92 | +* The WebView is not on the [list of officially supported browsers by Telerik UI for Blazor]({%slug browser-support%}). It has its specifics and differences from a standalone browser. The hybrid Blazor app integration should be considered a proof-of-concept for the time being. We will monitor the framework maturity and consider adding the webview to the list of supported environments. |
| 93 | + |
| 94 | +>caption Known issues: |
| 95 | +
|
| 96 | +* Running MAUI apps may require [developer mode to be enabled](https://stackoverflow.com/questions/36324300/ensure-that-target-device-has-developer-mode-enabled-could-not-obtain-a-develop). |
| 97 | +* You can’t currently run the app for [iOS or Mac Catalyst from a Windows development environment](https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-preview-4/#ios-and-mac-catalyst). |
0 commit comments