.NET MAUI and Blazor are a match made
in heaven. You probably already know about Blazor Hybrid with which you can
take your Blazor application, put it in a .NET MAUI app and boom, you
have this platform native app which is really amazing. But did you also
already know about the Blazor Bindings with which you can now not mix the C# code
with HTML and CSS but now you can mix your code
with Razor syntax and actual .NET MAUI components?! So let's take a little step back here.
We now have basically 3 flavors how you can use .NET MAUI. So
first is just use .NET MAUI, right? You're going to write
probably XAML. You can do it in C# as well, but you will have everything
translated from that abstract .NET MAUI layer to however it should look
like on that platform, right? So that is great. That is like our original
idea here. The second one is Blazor Hybrid. So
with that you can mix and match, you can have your full
application as a hybrid application. You will just have that Blazor Webview
in which you will load your complete Blazor application. You
will need to do a little bit of CSS and HTML and you will have that look
and you can still have that native application
and reach out to all the platform APIs, right? So that makes it
super powerful. You can reuse all your web skills but still leverage all
the power from the native platform. So that is really amazing.
But now there is this third option, and actually it has been around for a
little while, with which you can take the Blazor syntax. So if you've looked at
Blazor before then you know, it kind of like goes back to the old AS.NET days
or PHP days where you kind of mix the logic with the markup.
So you can do with the @ sign, you can do a little bit of code, a little bit of C#
code, then you mix in some HTML, you output, you do a little for
each loop and you output like the unordered list, right? That's
the stuff that you can do with that. You can have a little code block in
there and that's what you can do with the Blazor Bindings. But now you
can do it with .NET MAUI elements. So instead of having that h1
for the header in HTML, you can now put in that
CollectionView or a Label or whatever .NET MAUI component is there. So
you can leverage the Blazor syntax but still get that native look and
feel of your application because it will still be translated as with using
regular .NET MAUI if you will. So let's just stop
talking about it and see how it actually works in practice. So this project, if
you've heard of it before, we have an official experimental
project that has been going on, but it hasn't seen a
lot of development. So if we go here, we have it under
GitHub.com/dotnet/MobileBlazorBindings is what it's called.
Actually I'm surprised to see a little recent commit here. But there
hasn't been any real development here. This is just an
experiment. So if that's something that you're interested in, check it out. But this
person right here, which is Dreamescaper, Oleksandr from
Ukraine, thank you so much for doing this. He
is someone from the community who said like: hey, I like this idea and I want
to take it further. So I'm going to take this project, I'm going
to maintain it on a personal level and I'm just going to
move forward with it. So that is really great. And
whenever something official comes he says on his repository like I'm happy to
contribute any progress that I've made and this is how the best projects
came to be, right coming to the world. So that is amazing. Thank you
so much for doing this. Oleksandr, right from this place. And he has now bumped
this to version 1.0. So he is confident enough that you can
actually do something like this which is really amazing. Now it's
all open source, right? So you can all check it out. I will include the
link down below in the video description and there is some
instructions on how to get started. Right, so here we can see
like the StackLayout and the Label and we have that little code block. But
this is not really that is officially an inside of Visual Studio right now.
So what you want to do is install this manually so you can
open up a command line window. I have the Windows Terminal here
already. With the right command you could dotnet new install BlazerBindings.Maui.Templates And whenever you press Enter here that
will be installed. So this is basically just a
NuGet package that gets installed but it contains templates. And you can see
that we've now successfully installed the MAUI Blazor Bindings
App template. And you can do short name blazorbindingsmaui. So if
you want to do it from the command line you can dotnet new blazor bindingsmaui So that's the name that you see here
basically. And then you could give it a little
name so that it goes to a new subfolder TestBlazorBindings. Right? So you could do that and now
it's getting created and we can get into change directory, CD, TestBlazor Bindings. There we are. And if we
inspect what's in here then you can see the
solution and whatnot right. But if you just install the templates with that
command line we can also go to Visual Studio. Let me just do that
now, in Presentation Mode so you get nice the big fonts and you can see
all these things. And we go to Create New Project and we can
see here that we will have a new one which is this Blazor
Bindings template. You can see it has a little
New tag on it. So you can just click that MAUI Blazor Bindings
app. Click Next. So we got to name this. So let's name this...
MauiBlazor BindingsSample. So that's kind of
like the thing that I always use. You can find it in the
GitHub repository, on my GitHub account. A sample repository will be there with
all the stuff that I'm showing you today. And of course, as with anything, if
there's anything more that you want to see a little bit more in depth, let me
know down in the comments and I'll be sure to make a video on that. Now
hopefully I've talked long enough to actually generate this project. That's
what Visual Studio did here in the background. And let's
go to our Solution Explorer and we'll see something that looks familiar, but
also something doesn't look familiar. So we have our
platforms folder, right? So this is still what
you get from .NET MAUI as well. We have all of our platform
specific project, our Android, our metadata AndroidManifest. For iOS we have the
info.plist because that is needed to create a mobile app, right? So we have
all that. We can write platform specific code right in here. But for the rest
you would typically see XAML files and now we see Razor
files. So we have AppShell.razor. What's up with
that? And we have this little Shell, ShellContent.
We have the MainPage in here. So that's kind of like
following the same pattern as the default File, New .NET MAUI application. We have a
little AppShell which set up the MainPage right here. But
we also have the MainPage. So the actual main page. And this
looks different than the XAML pages, right? Because we have
this @ sign notation with which we register... If you've never
seen Blazor before, this is how you register the route to a page. So you can just register your routes
like this. And we're going to create a new
page in a little bit and you can just specify slash, whatever. And
that will be the URL, if you will, that you have to
navigate to, to get to that new page. So that's how Blazor works.
Now here we have this ContentPage, a ScrollView, a VerticalStackLayout,
all stuff that you know from .NET MAUI, right? And the syntax highlighting is a little bit
different. And what you can now do is here say, hey @if I can just write
an if statement here. @if (true), then we're going to do this
right? We're going to actually show this label and if
not, we're not going to show this label. So you can
just mix and match the markup with the logic here, if that's what
you want. You can of course also come up with different things, but
this is one thing that you can do right here. This is your Blazor syntax. So
that is really cool. You can also see this Padding. You can just create a
new thickness right here. That's what's happening here. This is a short
notation for new Thickness. And you can create it like that. So
you can just instantiate new objects from right here. Something that you
cannot do with XAML. Now if we scroll down here a little
bit, we can see here this button which has a text. And now again
this @ sign. This is really a key thing in Blazor.
The @ sign refers to the ButtonText and the ButtonText is a
string field which we have a button text. And
depending on the count which we have here, it's going to have a little switch
statement between if the value is zero, then it's going to say click me. If
it's one, it's going to say clicked one time and for all the other cases
it's going to say clicked count times, right. And we
have our button. Of course. Again, this is the same
pattern as we have for the default File, New .NET MAUI
application. It mimics the same functionality. Here we have this OnCounterClicked
which is referenced from here OnClick. And we do count++.
So we do that one and that automatically updates this.
So it has a way to automatically detect all the things that are going on here. No...
Well, it technically is data binding, but no data binding. No,
INotifyPropertyChanged. It will just pick up those changes automatically. We have this
image source right here, the .NET bot ImageSource. So we got that all
in place. So if I run this, it doesn't have the default style in
here that the .NET MAUI template has by default. So it's going to be a
little less purple. That's mainly what that means. But we
are going to see the exact same screen that we would have if you do a File,
New .NET MAUI application. I'm just going to run it on Windows because
this is not really a concept that eats into like the platform specific
stuff. If you have this working on Windows, it also runs on Android, iOS,
all the platforms that are supported by .NET MAUI. And you can see
this exact same thing. And if you do Click me, you can see this button
is clicking here and it's updating the actual caption here. So how
amazing is that? Now just to not show you this file new template
thing right here, I also want to show you a little bit deeper. But
again, if you want to know more about some concepts here, let me know
down in the comments. The one thing that I wanted to show you is how to do a
little bit of navigation just to get you started. So let's add a new
page right here. And in the Solution Explorer, I'm going to
right click on my project and I'm going to say Add, New Item. Now it comes up with
a Razor component which is technically
correct, but in the template I don't think there is a specific
.NET MAUI razor component right here. So let's just
call this, I don't know, SubscribePage. Maybe you have a YouTube channel that
you want to subscribe to So here we are and this is
going to add a regular razor component, right?
So this is going to be HTML which is something that's going to
blow up in runtime if we're not going to change this. So what I first want
to do is say @page and I'm going to do /subscribe. So
this is going to be the endpoint where I can reach my razor page. We'll
see that in a little bit. And then this has to be a page,
right? So let's do ContentPage. And in here I'm just going to do a
Label. You can see the IntelliSense works is
right here. It has all the properties, all the stuff we're .NET MAUI. I'm
going to say Text=" subscribe to my channel. Thank you." Maybe make the text a little bit
bigger. So FontSize, I can just set that to, I don't know, 50.
Let's make it something big. And we have a Label in a ContentPage.
If I wanted to, I could write a little code here. I'm
not going to do that right now. And if you want to navigate to this
page, let's go to my razor page for the main page. And I'm
just going to reuse this OnCounterClicked. And
what you want to do is inject. So the way that
dependency injection works for Blazor, again, you
can do this multiple ways but this is one of the ways you
can say @inject and I'm going to say @inject Navigation,
which is something that is automatically injected through
whenever we enable this Blazor binding stuff. And
this is then the name that you can reference it by. So this is the
type, this is the name of my variable that I'm going to use and
I'm going to use that down here in my OnCounterClicked
Navigation.NavigateToAsync or you can do pop or you can do
pop modal or pop doesn't make sense. Push is
what I was going to say. Then of course you can pop as well. So
we have all the things right here but you can also just do
NavigateToAsync. And here I can specify a couple of things, one
of which is the URL which is /subscribe. I can just say that and it will go to there. And I can also do
something with parameters. So add parameters in there so that you
can use those in your new page. But right now I'm just going to
go to my subscribe thing. Basically anything that you know from Blazor,
you can reuse that now. But now with .NET MAUI component. So Navigation
NavigateToAsync. Technically what you want to do is then here do async
Task, so that we don't do any funny stuff right
here. And then await this one so that our async/await is in check as
well. So we got all that. One thing that I do
wanted to show, which I skipped over is this inject navigation. Because if
you also inspect the MauiProgram.cs, this will mostly look the same as your
regular .NET MAUI application. But here we have
UseMauiApp which now has a BlazorBindingsApplication instead of
the regular app that you would see here for .NET
MAUI. And we have this UseMaui BlazorBindings which sets up all the
fundamentals for using these Blazor Bindings. And one of which is
registering this Navigation object here, so that you can use that
for navigation in your application. So, if I now run the Windows
application again, I'm going to see that button. And now whenever I
click that button, it should take me to this new page, which is very
simple. But this is how you can get started with the navigation in the
Blazor Bindings mobile app. And I see I have a typo here.
Subscribe to my channel. Thank you. I've navigated to a new
page and that is what the Blazor mobile bindings is for.
Options. I like options. So now you have three options. Regular
.NET MAUI, .NET MAUI Blazor Bindings or the Blazor Hybrid
There is something for everyone. Want to know more about any
of these? Let me know down in the comments. Thank you again so much for
watching. Please don't forget to like this video, subscribe to my channel. And
maybe while you're here, check out this playlist for more .NET MAUI content,
check out this recommended video which is recommended just for you.
Lovely viewer of this video and I will be seeing you for the next
one.
