3 Ways Combine .NET MAUI and .NET MAUI Blazor Hybrid

[@jfversluis]

Wondering how to use those Popups? Wonder no more, a video on that is right here: kzbin.info/www/bejne/r36aoKOOodpgg7c Or how about those barcodes? Scanning barcodes is being talked about here: kzbin.info/www/bejne/paTXmJ1oraeSpc0

[@stonedhackerman]

It's criminal that this video has so little views. Using MAUI just as a necessary evil for native stuff and Blazor for all the UI, looks and good user experience is a perfect mix! Thanks for these videos, they're awesome!

[@jfversluis]

Haha thank you Jirka! I probably need to market it better somehow… glad this was useful to you, and spread the word 😉

[@StephBsimon]

you're one of a very few understanding that programmers hunting for info are on a schedual! Focused, to the point and packed with info. Great format, don't change! Thanks a lot for this.

[@jfversluis]

Thanks Steph! I appreciate you saying that!

[@fieryscorpion]

Great video! Thank you. I’m really really really hoping for Mobile Blazor Bindings to take off. I love that!

[@emmanueladebiyi2109]

This is actually awesome. Well done Gerald. Thanks!

[@jfversluis]

Thanks Emmanuel!

[@emmanueladebiyi2109]

My pleasure! By the way, have you considered a video on showing how to display local filesystem images (or even videos) in MAUI Blazor. The Base64 conversion route is the only solution I know at the moment.

[@jfversluis]

@@emmanueladebiyi2109 Ah interesting topic, thanks!

[@tanakamawere]

It's so amazing that thing I was thinking about today is what you post about. Excited to watch this one

[@jfversluis]

Haha that is great! 🔮

[@bauminator610]

Great Video. Thank You. I work on a Hybrid Application with Blazor and Maui and this is very cool. Your Videos are so good. Go on !!

[@jfversluis]

Great! Thanks! Anything else you’d like to see?

[@bauminator610]

@@jfversluis Puh at the Moment there is nothing Special but in the next two Weeks i want to work more on the app and then i can give you some Input :), But thanks for the opportunity.

[@bauminator610]

@@jfversluis Hi Gerald, now i have a Question. My Structure in my Project is a MauiBlazor-Project, a Blazor WebAssembly-Project and a SharedUI-Project so that we can take our Razor Components from SharedUI in the Webassembly or the Maui App. In Part 3 of your Video you call the ModalPage with App.Current.MainPage.... bei in my SharedUI Project i haven't got the App Identifier. So my Question is: Is it Possible to do the Same Things in your Video with a SharedUI Structure? Best Regards Philipp

[@jfversluis]

If you look at the Navigation property you will see that it’s an INavigation interface. You can also register that in your dependency injection container and let that be injected so you can use it

[@bauminator610]

@@jfversluis Thanks for the hint. I try but should be possible :). Thank you.

[@IAmMike2K]

Thanks so much for this, super useful, helped me get QR codes scanning in my Maui blazor app

[@jfversluis]

Awesome!

[@modx5534]

Great tutorial! You helped me a lot; I was really struggling with mixing Razor and Xaml before discovering your video :).

[@jfversluis]

Do happy to hear that, thank you!

[@mb72oz]

Awesome, this instantly helped me solve a problem I was having creating a shell/MAUI Blazor hybrid app. I might suggest doing a quick video for this scenario would be of benefit to others also, especially as there are more 3rd party controls available for Blazor vs MAUI (at this point in time). Thanks Gerald!

[@jfversluis]

Awesome Mike! Thank you so much for the support here! Glad it helped. Not sure what you mean with the video suggestion. You mean doing the same but now for Shell? I guess the navigation would be a bit different, but the principle remains the same. But that's what you mean?

[@mb72oz]

@@jfversluis - you are welcome. Yes, the principle would be the same, but navigation is different, with Shell (as a beginner with .NET MAUI) the paths/page structure/navigation seems a bit tricky. But of course people can probably work it out themselves. Anyway, thanks for the great videos, look forward to more!

[@ghevisartor6242]

Nice! It's what I've done previously in my app, glad to see it was the right way, thank you!

