CARL FRANKLINE: Hi, I'm Carl Franklin.
You might know me from Blazor Train,
or The.Net Show, or even before that from.Net Rocks.
I'm here with Don Wibier
from DevExpress. How are you doing, buddy?
DON WIBIER: Very good Carl. Very good.
CARL FRANKLINE: I wish I was at
Build and wait a minute,
maybe I'm at Build.
I don't actually know if I'm there or not,
but we are here and we're going to talk about taking
a Blazor app and migrating that or
using Blazor components in a Maui app.
Blazor goes everywhere and it even goes into a Maui app.
You can build Maui apps with XAML,
or you can build Maui apps with
Blazor and you get all the benefits
of the Blazor component model like
the easy binding and all that stuff.
XAML is a little trickier,
but here's one caveat that I learned.
You can't on the same page combine XAML controls and
Blazor controls because they
are two totally different systems,
but you can have XAML pages and Blazor pages,
and you can navigate back and forth between them.
This is all stuff that I talked about on The.Net Show.
But you have a demo here, a Blazor application,
and you're going to show us how it works,
and then we're going to see it in use in a Maui app.
Tell me what we're looking at here.
DON WIBIER: Yeah, absolutely Carl.
We have obviously a set of
very nice Blazor controls
but we also have a set of Maui controls.
I'm going to show you how you
have a Maui application and how you can
incorporate your existing application
which you build on Blazor into this Maui application.
It's absolutely cool.
It will save you a ton of work.
CARL FRANKLINE: Sure.
DON WIBIER: Yeah,
let's have a quick look.
I have set up a small Blazor server application here.
Let me quickly run it.
We'll have an idea of what we're looking at,
and here it is.
What you see here is
a page that holds our DevExpress data grids.
We have some grouping enables
and it shows a list of issues.
CARL FRANKLINE: Very nice.
DON WIBIER: In this case, we
have a click mechanism
that once you click on one of the items,
to go to another view and you can see
the details of this particular issue
and here we can go back.
CARL FRANKLINE: Okay.
DON WIBIER: Yeah, so
then we have a couple of
things which are out of the box in the Blazor data grids.
Well, let me find one.
CARL FRANKLINE: Make sure that you picked
one where those things are little.
DON WIBIER: Yeah.
CARL FRANKLINE: Prior we go.
DON WIBIER: This works out of
the box here by just enabling it.
What we also did is that we have
a grid which has a number of columns.
You can actually customize that and show
or hide columns or change the order.
CARL FRANKLINE: Nice.
DON WIBIER: This is
all standard behavior.
I won't go over too
much into detail over how we set this up but
there are a couple of things that
are important to mention
and that's why we're going back to Visual Studio.
As you can see, we have the server application and I
also have a shared project.
The shared project is actually a razor class library.
Because what we did is,
and that is something that you can also do with
an existing Blazor application.
You can move your components out of
the application project and move it into a class library.
Because what we did is very simple,
we have a grid control,
and that determines whether to show
the grid details or the grid list.
These controls are also in here.
The list is holding the grids,
I had a DevExpress data grid
with all the settings and everything in there.
A couple of things are interesting to mention,
but you will see that once we
import this into the Maui app,
yes, it's a typical and invisible component
basically a Blazor component which allows us
to bind certain breakpoints off the device to a property.
CARL FRANKLINE: Nice.
DON WIBIER: What this
basically does is that
whenever the browser that runs
the application has a max with 400 then
it's going to toggle a small device property to true.
CARL FRANKLINE: Nice.
DON WIBIER: This is typically a bit
bootstrap-ish but we can do a bit more with this.
If the minimum width is 401,
then this property is going to be true.
CARL FRANKLINE: Nice.
DON WIBIER: These properties are
just down below here.
Here we have the Boolean small and large.
Now, we can use these properties to
the visible properties of certain columns in the grid.
What you see is that if we are
looking by default on a large device,
this column, the fixed date will be visible.
While if we're on a small device,
this will be false and this column will automatically be
hidden because of those break points.
This is the typical-merged trick
and specifically for grids,
and we're going to run it on
a mobile phone so
that it's like a bit of a smaller screen,
so we want to not outline all the information.
CARL FRANKLINE: Yeah, exactly, only
specific properties or specific columns.
DON WIBIER: Exactly.
With these breakpoints,
it's very easy to set that up.
But the main point,
if you want to migrate into the Maui app,
you'll have to make sure that you have your components
set up in a way that they can
be put into a class library.
What we also did in the class library is
our data which shows the issues and the users,
etc but that's beyond the scope of this demo.
This is typically what's been done.
What leaves us then in the Blazor application well,
if I go to the pages and I go to the grid page,
the only thing that we have here is
the grids which was in the Cloud standard.
CARL FRANKLINE: So that's
a grid Razor component
or Blazor component.
DON WIBIER: Yeah, exactly.
We have put all the components into this library.
How can we get this into the MAUI app?
Well, for that, I have already prepared
a Maui application which is also in the solution,
and it has a couple of pages,
and it's got a couple of things here.
What I did, I created
a Hybrid Blazor Maui application
that is a project template that comfort
Visual Studio and that allows us to run
Maui controls as well as Blazor controls.
If we're
going to take a look at
the program she asked and we'll
see that we have added some stuff here.
We are using the DevExpress controls.
We use a couple of other things which
are interest here, the MauiBlazorWebView,
obviously because this makes sure that we're able to
host those Blazor pages
inside the MAUI app in the web view.
CARL FRANKLINE: Basically, you still have
a main XAML page but
the only thing in there is this web view,
which is a very lightweight web control.
That's exactly what you need in order
to show Blazor content.
DON WIBIER: Exactly. That's also
the reason why you should go for
the Blazor MAUI hybrid projects
because it sets it up altogether for you.
What we also did in this demo is
we have created a couple of MAUI views.
CARL FRANKLINE: Or pages.
DON WIBIER: MAUI pages basically.
Obviously, a best practice with MAUI you
see MVVM design patterns.
We have a couple of few models here as well.
CARL FRANKLINE: I should note that that's
really necessary for
XAML pages which you are
combining XAML pages and Blazor pages.
The XAML pages have the MVVM and the ViewModels,
but the Blazor pages don't.
DON WIBIER: They don't need it.
Not exactly.
This ViewModels, they come with the MAUI views.
As you can see,
we have a folder pages where we can
put in Blazor pages basically.
If we go to this one,
you'll just have a regular Blazor code.
What I also did is obviously I put
a reference after class library
to introduce MAUI application.
We'll have access to everything that
comes in the Blazor class library.
CARL FRANKLINE: Nice.
DON WIBIER: Let's take a look
at what we already have running now.
You have an idea how our existing MAUI app looks.
Did I mention that we put some
DevExpress MAUI controls in this app as well?
Let me reload it.
Here you see our MAUI app.
It does not include the grids yet,
but we're going to do that in a minute.
Let me log in.
CARL FRANKLINE: By the way,
this app is a public repo.
You can just go download it and use it.
DON WIBIER: No problem. This is
one of our controls that is just
displaying these blog posts.
These are also DevExpress MAUI controls.
If I go to the analytics,
what you'll see here is that we already
have chart for MAUI available as well.
These are native MAUI controls in a native MAUI view.
CARL FRANKLINE: This is XAML.
DON WIBIER: This is absolute XAML.
You can also see it right here in the MAUI view.
We have the PageViewAreaChart,
we have the ChannelsDonutView.
This is all the stuff.
What we're looking at right now.
CARL FRANKLINE: Nice.
DON WIBIER: If I will go to the tasks.
This is actually hosting that GridPage.razor.
It doesn't have anything yet,
but you can see that as well and
the code there is nothing in there yet.
If we want to load in that functionality,
it is really a matter of including that grid control,
which is coming out of the Blazor class library.
Because that control is basically self-containing,
so it has everything it needs to display the data,
I get the data, etc.
This is all we need.
If I would rerun the application,
let's quickly do that.
Then we're going to log in again.
Here we have the native MAUI XAML.
Now will be loading our grid.
CARL FRANKLINE: Nice.
DON WIBIER: As you can see,
remember that I talked about
those breakpoints, the breakpoint control.
As you can see, we only have two columns here now.
That is because we have coded
that functionality already in the grid Blazor control.
CARL FRANKLINE: Very cool. It has
all the other features that
it had in the desktop version.
DON WIBIER: For sure. You can
filter on one of those guys.
Let me see that we pick one that is actually in the list.
I see.
CARL FRANKLINE: Mike Rollers there.
DON WIBIER: Rollers there.
You see this is just
working exactly the same as it did on the Blazor page.
CARL FRANKLINE: I need to
just point out and
reiterate here what you're looking at.
You are looking at
the same Blazor control
that was running in the browser on the desktop.
This isn't an interface-compatible MAUI control.
DON WIBIER: No.
CARL FRANKLINE: You're using the same control.
It's the same code.
Just running on a MAUI app,
on an Android phone or whatever.
That is really, really exciting.
DON WIBIER: It is. What we
also did maybe you remember that
on the Blazor app we had on top of the grid,
we had this column chooser.
But because we have
these responsive features that
just work in MAUI as well as you can see,
we now have that button here.
Now we get a column chooser, again,
but now it is totally
geared toward a mobile phone in this case.
CARL FRANKLINE: It's a responsive.
DON WIBIER: Exactly. Now I
can actually say,
I want to get rid of the assignee.
I want to put the status in.
Maybe I want to have something else.
Well, but still everything works as expected
but because it's responsive, it's displayed differently.
CARL FRANKLINE: Don, this is great stuff.
I can't think of any questions,
but because it's just IJW technology,
the MAUI team has done a great job of
letting us use Blazor
everywhere and now it's no exception.
It's funny right after we're done with this recording,
I'm going to be doing a demo for a user group,
showing them how to write a WPF app
with Blazor. Isn't that crazy?
DON WIBIER: Yeah. That is totally cool.
CARL FRANKLINE: Well, Don this is great
and thanks a lot.
Where can we get this?
We show the URL here on the screen somewhere?
DON WIBIER: We're going to
put this on GitHub
and you can just download it.
Make sure that you install our components as well.
You can test them out for 30 days and even
use our unmatched technical support for any questions.
CARL FRANKLINE: I agree with that.
It's great.
Thank you Don. Everybody out
there have a great time at build.
DON WIBIER: Absolutely.