Blazor Hybrid
Blazor Hybrid enables you to host Blazor components in native desktop or mobile applications. This allows you to share code and UI logic between web and native platforms, leveraging your existing Blazor skills for cross-platform development.
What is Blazor Hybrid?
Blazor Hybrid apps run on .NET, but instead of a web browser rendering the UI, Blazor components are hosted within a native app using a WebView2 control (on Windows) or a similar web view component on other platforms. This provides a native look and feel while still using web technologies for UI development.
Key Benefits
- Code Sharing: Share Blazor components, C# business logic, and NuGet packages between web, desktop, and mobile apps.
- Native Performance: Access native device capabilities and APIs directly from your Blazor components.
- Familiar Development Model: Use your existing Blazor and C# knowledge.
- Cross-Platform: Target Windows, macOS, iOS, and Android from a single codebase.
Supported Platforms
Blazor Hybrid is supported on the following platforms:
- Windows (.NET MAUI, WPF, Windows Forms)
- macOS (.NET MAUI)
- iOS (.NET MAUI)
- Android (.NET MAUI)
Getting Started
To create a Blazor Hybrid application, you'll typically use .NET MAUI. Here's a simplified overview:
- Create a .NET MAUI App: Use the .NET CLI or Visual Studio to create a new .NET MAUI Blazor app.
- Add Blazor Components: Build your UI using Blazor components (
.razorfiles) in theComponents/Pagesfolder. - Run your App: Deploy and run your application on your target platform.
Example Project Creation (.NET CLI):
dotnet new maui-blazor -o MyBlazorHybridApp
cd MyBlazorHybridApp
dotnet build
dotnet run
Hosting Models
Blazor Hybrid supports two main hosting models:
WebView2(Windows): Utilizes the Microsoft Edge WebView2 control to render Blazor components.WebView(macOS, iOS, Android): Uses the native web view components provided by each platform, often managed through .NET MAUI.
Interacting with Native APIs
Blazor Hybrid makes it easy to call native platform APIs. You can use dependency injection to inject platform-specific services provided by the hosting framework (like .NET MAUI) into your Blazor components.
Tip: Use the IConnectivity service in .NET MAUI to check network status from your Blazor components.
Common Scenarios
- Building cross-platform desktop applications with shared web UI.
- Creating mobile apps with native performance and web UI.
- Migrating existing Blazor web applications to desktop or mobile.