[@jfversluis]

Glad I could help!

[@jesusnaun1981]

Hi, Gerald! I use .NET MAUI Blazor Hybrid. I know very little about xaml but with your videos I learn a lot. I have successfully followed many of your videos. Now I read QR code using the camera but I do not know how to recover the data and take it to blazor. You will have some example or material where you can read about it. Thanks bro! Go on! Excelent material.

[@snowblack5146]

I am thinking for month whether to learn either MAUI or MAUI Blazor. Thank you so much that you have just given me the answer: BOTH because they can be combined.

[@jfversluis]

Exactly! I am planning to do a full course on a Blazor Hybrid app though… would that be helpful? What would you like to see in it?

[@snowblack5146]

@@jfversluisI think it is confusing for .NET developer now because Microsoft seems not certain for the future techniques to be used in multi-platform development. They provide a lot, may be too many ways for the development(I understand the world is changing), but none of them are for all platforms using a single codebase. I know learning both MAUI and MAUI Blazor is good for .NET development, but it need more time and project investiments. At this moment, most .NET project managers are difficult to make decision on how to invest. Maybe most of them are hoping to see something like Avalonia from Microsoft? What do you think?

[@jfversluis]

@@snowblack5146I don't see that problem to be honest, it's different options to solve problems in a different way. We also have WPF and WinForms and Apple has Swift and Objective-C, most bigger companies have multiple options. In a way I think Microsoft is definitely testing out what works and what not, but I don't think the end goal is to only keep 1 framework. In fact, Blazor Hybrid cannot exist without .NET MAUI.

[@snowblack5146]

@@jfversluis Bigger companies have multiple options, you are right. We definitely need a full course on mixing MAUI and Blazor Hybrid, Web API and authentication etc. Thank you!

[@kalixthuska8846]

@@jfversluis messaging between pages in blazor components. Lets say I have list of items on one page and when I click the item, it should close and notify underlaying page about my selection. I am using messaging in Xamarin and MAUI for this, is it suitable for blazor components too ?

[@imorenodev2886]

Amazing video and great end-to-end examples! Keep up the good work. Subscribed!

[@jfversluis]

Awesome, thank you!

[@ImranKhan-nc7wp]

That was really needed. Was struggling to figure out this stuff.

[@jfversluis]

Hope it’s all clear now!

[@ImranKhan-nc7wp]

I had to add barcode scanner to our blazot maui app. I was thinking to either use some javascript library using js interop or change the main page to tabbed page as you mentioned in this video. But I was looking for something similar to the second and third methods that you showed in the video. Thanks a lot.

[@omaralkhateeb6645]

thank you so much Gerald you are amazing

[@jfversluis]

Appreciate it! Thank you! 😊

[@80amnesia]

Great topic I was looking for qr code scan and maps

[@jfversluis]

As if I read your mind 👀

[@80amnesia]

@@jfversluis life saver, I can continue working on my side app project, thank you!! 🤟🤟

[@imadabab]

Great video. Thanks a lot. I have subscribed.

[@jfversluis]

Awesome, thank you!

[@billymartin6497]

Great video. How would I do it, if I wanted the Maui page in the hamburger menu instead of having it as a navigation or modal page?

[@jfversluis]

Good question! I guess implement some clicked handler as opposed to using the NavLink? Or create a custom NavLink?

[@billymartin6497]

@@jfversluis Thanks for the speedy reply. Please let me know if you find out. If the Maui team can't do it, what chance does a mere mortal have? LoL

[@DeepWorksStudios]

Thanks for this valuable content. Keep it up!

[@jfversluis]

Will do 🫡 thank you!

[@1989krzychu]

Hi ​ @Gerald Versluis, and what is about gesture recognizer in blazor hybrid, is it possible to handle it?

[@chezchezchezchez]

What’s the disadvantage of starting it as a hybrid? Let’s say you never use the Web aspect, are you going to be disadvantaged and wish you started it as a pure maui? Thanks.

[@franciscofernandezcasas7924]

