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

[@jfversluis]

Looking to hone your .NET MAUI skills too? Have a look at this full crash course to build the same Monkey Finder app but now with .NET MAUI: kzbin.info/www/bejne/o5i6Z6usns6lh80

[@carlossolis9815]

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

[@jfversluis]

🥰 thank you!

[@richie12200]

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

[@jfversluis]

Glad you like it, thank you!

[@josedonizeteoliveirajunior1744]

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

[@jfversluis]

Hope you enjoy it!

[@The.WorldVentures]

Gerald, Thank you so much for providing such a great starting point. I am adapting to the new template in .Net 9 and adding web functionality as I build a restaurant application, hopefully i share the finished product when i am done.

[@jfversluis]

Please do!

[@Will-i7o5o]

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

[@jfversluis]

Oh that is perfect! Let me know how it goes, enjoy!

[@mihaimyh]

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

[@jfversluis]

Should be coming! Thanks for watching!

[@ImranKhan-nc7wp]

By far, this course is the best one.

[@jfversluis]

Appreciate that, thank you so much!

[@davejarcher]

Fantastic Gerald! Will defintely be watching.

[@davejarcher]

Would be great to do a section of deployment - I know you have some seperate videos on this but I note the options in Visual Studio 2022 have changed. And it would be nice to use the GUI rather than command line :) :)

[@jfversluis]

Great suggestion! I'll see if I can make an update!

