Updated June 2026

Build Cross-Platform Apps with .NET MAUI and Blazor Hybrid

Class Duration

35 hours of live training delivered over 5 days.

Student Prerequisites

Professional C# programming experience
Working knowledge of Blazor and Razor components (see Build .NET 10 Web Apps with Blazor)
Basic HTML and CSS
No prior mobile or XAML experience required

Target Audience

Blazor and web developers who need to ship native mobile and desktop apps without learning XAML or native UI toolkits. Ideal for teams with existing Blazor web applications who want to reach iOS, Android, Windows, and Mac by reusing their Razor components, design systems, and C# skills - sharing one UI codebase across native apps and the web. This is the web-UI counterpart to our XAML-based Build Cross-Platform Apps with .NET MAUI course.

Description

Blazor Hybrid lets you put the Razor components you already have inside a native app: your UI runs in a BlazorWebView with full access to .NET APIs and the device, no WebAssembly limitations and no separate mobile codebase. This five-day course takes Blazor developers from zero mobile experience to store-ready hybrid apps on .NET 10, targeting Android 16 and iOS 26. It starts with how Blazor Hybrid actually works (BlazorWebView internals and the MAUI single-project model), then goes deep on sharing one set of Razor components across Android, iOS, Windows, Mac, and the web with the Blazor Hybrid and Web App solution template. From there the course covers routing and navigation inside a native shell, forms and validation, state management, platform integration with correct permission handling, maps, offline-first data with SQLite, and authentication with MSAL across native and web targets. The final day completes the production picture: JavaScript interop and HybridWebView messaging, accessibility and localization, testing with bUnit and on devices, performance tuning, observability with Aspire and OpenTelemetry, and packaging, distribution, and CI/CD for every platform.

Learning Outcomes

Explain how Blazor Hybrid renders Razor components in a native app, including BlazorWebView internals, and how it compares to Blazor Server, WebAssembly, and XAML MAUI.
Share one set of Razor components across iOS, Android, Windows, Mac, and the web using the Blazor Hybrid and Web App solution template, organized in Razor class libraries with per-target rendering and CSS that works in both hosts.
Structure routing, layouts, navigation, and deep links inside a native app, and build forms with validation that behave consistently across native and web targets.
Manage application state across components, services, and the hybrid boundary.
Call platform APIs (geolocation, sensors, camera and media with .NET 10 multi-select and compression) from Razor components via dependency injection with correct permission handling, and embed map and location experiences in hybrid UI.
Implement offline-first local data with SQLite, Preferences, SecureStorage, and sync patterns, consume REST APIs resiliently, and authenticate users with MSAL.
Apply JavaScript interop where appropriate, use HybridWebView with bidirectional messaging, and make hybrid UI accessible and localized.
Test with bUnit and on devices, tune WebView performance, wire up telemetry with Aspire service defaults and OpenTelemetry, and package and distribute to Android 16 and iOS 26 with CI/CD for every target.

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

Software Requirements

.NET 10 SDK, Visual Studio 2026 (Windows) or VS Code with the .NET MAUI extension (Windows or Mac), Android SDK with an emulator, and Git. A Mac with Xcode is required only for the iOS build/deployment labs; all other labs run on Windows or Mac.

Training Topics

Project Setup and Tooling

Installing .NET 10 and the MAUI workloads on Windows and Mac
Visual Studio 2026 vs. VS Code with the .NET MAUI extension
The dotnet CLI workflow: creating, building, and running per target
Android emulators, iOS simulators, and physical devices
Hot reload across Razor, C#, and CSS
Targeting Android 16 and iOS 26: SDK levels and minimum versions

The Hybrid Model in Depth

Razor components in a BlazorWebView: .NET running natively, UI rendering in a WebView
Blazor Hybrid vs. Blazor Server vs. WebAssembly vs. XAML MAUI: choosing per app
The MAUI single-project model: resources, fonts, images, and per-platform code
MauiProgram, dependency injection, and app lifecycle events
What native hosting buys you: full .NET APIs, no connection, no WASM limits

BlazorWebView Internals

The host page, static web assets, and the virtual host
Root components and where Blazor attaches
The platform WebViews underneath: WebView2, WKWebView, and Android WebView
WebView request interception in .NET 10
Startup sequence and debugging the boundary

Razor Component Fundamentals Refresher

