How can I scan barcodes in my Blazor
hybrid application? Or how can I use maps in my .NET MAUI Blazor
application? That is just a couple of questions that I get under
my videos. So it's probably about time to see how we can mix a Blazor hybrid
application with native dotnet Maui in a net Maui Blazor Hybrid
hybrid application. Now before we dive straight into the
code, let's establish a couple of things so that everyone can follow along here.
So on the one side we have done at Maui Blazor app, Blazor hybrid,
it's the same thing with two different names where you have still a .NET MAUI
application, but inside of that you will load a Blazor
application. So you will get the best of Blazor. You can use HTML, CSS, you
will get all kinds of responsiveness. It looks kind of pixelperfect on all
the platforms, right? So that is really cool. And on the other side you
have donated Maui which translates everything into the native look and
feel on how it's supposed to look like on that platform, right? So there is
those two things and with dotnet Maui Blazor or Blazor hybrid, you can
still leverage all the power of .NET MAUI, right? Because it's a
.NET MAUI app. Still. The only thing that you kind of change
if you want to put it like that, is that you take the example and
the code and you throw that out and you model
your UI with HTML and CSS, right? So I mean
it's a bit more advanced than that of course, but that's kind
of like the easiest way to put it. Now if we go back to the examples now,
how can I scan barcodes and how can I show maps? If you want to do
that in Blazor, there is options for that obviously. But maybe
you want to use something that is inside of .NET MAUI which is a
native thing, but you want to use that in Blazor. Well you can use a
Maui Blazorwebview, that's how we put the Blazor inside of
your DNA and Maui app, you can use that as an element inside of your
application, right? You can make that an element inside of your application,
but you cannot do it the other way around. You cannot put a .NET MAUI element
inside of your Blazor page, inside of your Razor page.
That's not something that you can do. So I'm going to show you a couple of ways,
three ways actually on how to mix Maui, native and Blazor together. Here in Visual Studio 2022, I created
a file new net Maui Blazor application and you can
see it here on the left in Visual Studio on the right you can see a physical
Android device that I have right here. It's mirrored on my screen here on the
right and I can interact with it right here from my computer as well.
So that's pretty cool. But here on the left you can see like this
Blazor web view, right? So we're loading that. Our complete application will be
this Maui Blazorwebview and inside of that is our Blazor application and
that's where you're going to do all your things, right? That's typically how
you would use this Blazor hybrid application. Now one of the kind of
like more obvious ways to mix and match these things is if you are
going to make this a tapped page, right? So now we're going
to make this a tab page. And inside of a tab page we can have
multiple content pages. So I can make this a content
page and I can wrap this in a content page right
here. Maybe this is not going to work with Hot Reload. We'll see in a minute
and we can give this content page a title, right? So let's make this a
title and let's name this index first. And if I'm going to
copy and paste this, I'm going to give it another
content page and I'm going to say counter because your typical Blazor
application has the counter here as well. So if we go to this counterpage
we have this one, right? So we have all that, I can add another
one. But now this content page, right, this can be
anything. So I can here do Maui. So let's add that and instead
of a Blazor web view, I'm going to add here a
label and I'm just going to say text is, this is a Maui page and maybe it is a color of black because else we might not see
it. And a font size a little bit bigger so that
it shows up nicely. Here we are. So I think this is not
going to work with the Hot reload. So let's just stop here
for a moment. And now we have a tab page and we're going to see the
tabs as they're supposed to on Android, but we have different pages
in here, right? It's still going to load the whole Blazor
application inside of one content page. So we probably want to change that. So
let's add the XML and S and let's name that pages is. And
then we're going to search for pages here
which is our Maui Mix Blazor sample. That's the name of my application,
pages not Maui Pages. We'll get to that in a little
bit. So Pages because this in here solution, we have these pages, right?
And this is our Blazor pages. So I want to add that namespace
right here and now I can reference those instead of just loading this
whole local main which is pointing here to this main
Blazor, loading this whole application in
here, right? That's not something that we want to do anymore. I want to just load
this one page. So I added these pages right here and now I can
say Pages and I can use index, right, that's one of
the pages. Or I can do pages and I can do counter, right? So
now we just have the index and the counter. And whenever I start
running this again, we will now see the tabs as they are supposed to look
like on Android because the tab page is a native thing that we're
going to see on Android. I have a little bit error here because the
main page is now a different base class. I'm going
to give you a pro tip right here. So let's go to our main page XAML CS.
And you can see that now this main page inherits
from content page because this XAML was a content page, but now it's a tab
page, right? And this is the thing, it's a partial class because we
have a part in XAML and a part in code. And here's the trick, you can
just remove this. We don't need it because it's a partial class. It will
know from the example page that this is a thing. So now you never have to
kind of worry about these errors again. So let's just do
it again. You'll see that it just works. So now we have the tab page. That was
what I was talking about. And the tabs will look like however
they are supposed to look like on your Android version, right? But now the
first tab, the index one will have the index page for Maui Blazor navigation. The second one will have the counter
page and the third one will have a Maui page. Now in this case, it's just
simple content pages. But you can create a file new page
inside of your project and you can just load that whole page
in here, which can have a barcode scanner, which can have a map, right?
So you can just have that full page in there and that will just work. This
way you can mix and match. One page will be
maui. Maui Blazor navigation page will be your other application. I
still have built errors here, so sorry about that. I'm
not sure why that is. I'm just going to
leave this in so you can see that I make stupid mistakes as well. Main page already contains a
definition for Blazor Webcue. Oh, there we go. I have the name still in
here. So that's why it's kind of confused right now, which is kind
of weird because it's in two different
pages. But let's remove it right now and let's see what happens now. All
right, that worked. So our application is being deployed. It
should pop up here on the right in a little bit. And our application is here. So
whenever we do, we're going to see the thing
that I've described with a couple of tabs. There's going to be one weird
thing. Think to yourself what that might be. So here
you can see, right, the tabs. We have the top tabs, we have the index, we
have the counter. It still works. We have the index. And now we
have the Maui page with this label, right? This is a Maui page. So
the one thing that you'll notice is that the styling from the HTML from
our Blazor application is gone because we were loading that main Blazor
before, right? And this wraps everything
inside of this main layout. So you need to take into account that
you add a little bit of HTML styling, whatever
inside of your separate pages now or wrap it inside of a main
layout. But that's something that you can definitely figure out. I believe in
you. So that's kind of like the first obvious thing to do
here. How you can mix and match all these things, but
more subtle ways is maybe to just have one page popping up inside
of your Blazor application, right? So let me just put this in a
comment here so you can see that because all
of my videos have a GitHub repo attached with the sample code. It will
be down below in the video description. So go check that out. I will put this
here in a comment and I will add the Blazor Maui tabs right here so that you can find
it for reference. Right? I'm going to change this back
to a content page so that we just have this one page. And
I'm going to give this back to this Blazor web view so that we have
this full Blazor application again. So there's that now. Oh, then I
need to change this, right? So I need to make this local and main
again. So now we're back to this full Blazor
hybrid application. And let's look at the second way of
kind of mixing these things here. Don't forget, this is just a content
page. This is a main page so we can pop other pages, well, actually
push other pages on top of this, right? So let's see how to do
that. So in this solution, in this project, I already created a
couple of Maui pages. You can see it right here. I have this Maui page
XAML. It's very simple, just a stack layout with an image,
with a label. Don't forget to subscribe. Maybe that's something that
you want to do through this channel. Go do it right now. And we can just show
this page. Now this is a very simple example, but
again, here you can show your dad at Maui Maps, right? You can put that
in here if you want. You can put in your barcode scanner here.
That's all stuff that you can do. So let's see how we can make this pop up inside
of our application. So let's go to our pages, our razor pages, and go to the counter. Doesn't
really matter which one because this one has a button already,
right? So this has some code set up already. And instead of incrementing
oh, let's just keep it incrementing. It doesn't really matter. We can do
app. Current Navigation oh, sorry, the main page first main
page navigation and now we can just do navigation stuff.
We can just do push modal or push Async. So for pushasync
you're going to need to wrap your page inside of a
navigation page. So let's just do that first, let's see
what happens. So we're going to do new Maui page and I think it's in a
different namespace, maui pages, Maui page, here we go. And now we can push this page on top
of it. But this only works if you are using a navigation page,
right? So let's go to our app XAML CS because that's where our
main page is being set. And here we have this main
page. So you need to wrap this into a new
navigation page and whenever we do something
interesting is going to happen, right? So what we're doing now is we
have a new navigation page which is kind of an invisible thing but it will
give you the navigation options. So whenever you push something on the
stack you will get that little back button in the top left and you can go back
through the pages, right? So that's kind of like what it does. And we are
doing this new main page which is the main page with our
Blazor. This is the Maui page with our Blazor
web view. Here we are, this one. And inside of that we are
going to go to our counter page, our Counter Blazor.
So we're suddenly in Laserland here but we go back to Dan
and Maui with the apps current main page navigation pushasync. And
here we're going to do a Maui page which is just another
content page. So this goes a little bit quickly. I think on
YouTube you can play back with like half speed, maybe that makes sense or
watch it a couple of times over. But this is how it works. So if
we're going to do this, like I said,
something interesting is going to happen because we have this big Blazor web view which
already has a little top bar and a hamburger menu and what not.
So kind of like our navigation page that's already built in. So it's not
going to look great, right? Because the navigation page also gives
us a little top bar which has the title of that page inside of
it, right? So we'll probably see Maui page somewhere inside of
there. So that's something that you don't want to see. I'm going to
show you how to fix it in a little bit but let's just wait for
our application. See now we have this double top bar here at the top which
is not really great. But what should work is if I go to the
counter right here and I click on the button, now you can see
that we get this Maui page, right? So this is suddenly a Maui page
and we can do all kinds of Maui native stuff in here instead of
Blazor stuff and you can see that Maui page right here. But
this is not something that you want at least not here inside of your main
page right? So how are we going to fix that? Well here in
our main page we can say it's a bit of a mess, the indentation
is a bit weird here but we can say navigation page and then we have a couple of properties
that we can use to influence the navigation page that might or
might not be the parent of this content page. It doesn't really matter
if it is. If it is then it will apply these properties. If the
navigation page isn't there it will just ignore it. So here you can say has back
button, icon color all kinds of things but also say has
navigation bar so we can set that to false. So let's see if the hot
reload picks up. Yeah, it picks up so you can see that now the
navigation bar pops away it doesn't look ugly here anymore and
whenever we do click me here it will still add it here so that we can
easily go back right? So this makes it a little bit nicer to
mix and match these things. Of course another way to also do this
is to go back to our counter Blazor page and here say push modal.
So if I do push modal now I can do hop reload,
net hop reload, click the little flame button here it
will reload my code and now it will push it as a model. No
it didn't work for this net reload instance so let's
stop and restart. But what it's going to do now is push as a modal and
a modal page is a page that's going to be on top of
everything right? And we're going to have to provide a button to actually
close it again. There will be a back button or something to do it on
Android, of course, you have the hardware back button to actually go back, but on iOS
or Windows or whatnot, it's going to be a mobile page and you
can't get out of it until you add a button to actually close
that page and pop back to the regular pages. Right. For this
you don't need the navigation page so you
can go back to your app XAML. You can get rid of this navigation
page if that's not something that you want because now it's just going to show as
well. It's going to show it like this. You
see that you also don't have the navigation bar here at the top. With
this you can skip the navigation page. The only thing that you need to take
into account now is that you have to add a button yourself to this page
to actually do pop modal async again so that the page
will pop here again as well. I can maybe quickly add
that so let's see to our Maui page, I'm going to add a button here.
At the bottom button text is close and clicked Is. Let's add a new
clicked handler and do that. And whenever I save this
then we should see the button. See we have the close button. And
let's see if we have this handler here in the
back. And now I can say pop. What is it? Pop navigation. Navigation. Pop modalasync. Here we go. And do that. I hope Hot Reload will
pick up on this. Let's see close. No it doesn't. Well, you
probably believe me that it works, right? So then it's going to
close this page again and you're back in your Blazor application. Actually
it now crashes. I see. So that's great. That's my cue
to go to the third option which is maybe even, well
the best one, I don't know, you decide what's the best one, right?
Which fits your needs and requirements. And the third one is
similar to the second one where you just juggle with pages
in .NET MAUI. But you can use the .NET MAUI community toolkit, the
Dynamui community toolkit and probably other plugins are around there as
well. That will allow you to show a little pop up which is
something that you can do as well. So install the Done in Maui community
toolkit. I've got videos on how to do that. I actually got a video
on how to use the pop ups in more detail as well. Go check
out the corner of your screen or the links down below. I already got it
set up. So what I did here is in the Maui pages folder I
have this Maui popup page. So this is a pop up and I'm going to
show that on top of my Blazor application. And you can
actually see I also installed the ZX a barcode component right here, which I also have a video about. So I
highly recommend you check that out if that's something that you're
interested in. But just to make this sample a little bit more real and not show a
couple of labels, but show you that you can actually use something like
this, right? So if we do this, let's go back to my calendar razor and
let's actually add another thing here and not click me.
So let's make this open Maui page and let's make this
open Maui pop up. Just so we have two here and let's
name this open page right? So that it looks a little bit
nicer right here. Let's copy this and here open pop up, right? So let's do that, add that
to that one. And now what I can do, you have to call this on the
main page. So you have to call this on the here. And then we
have a show popup method right here. And you want
to use the show popup async at least from what I'm going to
do. If you just want to show a static popup that doesn't return any
data. You can use show popup if that's what you want. But I can do
show pop up async and I can catch the return value. I'll show
you why in a little bit. So let's .NET MAUI UI popup page, I think I called it right. Popup
page. There we go. Add the right using
probably yes, using .NET MAUI Blazor samples, Maui
pages. It's going to add it here at the top for me. And now it
knows the Maui popup page. So whenever I do that I should now be
able to run it again. And like I said in this page, I set up the ZXing barcode
scanner thing. You have to set up some things in your
Maui program whenever you install it. I'm not going to go into it in detail
because that's not the focus of this video. But this is going to scan
actual barcodes. It's going to open my camera. You have
to add the permissions to your app. It's still a native mobile app so you
have to add these permissions. But it will come up and it will show me the
camera view and I can scan actual barcodes and I can use that
return value back in my Blazor application. So here the
application is coming back up. Let me bring up my
physical device here and I'm going to go to my calendar and I'm
going to open the Maui popup. And you should see right now, see here
is the permissions in action. I'm going to do it while using the app
which is fine. Then it's going to show you this camera view
right here. So you can see behind the scenes here
a little bit. And I have this little box of paperclips which has a
barcode and it's not going to scan it right now because I didn't
set up anything. But let's see how we can implement the actual scanning
right here. So if we go back and you can close this
right? So I can close this from here and boom, we're back into the
Blazor world. So let's see how we can actually get
back the value from here. Now what we want to do is probably set
up the event which is, I don't know, something with
detected barcodes detected. I'm going to create a new
event handler which is going to pop up in my code behind.
And here I can say close because we're in a
popup, right? Close is a method inside of our net Maui
community toolkit popup. So we have close and in the close we can provide
a return value. And here in the event arguments we
have the e result. And this is a collection actually. So
let's just take the first one. This is not the best code so don't try this at
home. And then the value because the result has a couple of
metadata for the barcode that has been scanned, but the value will have the
value that is inside of that barcode. Right. In this case it's going to be
some numbers. So it's going to close this pop up and it's going to give
back the value that was scanned here. So now if I go back to my
counter Blazor, I can hear the far result is and then
I have to await it and I have to do a
thing here in order to do that. And then let's add a little
entry here as well. So what do we do? Input. My
HTML is a little bit rusty. Input. And with
Blazor we can say add bind, right? And we can
say result value. I don't know, something
like that, right? And then this. Okay. Input. Yeah, I think
that's it. But it doesn't know this result value
yet. Okay, that's something we can work with. Private string
result value. Boom. We've got that set up
now. It should be happy. Okay, cool. And if we want to do this
now, we can say result value is result. All right. And then we probably need
to do state changed or something. That's a very much
Blazor thing. State has changed to update the bindings. So this is
basically your data binding, but now in HTML with CSS, oh, we need to do this. This is an object
and I know this is going to be a string, right?
So again, this is sample code. You probably want to add some error
handling and stuff here. But I know a string is going to be
returned. I'm going to put that in that result value and it's going to
show up in that input. So I think now everything is set up.
So what should happen now is whenever it scans the
barcode, it will detect that and it will give that return value
back to our Blazor application and it
should close the pop up, right? Because that is what it's going to actually do. So
let's see if that actually works. And then we
have our kind of like EndToEnd integration where we start with our Blazor
application, but we still want to use the barcode scanner in .NET MAUI. We can
do that. We can grab the value from that thing, we can send
it back to our Blazor application. And now we have a fully
integrated dotnet. Maui Blazor, best of both worlds
application, basically. So here we go. You can see the entry here down
at the bottom. I need to work on my styling, but oh well, open
Maui pop up and you're going to see the camera again.
And let's turn this to this barcode and it's going to actually
scan it. Boom. And you can see it picks up on that value and
it gives me also an exception because I actually forgot to do something right here. But you can
see it works, right? And I will tell you why this is happening. I need to
actually stop scanning the barcodes right here.
So I want to go back to my popup page and use this scanner. I made a reference here. I want to say
scanner is detecting to false so that it stops actually
scanning and it cleans up all the resources and that kind of
stuff and that will actually make it work here. So that is
how you can scan your barcodes with .NET MAUI Blazor
hybrid and integrate .NET MAUI Blazor hybrid with all the
things here. Now I think that is a lot of information to
take in. There is a couple of ways to do that. There is a lot to
consider here because also the thing that I didn't even mention,
if you're going to use the tapped approach like the different pages in
the tab, then suddenly your Blazor application is not going to have state
between those different pages, right? So you're going to have to create a
singleton object that will hold your state and you're going to have to register
that inside of your dependency injection container and basically use that. So
there's definitely things you have to have a little bit of a
different model here to actually make this work. But you definitely can. And
I hope I showed you that that a Blazor hybrid application is still a
.NET MAUI application and you can use the best of both worlds and that
is what I think is really cool. If you want to know more about
anything that I've showed here and I didn't go into with enough detail,
please let me know down in the comments. Of course. Also,
if you want to learn more about the Blazor stuff, the dad and Maui stuff,
find the other videos about the barcode scanner, the popups, I got
it all in playlists. In fact let me just show you right
here. This is a playlist with all the dominant Mario community duplicate
stuff, including the pop ups. Here is that video on the barcodes and I will
see you for the next one.