Good video, very interesting and helpful like always thank you, I have a question, for example I like the idea of mix the beauty of both world MAUI and Blazor so if I want to use Shell to navigate from a xml page to another and inside of each xml page have a BlazorWebView with my Blazor razor component, so how I can send data like an object or just an “ID” to my Blazor component, I know how to send data between pages in Maui with Shell and I know how to send data between Blazor razor components as parameter but here it is a little different because I would send the data from de Maui xml page to the razor page , how can I archive that?

[@ArkFen]

I assume hopefully we can do yet another way, or can't we? It is when we start the application with MAUI native page (navigation or even shell one) and only then jump to some pages which got blazor web view... if it is possible, it could be cool to see it in the next video or so... and also you mentioned putting BlazorWebView as part of the MAUI page if I am correct, to have a mix of 2 world on the same page (I also saw it in one article) but you did not show how to do it (and article also did not))) and when we tried to do it we got an error - something like Content element is used more than 1 time... Any thoughts on that? Thanks!

[@ThaveeshaKannangara]

Great one 😊👍

[@jfversluis]

Thank you!

[@townmilk]

Hi Gerald! I am working on Maui from last one year. But don't know anything about Maui Blazor hybrid app. Can you please create a video for getting started on it.

[@jfversluis]

Creating a course on that is high on my list. Hopefully more info soon!

[@yaKaiZen]

Hi ​ @Gerald Versluis, Thanks for this fabulous introduction! Can you please refer to any reference material for managing states in Blazor Hybrid App with all related requirements as you hinted at 23:04! Sincere thanks again!

[@abuzeralaca]

Hi Gerald. Thanks for this great content. Can you show how we can override render class of blazor? I couldn’t find anything useful. There is RouteView in blazor but I am not sure what class we have in Maui.

[@jfversluis]

Everything you have in Blazor should be available in .NET MAUI Blazor. It’s literally a Blazor app running in there

[@zagoskintoto]

Hi, I came across this while looking for another thin. First of all, very informative! I do have a question related to MAUI + Blazor integration. I currently have a Razor Component with a form. It has inputs and I would like an input that accepts a mask. I don't want to depend on external JS libs so I thought of using the native MAUI with the masked behavior, but then I realized I can't use that inside a Razor component. Is there a way to integrate with that without making a full maui page for the whole form?

[@jhonnymello4338]