[@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.

[@jfversluis]

Unfortunately that will be hard as the splash screen is something native, so the only thing you can do to kind of give the impression it’s all the same is implement something for Blazor Hybrid and then make the native one the same that seemingly transitions into the Blazor one so it looks like one and the same. But a better solution for this would indeed be great!

[@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.

[@jfversluis]

So this is actually interesting. The reason there might not be a lot of documentation is because working with the native sensors is no different than doing it in XAML or with .NET MAUI. You can use the exact same code to do both, but apparently we don't do a great job ad advertising that? Anything you can do with the device can be done just as well with Blazor Hybrid. You only replace the UI part mostly. And if thats not enough, you can mix in XAML pages and .NET MAUI components in there too, which is part of this course as well!

[@teriyakov]

@@jfversluis I agree, this wasn't very well communicated or advertised and I honestly don't think that side of things has changed much. A documented strategy to do this would be amazing. Or a video/course on converting a working xaml app (that hooks into a few device sensors) into a hybrid one. Knowing how to mix the 2 (and why) would be especially useful. On paper, blazor for both web and mobile makes sense but the complexity of the mobile app may be discouraging to those who are more comfortable with xaml for mobile and ,separately, blazor for web. Again, thanks for this and your countless other videos.

[@nickamountaineer9900]

@@jfversluis That's not entirely correct. There are issues with getting location on iOS. You are prompted twice, once for MAUI and once for the BlazorWebView. And the second prompt is confusing to users. There is an issue on record for this and I don't think it's resolved yet. Camera access is a little different too depending on if you are accessing it (or the photos) from the BlazorWebView or from MAUI. Documentation is lacking, but thanks for making videos like this because it makes up for it. One more thing to add is MAUI Blazor doesn't work with iOS 18, you get a blank screen. Although I think there is a work around and it's fixed in .NET 9. But, the issue is localhost/IP, so who knows if Apple will do something to break it again.

[@jfversluis]

@@nickamountaineer9900 blank screen is 100% fixed and I think backported to .NET 8 because that’s important. The permission shouldn’t be necessary and tbh I actually show it in this workshop and I didn’t encounter that so are you sure that isn’t fixed too?

[@nickamountaineer9900]

@@jfversluis I haven't tried it again or checked the issue in Github to see if it was resolved, but will test it out. Thanks for the info. And I haven't watched the whole video yet, and although I'm experienced I still watch all your videos because one can never stop learning or picking up new tips. But the other issue with MAUI Blazor is the dev experience, hot reload specifically. If will hot reload the BlazorWebView bits, but not the MAUI stuff (even though it says changes successful in the log).

[@unjordi]

Thanks!

[@jfversluis]

Thank you my friend for your support 🙏

[@dan7892]

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.❤❤❤

[@jfversluis]

That is amazing! Good luck with your thesis!

[@dan7892]

@@jfversluis thank you I was looking for something like this but because is pretty much still new technology there is not much info on KZbin about it that is going deep into it

[@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.

[@MauraSastre]

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

[@jfversluis]

My pleasure amigo! Glad you enjoyed it!

[@lukevincent4397]

Time to rock n' roll. Thanks Gerald!

[@jfversluis]

🕺have fun!

[@julienbarach6620]

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.

[@jfversluis]

Blazor Hybrid is definitely a supported product! So have at it!

[@lulithagihan7817]

Really appreciate this thank you.

[@jfversluis]

You're very welcome!

[@istalexnik]

This is amazing.

[@ImranKhan-nc7wp]

Thanks Gerald for this amazing course. In the course you have demonstrated navigating to a maui page from blazor page or displaying a maui page in a model window. Is there a way to use some maui controls inside a blazor page?

[@jfversluis]

Thanks for the kind words! Unfortunately not. If you want .NET MAUI controls either use a .NET MAUI page and add a BlazorWebView to that which only takes up a portion of the screen and mix in .NET MAUI controls. Or navigate to a .NET MAUI page from Blazor like shown in this course. You cannot use .NET MAUI components inside a razor page.

[@ShashiKumar-d9s]

Hello Sir, I'm currently at a Roadblock with a Maui android application or Window application I'm developing and I'm not being able to find a Solution to the problem I'm having. This problem may be caused by my lack of experience in managing layouts but I think there's a bigger problem here. Basically I'm having a huge problem with adjusting Fontsize and the Width of controls in my application depending on the ScreenSize /Pixel density of different devices. I've been developing on a Base Pixel 5 Android emulator. As soon as I change the pixel density or run it on another device (bigger or smaller) the whole Layout goes crazy , buttons are off screen or the FontSize is too small FontSize or too big , Margins that worked fine now just jamble all the controls. I'm having quite the headache trying to come up with a solution for this problem that does not have me re-do the whole layout ... But I would still have the same problem with FontSizes and Margins when using a smaller or Larger device. The current "solution" I'm working on is basically to check the Device ScreenSize and Change the Controls style depending on the size, but this all falls appart when I have devices with the same screenSize that have different Pixel Density and again the whole layout goes crazy.. Has this happened to anyone else, or am I not using the correct approach to developing the Layout? Thank you in advance for any insight into this matter.

[@nickamountaineer9900]

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?

[@jfversluis]

Depends a bit on the platform how they manage their web views and if you maybe implement something lazy loading etc. I would say not super common but definitely possible and I’ve seen people do it! But you then don’t want to load whole Blazor applications in each tab probably. It would just be a page or a component

[@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!

[@jfversluis]

If you know how to use VS Code for .NET MAUI then you can follow along with the whole thing deploying to Android! Also see: kzbin.info/www/bejne/anWVp4iPiq6kfLc

[@MutazZ]

@@jfversluis Thank you. I am beginning to work with Blazor in VS Code and am currently following the "Build web apps with Blazor" course on MS Learn.

[@dpc4663]

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.

[@jfversluis]

There definitely is mixing with MAUI pages in there I hope that covers what you need! Have fun!

[@aronetwo1979]

I'm kinda new in blazor, can i use component ui using mudblazor or avalonia when using Blazor hybrid?

[@jfversluis]

Mud Blazor yes Avalonia not sure unless they have stuff for Blazor?

[@kaylahuber2795]

Can you add DevExpress to this project as well?

[@jfversluis]

DevExpress Blazor components should definitely work. Their .NET MAUI components too if you add it to a .NET MAUI page and mix both techniques which is also shown in this video!

[@trungngo7428]

How to update in app with maui hybrid? I found code push in react native but in maui it dont support

[@davidquijada3394]

Is it possible to use this technology (blazor) and use native elements such as face id (ios) or biometric authentication (android)? Greetings from Chile and thanks for the content

[@jfversluis]

Absolutely yes

[@santiagomartinez-cr4in]

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?

[@jfversluis]

Thank you so much for watching! That is certainly one way to do it, yes! Depending on the platform this might mean it creates multiple web views, so you might want to check how that behaves with memory usage, but otherwise you should be OK!

[@santiagomartinez-cr4in]

@@jfversluis Thanks! 🥳

[@kunalshah9344]

How Can I add Google Adsense In both Blazor Web and MAUI If you can generate source code for that or practical guide for that then it will be best.

[@itdev01]

is there is any way to convert my MAUI app to blazor hybrid app. please reply

[@jfversluis]

Not automatically, no

[@SergiuGuglea]

just started to learn, but it looks it does not cover authentication and authorization

[@jfversluis]

That is correct! That could be a course on its own 😄

[@LeonoX97]

amazing thank you

[@jfversluis]

You’re very welcome!

[@cissemy]

Thank you.

[@jfversluis]

Enjoy my friend!

[@cissemy]

@@jfversluis Any plan to add CodePush to maui blazor hybrid ?

[@jfversluis]

@@cissemy I don’t think we have any immediate plans for that

[@randallstephens1680]

But... does it run on Linux?

[@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.

[@jfversluis]

Not at all. This all renders the exact same way across platforms so if anything this is more consistent. Also not really another layer. This does not render from native to web and then to another thing this is just a web control in the MAUI toolbox that is rendering the UI. The rest still runs as a native .NET app

[@mmeuwese]

@@jfversluis 🤔 maybe i should then give it a chance. Coding maui for android and ios is still so inconsistent that it takes a lot to get the UI look the same (similar) on both platforms. Reading that .net9 allows to create a web app using the new templates makes it tempting…

[@Ziomal645]

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.

[@jfversluis]

I totally think they would! For starters, not all apps are consumer facing. For business apps I might not be important that it looks more like the web. In fact, then it can be a big advantage to share code between your web app and a mobile app. But there are even consumer facing apps out there that use Blazor Hybrid! If you're a web developer, but maybe JavaScript is not for you, this is also an option. And there are many more scenarios you can think of. But each to their own, I think this can be useful!

[@nickamountaineer9900]

You can style HTML buttons to look like native. And the trend anyway is to have a consistent look and feel across all platforms. I have 4 MAUI Blazor apps now (2 internal to the company, 2 customer facing in the app stores), and it's so much easier to write documentation (including screen shots of how to use the app) and only have to create one set of everything instead of one for iOS, Android, Mac, Windows. And if you setup your project correctly (and this is a template in .NET 9), you can share your razor pages in a razor class library and easily have a web based app as well. And in the corporate world, this is what managers want to hear.

[@DE-sf9sr]

I've mentioned this elsewhere, but when Entra External ID is added in, it makes Maui a truly compelling platform. Especially with Hybrid blazor to get consistency that both a startup and enterprise can use.

[@autoking4581]

wow !!

[@jfversluis]

🤯

[@akshayjain4001]

37:05 is there a way to acheive localization of app name from Application tag in csproj?

[@jfversluis]

Not in the csproj, you’ll have to leverage native ways for that learn.microsoft.com/dotnet/maui/fundamentals/localization?view=net-maui-8.0#localize-the-app-name