Learn Blazor Hybrid - Full Course for Beginners | Build cross-platform apps in C#

Let's start our journey together to build beautiful native cross-platform apps for iOS, Android, macOS, and Windows with Blazor Hybrid, .NET MAUI, C#, and Visual Studio! In this full workshop, I will walk you through everything you need to know about .NET MAUI and building your very first app. You will learn the basics including how to build user interfaces with Razor, how to show data from the internet, how to navigate between pages and combine .NET MAUI pages with Razor pages, access platform features like geolocation, and theme your app for light theme and dark theme. This course has everything you need to learn the basics and set you up for success when building apps with Blazor Hybrid!

Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.

Links:

Relevant Videos:

Chapters:
00:00:00 - Intro to the Blazor Hybrid Workshop
00:04:28 - What is Blazor Hybrid & How to Install
00:06:51 - First Blazor Hybrid App & Architecture
00:21:40 - Get Code to Build Your First Blazor Hybrid App
00:26:38 - Blazor Hybrid Project Walkthrough
00:39:22 - Start to Build First Blazor Hybrid App
01:03:10 - Event Handling, Data Binding and Parameters (Slides)
01:09:00 - Add Monkey Data & Fluent UI Blazor Components
01:32:08 - Navigation, NavigationManager, .NET MAUI Pages (Slides)
01:39:19 - Navigation with NavigationManager
01:52:39 - Navigation with NavLinks
01:57:21 - Add .NET MAUI Pages & Components
02:21:11 - Access Platform Functionality (Slides)
02:27:57 - Check Network Connectivity
02:38:04 - Get User Location with Geolocation
02:49:09 - Integration with Other Apps
02:57:42 - App Theming, Light Theme, Dark Theme (Slides)
03:05:36 - JavaScript Interoperability with IJSRuntime
03:20:48 - Theming FluentUI Blazor Components
03:26:05 - Style Status Bar with .NET MAUI Community Toolkit
03:39:00 - .NET MAUI Light & Dark Theme with AppThemeBinding
03:42:58 - Sharing State & Creating Reusable Components (Slides)
03:47:27 - Implement Shared State Blazor Hybrid & .NET MAUI
04:02:47 - Create Reusable Razor Components
04:08:31 - CONGRATULATIONS!

#blazorhybrid #blazor #dotnetmaui #dotnet #beginners #workshop #ios #android #windows

[carlossolis]

This is the kind of content that maui needs to become into a real dev option. Amazing example, a lot of thanks!!!

[josedonizeteoliveirajunior]

wow looking forward to watching it. I already have plans for this weekend 😊

[GuildOfCalamity]

Now if MS would just bring back the visual designer for WinUI my life would be complete.
They had it for UWP, not sure what's so hard about it... I realize it's meant to be x-plat, but you could show a generic control placeholder at a minimum.

[SKIDDOW]

There are two loading screens. Splash and Blazor Loading... There is no solution yet for it. It is awesome if we can replace blazor-ui loading with splash image too. Then user don't know that there are two loading screens 😀

I'm always using blazor-hybrid. Because it is easy to styling.

[davejarcher]

Fantastic Gerald! Will defintely be watching.

[Will-ioo]

Really appreciate this thank you. Just finished the MAUI workshop last week so this was perfect timing.

[mihaimyh]

Really useful course, will be really nice for a follow-up with authentication and authorization using blazor hybrid.

[richie]

This is amazing, quick easy walkthrough the power how MAUI and Blazor can work together!

[julienbarach]

Perfect, I'm done with Xaml and issues I can have on one platform and not the other. Was not sure Blazor Hybrid is really supported by MS.
Hope it's easy to add in an existing project.

[MauraSastre]

Está muuy bien explicado y me ha servido para tener una visión general. Gracias😀

[dan]

Thank you very much I needed to learn how blazor hybrid work for my bachalor thesis becaouse I write about it. So I was ready to starting to learn on my own but with this progrese will be much faster for building app.❤❤❤

[teriyakov]

At the start of the year, I started going down the route of creating a maui app with blazor hybrid. I quickly find that there was very little documentation on how to interact with native sensors, gesture recognition wasnt quite there and also how to work with many libraries that worked seamlessly out the box with xaml. I went back to xaml and made a lot of good progress.
I havent checked since if the documentation around maui hybrid apps (that have a heavy reliance on native sensors) have gotten better. In my opinion, this is the main reason why I would choose xamarin over blazor-hybrid when it comes to mobile apps. If you pretty much want a web app on mobile, this maui-hybrid is great. For something more device specific, not so much (in my opinion).
I hope this has changed.
That being said, thanks for putting your time into this video and everything else you do for the community!
It's very much appreciated.

[lukevincent]

Time to rock n' roll. Thanks Gerald!

[kaylahuber]

Can you add DevExpress to this project as well?

[nickamountaineer]

Gerald, one thing I'm unsure of (and sorry if you covered this), but is it common practice to have multiple BlazorWebViews in a single app? I know James has a video when each tabbed page is a new BlazorWebView, but are there any performance or memory concerns with that?

[dpc]

Hi Gerald, I haven't see the full video yet but I hope it has something about complex navigation. This is the main issue for me, as MAUI XAML developer. If I understand correctly, Blazor Hybrid works as SPA inside MAUI and there is no navigation stack. I would like to know how to go to previous pages (back button action) and keep their state (keep ViewModel state without recreating it).
I have seen various solution for Blazor but I would like to see something that is easy to understand for MAUI developers.

[santiagomartinez-crin]

This is amazing, thanks for sharing this with the community! I have a question regarding the navigation part: if I want the navigation to look like the native platform navigation, is it okay to display one ContentPage in .NET MAUI for each page in Blazor and navigate through them using the MAUI navigation service?

[MutazZ]

Thank you for this course, I am watching it though I am on a Linux machine. So I am left with the VS Code!

[mmeuwese]

I agree. Another layer on layer on layer with all kinds of various coding markup which makes it complex. Maui controls behave different per platform, curious how that goes with blazor.

Maui is misbehaving already a lot; now it is maui with blazor which sounds like even more ambiguous behavior.

[Ziomal]

Would anyone use this apart from Blazor developers? If somebody is new it's probably better to just use MAUI. I don't see the point in such stuff, it looks like a browser, feels like a browser, not an app.