I realy wanna see more about it, i know nothing about xamarin or how use xaml, but i LOVE blazor so i need to use like a refresh view and many others things from native in my blazor hybrid app but it seems i can find it anywhere :(

[@KooEngAnn]

Is is possible to navigate to razor component page from content page (navigate from xaml to razor)?

[@alkishadjinicolaou5831]

Thanks

[@jfversluis]

Thank _you_ so much for your support!

[@Thom1000]

Hi, i love your videos! Can you make one for Drag and Drop in Maui Blazor?

[@jfversluis]

What about it? 😊

[@whoprofits2661]

Well explained, Gerald. But what I DON'T get is why would I use MAUI Blazor at all and worry about native integration and session management? MAUI proper (not hybrid) gives me those right out of the box. So I fail to see MAUI Blazor's purpose and advantages. What am I missing? Would love to hear people's take on it.

[@jfversluis]

Thank you! There are many reasons why you might or might not consider using .NET MAUI Blazor. Maybe you have an existing Blazor app already or want to build one along side your mobile app and you want to share code. Or maybe you dislike XAML to model your UI or you're just more familiar with HTML & CSS. Additionally, while you do have to implement some of the session management and possibly other things, a thing that you get for "free" with .NET MAUI Blazor is responsiveness. Where you have to implement things yourself in "native" .NET MAUI to make things responsive, with using HTML & CSS with Bootstrap, everything should be responsive automatically. But if you don't like it or don't see the point, no need to start using this!

[@whoprofits2661]

@@jfversluis Thank you Gerald for the Blazor scenario overview. It highlights why Blazor doesn't fit my needs. The only Blazor feature attractive to me is responsiveness. It is something MAUI proper lacks; it would be great if it had facilities similar to those in SwiftUI like maxwidth infinity, ViewThatFits etc.

[@alexanderd9401]

PopAsync still does not work. How to close a XAML page programatically?

[@kalixthuska8846]

What is the proper way to share values between blazor part and MAUI page ? I don't want to use popups for everything.

[@jfversluis]

Have a look at the section about sharing state here: Learn Blazor Hybrid - Full Course for Beginners | Build cross-platform apps in C# kzbin.info/www/bejne/haaTnGiOgMh8npY

[@essakhan8614]

please make a video on how to use javascripts or bootstrap javascripts in MAUI Blazor

[@askalt819]

Is it possible to add Blazor or implement Blazor in an existing MAUI app? If it is possible, I want to upgrade my MAUI project to MAUI Blazor Hybrid.

[@jfversluis]

Should be absolutely possible!

[@sachiradesilva3717]

In iOS (I still didn't test this in Android) as soon as the Camera scanned a QR Code app crashes due to Scanner_BarcodeDetected is outside the Main UI Thread but if wrap around your code like below inside the Main UI Thread it works perfectly. MainThread.BeginInvokeOnMainThread(async () => { BarcodeScanner.IsDetecting = false; await CloseAsync(result.Value); });

[@_jimbarton]

You mentioned maps a lot, could you do a new video on the maps functionality if it's now fully functional!?

[@jfversluis]

Not a lot has changed tbh 🤷‍♂️

[@maxd7228]

Hey Gerald, when would someone choose .net maui blazor hybrid over using .net maui? Which technology is more mature?

[@jfversluis]

Don’t really think it’s a question of what is more mature. At the end of the day they’re both a .NET MAUI app. It has more to do with: what you enjoy working with, what existing skills you already have, and if you maybe have existing Blazor or Xamarin.Forms apps.

[@louiswerth8366]

Hi Gerald. Does Maui Blazor support remote code update like ionic?

[@jfversluis]

I’m not familiar with Ionic, but o guess you’d be able to implement something like that. Not sure how happy the App Stores will be about ik though 😄

[@cristisandu678]

Is it an overhead that blazor hybrid brings to the application compared to if I use everything natively? Compared in terms of application size and performance

[@jfversluis]

Going from XAML to native also gives marginal overhead. The same will be true for Blazor so you shouldn’t gain/lose much if anything. No impact for size and performance

[@Thu_lium]

Hi! how do i pass parameters from root component into the blazorwebview if i chose to use method #1?

[@Thu_lium]

nevermind, got it!

[@jfversluis]

Perfect! Happy to help 🤓

[@Thu_lium]

@@jfversluis actually, on another note, how do i dispose of this blazorwebview? the process isn't closing automatically so i'm getting several 25mb mauiapp1 processes that increases in count by one whenever i open and then close the page?

[@jesusorozco294]

@@Thu_lium Solution please?

[@prasadcp423]

How can I integrate Facebook login, google login and apple login in .net maui?

[@surendrakandira5717]

@Gerald Versluis , Can you make a video on google authentication in MAUI

[@sachinmakhre]

Please provide maui blazor tutorial on OTP read

[@jfversluis]

Sorry I don't know what that means

[@ariel795]

0:22:23 that "is detecting" be stopping detection on all cameras nearby

[@jesusorozco294]

When using method #1, the .razor page loaded with BlazorWebView loads without MudBlazor styles, what could be happening?

[@humbertomoli99]

Aunque no lo crean me carga más rápido una app hecha con net Maui con blazor que con net Maui a secas, osea no supera a nativo pero hay que remarcar que si considero mejor opción blazor o razor como sea jeje

[@marcoerlwein2165]

Hi Gerald, we have a finished app on Blazor Hybrid, it works on emulators (ios, android) and physical devices connected to VS, but it fails to publish to TestFlight, this is a Microsoft bug, is something wrong with the distribution packaging? please help !!!

[@jfversluis]

Without any details it's near impossible to say that this is a bug with us or what else might be going on.

[@marcoerlwein2165]

​@@jfversluis this is the crashlog generated by testFlight: Exception Type: EXC_BAD_ACCESS (SIGSEGV) Exception Subtype: KERN_PROTECTION_FAILURE at 0x000000016fa1bfb0 Exception Codes: 0x0000000000000002, 0x000000016fa1bfb0 VM Region Info: 0x16fa1bfb0 is in 0x16fa18000-0x16fa1c000; bytes after start: 16304 bytes before end: 79 REGION TYPE START - END [ VSIZE] PRT/MAX SHRMOD REGION DETAIL MALLOC_TINY 155b00000-155c00000 [ 1024K] rw-/rwx SM=PRV GAP OF 0x19e18000 BYTES ---> STACK GUARD 16fa18000-16fa1c000 [ 16K] ---/rwx SM=NUL ... for thread 0 Stack 16fa1c000-16fb18000 [ 1008K] rw-/rwx SM=PRV thread 0 Termination Reason: SIGNAL 11 Segmentation fault: 11 Terminating Process: exc handler [761]

[@maxd7228]

Hey Marco, why use blazor hybrid maui vs straight maui if that makes any sense. 😅

[@marcoerlwein2165]

@@maxd7228 Hey Max, because the team knows Blazor very well, also you can share components between Blazor and Maui Hybri.

[@askalt819]

Does anyone have a tutorial on upgrading a .NET MAUI project to a .NET MAUI Blazor Hybrid app?

[@shaileshpandey6214]

Can we Blazor hybrid app inside .Net MAUI solution?

[@jfversluis]

I’m not sure if I fully understand what you mean. But maybe this can help Learn Blazor Hybrid - Full Course for Beginners | Build cross-platform apps in C# kzbin.info/www/bejne/haaTnGiOgMh8npY

[@shaileshpandey6214]

@@jfversluis Thank you . I have already seen this video, which is very good and informative for blazor hybrid app. Actually I asked, I have two different separate project . Net MAUI and Blazor hybrid App project. So can we add blazor hybrid app project inside the .Net MAUI App solution file. .

[@jfversluis]

@@shaileshpandey6214 if you’re talking about a Visual Studio solution then sure. You can add any kind of project in those

[@TheErudito]

Please net maui + blazor + entity framework + sqlite

[@RajeshKumar-io6nd]

Thank you very miuch,. IOS will face problem UIKit error on qr code scanning. You can use Device.BeginInvokeOnMainThread(() => { scanner.IsDetecting = false; this.Close(e.Results[0].Value); }); Then you will not face this issue

[@jfversluis]

This might run on a different thread so then indeed this might be needed. Thx ja for sharing!

[@gueyeabdoulaye5202]

How to Combine from NET .MAUI instead .NET Maui Blazor Hybrid?

[@jfversluis]

Not sure what you mean?

[@josedonizeteoliveirajunior1744]

Thanks for this video, really great. I definitely need to learn Blazor. I accept suggestions where to start and which way to go. Success!

[@jfversluis]

Thanks! I’m hoping to add more Blazor content here so you should start here 😉 Microsoft Learn is a great resource as well

[@MrBigdogtim69]

Once again, great content! Once thing that I do wonder about - where are the learning resources for .NET Maui Blazor? The stuff on mslearn is very lightweight (e.g. shows you how to build/deploy File | New app - but where are learning resources to do more things (e.g. local data storage, consume rest api, etc) in Blazor? Lots of great content on doing same for .NET Mau from you and James (and others) - who is the .NET Maui Blazor content pro?

[@jfversluis]

Thank you! I think more .NET MAUI Blazor content is coming and I definitely want to add more myself! Although, the thing to keep in mind though, same as with this video: it's still just a .NET MAUI app. Local data, REST APIs, it's all still mostly or even exactly the same as on a regular .NET MAUI app

[@MrBigdogtim69]

@@jfversluis Looking forward to more!

[@jfversluis]

@@MrBigdogtim69 what are the things you’d like to see? What you mentioned already?

[@MrBigdogtim69]

@@jfversluis For Maui Blazor, basic "blazor" stuff. I am in the category "long term C# guy". All my web work have been back end API's - no UI so very limited HTML, js, etc. Enough to be dangerous but not much more. While I have been doing Xamarin for a very long time (2011 or so), Blazor is all new.