Component parameters, EventCallback, and two-way binding
Component lifecycle and async initialization
Cascading values and parameters
RenderFragment and templated components
Injecting services into components

The Blazor Hybrid and Web App Template in Depth

One solution, five targets: Android, iOS, Windows, Mac, and the web
How the template wires shared UI to the MAUI host and the Blazor Web App host
Project layout, references, and where each kind of code belongs
Service registration per host: same interface, different implementation
Keeping the web and native targets honest as the app grows

Razor class libraries for shared components and static assets
What to share and what to keep per-target
Abstractions for host-specific capabilities
Design systems and component libraries in shared UI
Versioning and evolving a shared UI library across teams

Per-Target Rendering and Render Modes

Render modes on the web target; always-interactive in the native host
Detecting the platform and form factor from components
Device-specific UI: adaptive components vs. divergent components
Conditional service implementations per target
Avoiding target-specific leakage in shared components

CSS Strategies for Native and Web Hosts

CSS isolation in shared components
Responsive design inside a native window: viewport units, safe areas, and notches
Platform look-and-feel: one design vs. adaptive styling
Dark mode across WebView and web hosts
Managing design tokens and shared stylesheets

Blazor routing inside a native app
Layouts, nested layouts, and navigation state
Deep linking into hybrid app pages
Mixing Blazor navigation with native navigation when needed
Back-button behavior on Android and navigation history

Forms and Validation in Hybrid Apps

EditForm, input components, and form models
Data annotations and custom validators
Validation messages and summary styling across hosts
Touch-friendly form UX: keyboards, focus, and scrolling
Submitting to local services vs. remote APIs

State Management in Depth

Component state vs. app state: where each belongs
Scoped state containers and DI lifetimes in the hybrid host
State across the hybrid boundary: native events updating Razor UI
Persisting state across app suspend and resume
Choosing between simple containers, observable patterns, and Flux-style stores

Platform Integration from Razor Components

Injecting platform services into components through interfaces
Geolocation, sensors, connectivity, battery, share, and clipboard
The permission model on Android 16 and iOS 26: requesting, checking, degrading gracefully
File system access and file pickers across platforms
Keeping platform calls out of components: thin services, clean seams

Camera and Media in Hybrid Apps

Camera and MediaPicker from Razor components
.NET 10 multi-select and built-in image compression
Displaying captured media in WebView-hosted UI
Handling large media: resizing, caching, and memory pressure
Privacy manifest entries for camera and library access

Maps and Location in Hybrid UI

Embedding map experiences in hybrid apps: JS map libraries vs. native map views
Geolocation and geocoding from components
Foreground location patterns and permission flows
Offline considerations for location-aware apps

Local Data and Offline Sync

SQLite for structured local data; Preferences and SecureStorage
Repository patterns that serve both native and web targets
Offline-first design: local writes, background sync, queued operations
Conflict detection and resolution strategies
Connectivity-aware behavior: detecting, reacting, retrying

Remote Services and Authentication

HttpClient with IHttpClientFactory and typed clients
Resilience: retries, timeouts, circuit breakers, connectivity awareness
Authentication with MSAL across native and web targets
Token storage and session handling in hybrid apps
System.Text.Json with source-generated serializers

JS Interop and HybridWebView

JavaScript interop: when you need it and how to keep it contained
Calling JS from .NET and .NET from JS in the hybrid host
HybridWebView: embedding existing web apps and bidirectional messaging
Designing message contracts between web content and .NET
WebView request interception for asset and API control

Accessibility and Localization

Web accessibility inside a native app: semantics, roles, and labels
TalkBack and VoiceOver behavior with WebView-hosted UI
Focus management, touch targets, and contrast
Localization with resource files and culture-aware formatting
Right-to-left layouts across native and web hosts

Testing, Performance, and Observability

A testing strategy for hybrid apps: components, services, devices
Testing Razor components with bUnit
Device and emulator validation; automated UI testing
WebView performance: startup, asset loading, and memory
Aspire service defaults: OpenTelemetry metrics, tracing, and service discovery
Connecting client telemetry to your backend's observability story

Packaging, Distribution, and CI/CD

Android: signing, AAB packaging, and Google Play distribution targeting Android 16
iOS: provisioning, certificates, and App Store distribution targeting iOS 26
Windows packaging and Mac Catalyst distribution
Shipping the web target alongside the native apps
Enterprise distribution channels
CI/CD pipelines that build, sign, and publish all targets