In this video we're going to look at
the free DevExpress controls, which is a DataGrid, a Scheduler, a Calendar,
a Tab control, Popups, and much, much more. Let's
not waste any more time, but let's just dive in. In this video we're going to look at
the free controls by DevExpress that are available for .NET MAUI and
even still for Xamarin. And they are so good that it almost
feels illegal that you will get them for free. But don't worry, don't
worry, they're absolutely legal, I assure you. And only in this video,
and that's not even the complete set, we're going to see a DataGrid, a
Scheduler, a custom TabControl, all kinds of editors with
autocomplete and dropdown and probably some things that I'm
forgetting. And then I didn't even talk about the documentation yet, which is
really amazing. So we're going to see all of that and how to
get started in your own project. But before we go over to my screen
share, I want to be really transparent on how this came to be. That's
something that I find important because I'm not getting sponsored for this, right?
DevExpress did not ask me to make this video. They're not giving me any licenses.
They're not giving me anything to do this. I just started looking into it and I
liked what I see and I wanted to do a video on that to support this.
So maybe there's also going to be other stuff on Telerik and
SyncFusion and other partners of .NET MAUI, friends of .NET MAUI, but for
now, I'm doing it on DevExpress. And actually it's a funny
story how this came to be because the DevExpress people are apparently
watching this channel. Thank you so much for doing that. And they found this
video on the free data grid control, which is open source and out
there, which I really loved, and I love promoting those projects. And
they reached out to me and said like, hey, you mentioned in your video that
there are these vendors, right? Telerik,
SyncFusion, DevExpress, and they have paid
licenses and usually they have some kind of trial, obviously, or they have a
community license that you can use under certain terms. But
DevExpress said like, hey, we have a set of controls that you can use for
absolutely free! And I didn't believe them at first
because if there's free, there's some kind of catch and there is some small
print, I'll be honest, I'll show you that in a little bit. But I think it's
very generous still. So I'm going to show you in this video
how to get started, how to get this license, and how to add it to
your own project. Let's not delay any further and hop over to my screen.
Don't worry, don't panic. This is not the new look of Visual Studio.
This is Microsoft Edge. The browser. And I went to devexpress.com/maui
and here you will find all the information
about the .NET MAUI controls. So I'll just quickly scroll over it. You can see that DataGrid,
you can see the Collection View, the charts, all the controls that they
have that you can use for free. Bottom Sheet, Shimmer and they even
have their own project templates. So if you install a Visual Studio
extension, they have pre-built templates where they set up a couple of
DevExpress specific things for you. And you can use that if that's what you prefer,
over the vanilla .NET MAUI project templates from Visual Studio
if that's what you want, if you're going to use these controls. So if we scroll
all the way back up, then we have this big button Get It
Free. That sounds good, right? So I clicked it already. So I
can go here to this new tab and you can see
Xamarin and .NET MAUI controls. Free offer from DevExpress. Now this is where a
little bit of the fine print is, but don't worry, it's not too bad, I
think. So you can use these products, these
specific products, the DataGrid, Scheduler, Charts, Collection
View, data form, TabView, and a couple of bunch for Xamarin as
well between these versions. So between version 21 and 23. But I
think they pushed back these versions as well. So the range becomes
bigger as new controls, new versions are coming out. You can
use those for free forever if you claim them right now.
You have to create an account. That's how it usually goes with free
stuff. But it's not only just to get your details and mine those, but
it's also needed for the NuGet feed, the specific NuGet
feed that you need to get the packages for your account, right?
So create an account you can even not choose to not opt
into the promotional newsletter and news I would recommend that you
do, you will get automatically updated about the amazing thing that
DevExpress is up to for .NET MAUI. So just check that and you can
unsubscribe anytime you want. And then here is the real catch, right, this offer
expires on December 20, 2023. Now, this date has been pushed
back a couple of times. Not too long ago it
said June. Before that it said something else. I think they've
been pushing back this date for more than a year now. So you can use
it well actually you can claim these products
for a longer and longer time. So there's no guarantees. At some
point it's going to be a cut off and you have to go to pay for this
stuff. But if you claim it now, you can use it for those specific
versions. And that's also what it says here. There's more fine print here in
the end user license agreement. So make sure to read all of that and
how it applies to your specific situation and needs. But
for the rest, you can use it free of charge for as
long as you wish. So there's no support. If you want to have that,
then you're going to have to pay. I think that's fair. But
as is these controls that are out there right now, these
versions, you can use those for free forever if that's what you want. Right? So
that's there create an account. Do that. Whenever you do,
you will get an email, you get signed up and they will give
you instructions. And then at some point you will get to nuget.devexpress.com
where you can claim your NuGet feed. And
you'll have to add that to Visual Studio to actually get started. So obtain
feed URL and search for packages. So you'll get
to this, if you scroll down a little bit, you'll get your DevExpress NuGet
feed URL. So the way this works, you have an account and that gets you
a specialized, unique URL to get your NuGet packages
from. That's how they set up their licensing. So mine is
this very specific one: Get your own. Sorry, it's really weird
that it showed up this way. No, I obfuscated mine, obviously. This
is going to have some random string in here that you have to copy
and paste and get that into Visual Studio. If you're not sure
entirely how, set up Visual Studio's NuGet package manager right here under
the Getting Started. They will walk you through that. Get this URL in
there and you're good to go. Now, before we actually go and look at
code, I want to point out one more thing, is the documentation of
DevExpress. It is exceptionally good. So you go to
docs.devexpress.com, you will find all the other platforms as well. They have
a bunch of controls for all kinds of frameworks, which is really cool. But
you go to /MAUI and you will have all of this. You will have this Get
Started and you will have documentation for all the specific controls here. If
you scroll down, you will get all of this and you will find these pieces of
code in XAML. And what I really like is that from this XAML you can
see highlights here and that brings you to the API doc. So if I click on
this TextEdit, you get a pop up with what it is, what
namespace, what assembly, and if you click on it, you drill into the API
docs. You can see again what namespace, what assembly, you can see
what it inherits from. You can see all kinds of remarks like, hey, what are
the different components this text edit is built up on? And you can
get all this Getting started and all the properties and
whatnot this documentation is just I rarely see this level of
documentation, which is really good. That's
definitely going to help you. It definitely helped me. So go check that out. Now,
quickly, let's switch over to Visual Studio. So visual Studio here. I already
installed the NuGet packages so if I go to my project, right click manage
NuGet packages. You will see that under installed, I
already have the DevExpress. There are several for each
control. They divided it up a little bit. So I have the
controls, the data grid, the editors, the scheduler. I have a couple of
those installed already. There are actually updates. So you can see there's
updates. Since I did this, they're updating these packages still
for free, which is really amazing. So you can just get those. Then
whenever you've done that, you want to go to
your Maui program CS and do use DevExpress on your Maui App
builder, right? That's a pattern that we see
for most third party libraries, especially if they have visual
controls. This is used to wire up the renderers for all the controls. So we have that also very important
thing that you see here. While this tooltip is coming up, it's
not supported for Macatalyst and Windows. So this
right now at the time of recording focuses on
Android and iOS only. So the desktop controls, I don't know
if they're coming. You should find a roadmap DevExpress people. If you're
watching this, please send me a message. But for now it's Android and iOS only.
But that's fine. That's probably going to be the focus
for the most of you, right? So we have that use DevExpress. Okay,
that's all we need to do. Now you can go to your main page and start
consuming those controls. So you can see right off the bat, I added a
bunch of namespaces, right? So a bunch of namespaces, short
names for all these controls, the generic controls
one, the editor, one scheduler, data grid. You can
divide them and name them however you want. And here at the top level we have this
tab view. We have this custom tab view. You can just do control tab
view, tab view items and then for each one you have a tab
view item. Right? So let me actually just run this application
while we're looking at this so I can show you the visual representation
as well. And you can just do these tab views and I think they are
lazy loading by default. So it will get loaded whenever you go
to that page and not sooner. So that would enhance your startup
time because it's only loaded when needed. You can give it a header text
and all these things. I'm just going to show you a couple of
properties, but they have a ton of properties. You can see header content, header
font, family header icons, and you can give it icons, icon, position,
spacing. So there is all these properties that you can use to customize the look
and feel of your tabs right here. So if we look at the
running application right now, you can see I have this top tabs here in Android
and I can actually scroll through them, right? So I can swipe
and I can scroll whenever they go out of view here, then I can go to the
next one. And I think if I swipe here over the tab content as
well, I can just swipe to the next one like this as well. And
I'm actually giving you some spoilers right here of the things that I want to show
you. But you can see this tab control just is there. We have
this little highlight here at the bottom and then all these options to customize
the look and feel here. So I wrapped a couple of demos in these tabs just to
use the tab control as well. So here we just have I just took the
new .NET MAUI project template page and put that in
a tab. That's how easy you can do it. You can just build it
up right here, as it were, a normal page inside of a tab. You can
abstract this into a separate XAML file link that here.
That would work just as well. So we have this normal page,
then we have a couple of editors. So I have these editors right here.
Now I have this token edit which shows the little tokens, right,
like the little tags or whatever you want to call them, where you can add
like tags to I don't know, whatever you're building at that
time. And we have this autocomplete so I can start typing things and it will
start completing, it will start guessing whatever I have to do. So here again,
let's go to the next tab, the edits. And here the top one is
some kind of a drop down with these tokens. Now the emulator is
a little bit slow on my machine. Sorry for that. That's not
necessarily because these controls or anything is slow. It's just my machine
right here. So I set up some data for the code. Behind you
can see it all in the GitHub repository. It is linked to this
video. And you have these tokens, right? So whenever I click
them, you can see the tokens being added to this drop down. And whenever I want to
remove it, I remove it again. And there we are. Now we also have
this autocomplete one. So whenever I it's hooked up to the same item
source. So you can see the same options in here. Whenever I start
typing Gerald, you can see that it refreshes a little bit. And I can just do this
autocomplete thing, right? So I have that or I can say YouTube and click
that. I can actually clear it. I can probably play with the icons
right here. All kinds of options again to customize this.
And all you can see is a couple of lines of XAML. You can also do this in
code to actually bind this to an item source. And I want to
say, hey, item source provider because we have item source providers
to actually provide the autocomplete options here and you can put that in
there. Now, the really cool thing is we have some options here as well. So
what I can also say is say, hey, I want to have this delay. So
it's going to delay a little bit before actually getting the
autocomplete things. Or you can say, we have this threshold of the character count. So I
want to have at least three characters before it starts
searching. So if I apply that and run it again, it's going to wait until I
actually type three characters. So not every character is going to be
sent back to your server to actually get the results and then come back,
right? So that's a little bit too something to not hammer your
server too much or your back end, whatever that may be,
and actually have some little optimization here to only do it with three
characters. Whenever this comes back up, I'm going
to go back to the edits. And now whenever I do autocomplete, I'm going
to say GE for Gerald, nothing happens. And then whenever I
do the R, it's going to have that third option, and it's going to show me the
autocomplete here. And whenever I click it, it's going to show you the new
options. Calendar. Calendar is the next one. So we have this amazing
calendar. If I just go there and you can see it, it's like one line
editor, calendar, boom, max date, selected date. You can do all of that,
just one line. And I can go to the calendar. And whenever I have
this let's hide the keyboard here. You can see this full blown,
fully featured calendar. I probably can click on this, right? You can click on
the month, and you can select the month like this. And probably if I
click on the year, you can do the same thing with years. And if I go to
2021 September, I have September 10, which is my
birthday. So you can put it in your calendar and that's the
selected date, right? So you can do all of that. And I can select other ones
right here. And you probably also have options to multi, select and select
ranges and all that kind of stuff. And there's events for whenever
something gets selected. So you can build your own calendar app, right? With
this scheduler is the next one. Scheduler is always cool,
too. You have different views for the scheduler, right? So we have the work
week view, which is just the five days, Monday through Friday. And then we
have to specify some things here for the data storage to actually map
your own custom object to that appointment. Because an
appointment can be anything, right? They don't want to predefine
the appointments for you. So what we have here in the Solution Explorer, I
have this appointment object which has an ID, start time, end time,
subject label, ID, and location. This can be anything.
And you can map it to whatever the thing is that you want to do. And then I
think in the code behind here, I'm setting up a couple of
appointments, right? So I have this one appointment subscribe to Gerald,
really important one, don't forget, with a couple of things here. So I
have these appointments. I can just use data binding for that. So I'm just
saying, hey, appointment source is right here. And then I have these mappings,
right, so I can map it to whatever it is on my object. So maybe you don't have the power to customize
your own objects in C#. You can just map them here to these
DevExpress controls. And whenever you do, you all set this up. Then you can
go to the scheduler and you will get this amazing looking
scheduler out of the box. I didn't style anything here because
I'm not the greatest designer. You know that if you've been following this
channel and we have this great scheduler right here, you can scroll it. I can
scroll to other dates, to the sides you can see, you can go to all the
places right here. And I have this appointment to subscribe to
Gerald. But now for the I don't know, the masterpiece, the
data grid, right? That's the one that always everyone is asking for. So,
data grid. I borrowed the monkeys list from James
Montamagno. You might know him. And we have this
load monkeys, right? So I'm loading this from his CDN, his static list of
monkeys. I'm just getting that from the
Internet, loading that into my application. And I can show you that
as a data set. So whenever I do that, I go to this data grid and
you can see it's loaded. I have this list of baboons,
and you can see it here in the main page. It's just a
couple of lines of code. Again, data grid, view, item source,
and boom, we have monkeys. I can do all kinds of crazy monkey
business, pun intended, with these columns. An image column, a
text column. You can do mapping, you can block
sorting, you can block filtering, you can enable filtering. You can do
all these crazy things. But by just adding this, it already shows up
like this. We have the monkeys. We have three
columns. I can sort them like this, on location, on name,
and actually, you can do much, much more. So this is
just the view. What you can also do let's stop it for
a little bit, is on this data grid, I can say, hey, drag
and drop. You can drag and drop. Let's do the other one. Drag, drop, rows. Allow it. Yes, I want to allow the dragging and
dropping of rows. You can do that. And then, of course, there's events to
signal that. And you can persist the order of the rows, I could
imagine. And you can see all these kinds of
things. Allow group collects, allow initially selected row. Allow, sort allow.
There's so much stuff, too much to go over. So if there's
something more that you want to know, let me know down in the comments and
I'll figure it out. Another thing that you want to do is edit, right?
Editor showing editor show mode. So you can actually depend also on
like, hey, do you want to never edit or show mode on
double tap on one tap or tap on a selected row and let's do it on
double tap. So tap on selected row. I can imagine is I
didn't try it out, but I read the documentation is that whenever you
have to first tap to select the row and then whenever you tap it again,
then it's going to edit, right? So there's all kinds of modes that you can choose
from to make it connect with your user experience in your app. But
for now, I chose the double tab. So whenever I
go over to the data grid again and I see all my monkeys and I'm
like, wait, there is Xamarin monkey, right?
Is it here? Oh, it's not named Xamarin. All right, well, let's do this Mooch.
And I want to double click it. Now you can see I get this editor and
let's call it not Mooch, but let's call it Pooch, right? There
we go. It was Pooch all along. So now you can just edit this
stuff. And this is not persisted because this is just loaded from the Internet
and forgotten after this. But you have all the events, all the triggers to
actually persist this back to your back end and have this fully functional
data grid right here. Same with drag and drop. So I can just
long press this and now I can start dragging this and you can
see that I can drop it somewhere else so that it's somewhere else in this
thing, right? And you can block that if things are
filtered or sorted right here. So you have all these options, all
these controls with these very complete controls by DevExpress
completely for free. Don't tell me that you're not amazed
by all of this stuff because I was totally blown away by these very
complete and awesome controls. And then together with the
documentation, it should be a breeze to get this into your own .NET MAUI application. Let me
know down in the comments what you think. Are you already using it
and what projects you are building. And be sure to also check
out DevExpress YouTube channel, where none other than Carl Franklin that you
might know from the .NET Rocks show, does a lot of videos about .NET MAUI
as well. So definitely go check that out. Subscribe subscribe to this
channel, like this video, and I'll see you for the next one.
