Télerik, Tèlerik, Telerík? Doesn't
really matter how you pronounce it, they make
amazing controls for all kinds of UI frameworks, including .NET MAUI. Let's have a look. In a lot of my videos I talk about
controls and plugins that you can use inside of your .NET MAUI
project, which is really amazing because you get all the benefits of
other people's work. Basically that's all work that you
could have done yourself, but now someone else has done it for you. And you can
just plug that in your .NET MAUI application with just a few lines
of code. And a lot of the projects and controls that I highlight are
usually open-source and that typically also means that they are available for
free. And who doesn't like free? I do. And then you get to use them at
no cost inside of your own application. But there are also
the companies that partner with .NET MAUI and put out
their full control suites with all kinds of
amazing controls like DataGrids, PDF Viewer, all kinds of tools to export
to PDF or Excel, an image editor. We'll see a
couple of those in this video, which is really amazing. And think
about it this way, those controls are paid, but that will also give you a
little bit of guarantee on continuation. For example, Telerik been around
for a super long time, right? They have been doing stuff for, I think
WinForms, ASP.NET... Trigger warning! They have done stuff for
Silverlight. I think you can still get that. So that is really amazing. And you
will get support, you will get your bug fixes probably
addressed. And this company is going to be here
for a long while because they're actually making money off this stuff,
right? So they appreciate you as a customer, so there's definitely
benefits for that as well. And still the amount that you pay for it is much,
much less, trust me, than creating your own data grid. I
can guarantee you as much. What I always
find super important to highlight with these videos where there is a paid
company well behind it, because I want to tell you, is not behind it.
They're not sponsoring me, they're not paying me, they did not ask me to make
this video. They're not saying hey, don't show this, do show that. Full
disclosure, you might be wondering why I'm wearing a Christmas
sweater while it's summer outside and very hot at the time of recording.
Well, they did send me this amazing Christmas sweater a couple of years ago already,
so there's that. But now let's move on to the main
event and let's check out those awesome controls by Telerik. Before we go over
to the code, let's have a look at what the website has to offer. So
if you go to Telerik.com, you can find all the information about
everything that they do, of course. But if you go to telerik.com/maui-ui, you will get right to the .NET MAUI bits.
And here you can see of course free trial, buy now. I'm not going to
go into licensing or pricing or any of that. You are the
only one who can decide if this is worth it for you or not.
And of course the pricing may change over time. So I'm not going
to go into any of that. I'm not getting any license. Like I
didn't get sponsored, I didn't even get a license and that's not something
that I requested or that I want so that I can show you whatever you will
see as well. So I just downloaded this free trial and started
with that. So if you download it, I think you
have a couple of options to start here with. But I'll get to that in a
minute. So let's scroll down and we can see all the cool controls that
they have. A ListView, all kinds of charts, data grid, date,
picker, tab view. A customizable tab view is something
people always want. So in here you can click on the See full list of
controls. Of course the website can change over time if you're watching
this sometime in the future and you can see all the crazy controls that they have
right now and this is actively being developed, right? You can see a new
TreeView, an updated DataGrid. You have all these kinds of
things. Look at this one column of charts, all kinds of charts right
here. Buttons, editors, what else is always super
popular? A PDF viewer. Right. We're going to
see that in a little bit. A calendar. So we have all kinds of crazy cool
things here. So we've got that if you go to Docs and support
right here, they also have of course all kinds of documentation and
support for you to get started with this. So you can just start searching
here. They will have references for all controls. They will have sections on
how to get started. And that's what I just wanted to say a
little bit earlier. You can get started with MSIs or a PKG on macOS
and you will get installers and I think that will
install all kinds of stuff on your local machine like sample code, so
that's super helpful. But also the NuGet packages on your
local machine, that's what some people prefer. And some other stuff as well.
A very cool Visual Studio extension, we'll see that in a minute. But what I
like to do is just add the NuGet feed and get all the stuff
from there. So it all basically starts with you
creating an account. I'm sure you can figure that out
yourself. I'm not going to show you that but whenever you're logged in, that's
my next tab here you will find an account overview like this. So I have
a little bit of history here. I have some old expired licenses but
you will see all of this and you can go to
downloads and you can find here, you can find the .NET MAUI thing
right here. So we have that. And what you can do now is manage
NuGet keys. So maybe you need to enable something for the trial. I
don't actually know. So that your 30 days start counting. Maybe you need to
enable that and get your license right here. I don't remember doing that for my
account, but maybe you do. But I like to do it through NuGet. So
you can just go to Manage NuGet keys and you can get your keys
here. Now we'll see in a little bit how to set it up. But your
username is always going to be API key because you have to authorize and
I think that's also the way how they determine like hey, do you see only
the trial packages or the actual packages and you can generate this key, right?
So I'm just going to do this MAUI demo right here. Generate key and make sure to copy this one. So we've got that,
we'll see how to enter that in a little bit. There
is instructions in the documentation how to add a NuGet feed. It's super simple.
If you know the URL, I'll make sure that it's down in the video
description. So with that, let's hop over to Visual Studio where I created a new
.NET MAUI project. And this is just the default
template. I did a couple of things already. I set up that NuGet
feed. So to do that, let's go over to Tools. And then you have NuGet
Package Manager, Package Manager Settings and you have
Package Sources. So I have a bunch of them. But here at
the end you can see this Telerik one. https://nuget.telerik.com/v3/index.json I'll make sure to put the link
down there. You can just have that. Don't forget to click the update
button so that it really is stuck in here. You can click the plus one to
add a new source to do that. And now whenever, I'm not sure
if that happens whenever you add it as a source, but whenever you now go to
add the NuGet packages. So right click on your project Manage NuGet packages,
you can filter on the package source Telerik here and
you will get this authentication box right. So here we do api-key. That's
the same for everyone. And I'm going to paste my key in here, click OK. And
then I'm going to actually see all the packages
right here for Telerik. So you can see all kinds of stuff here, which I don't
even know what it is, but you can search for .NET MAUI and it
will bring you this .NET MAUI package. Everything in just one single package
that's there for you to use. So just install that and you should be
good to go. Now, as with a lot of the packages, you have to
initialize a little bit in your MauiProgram.cs. So go over to that and you
have to in your app builder, say UseTelerik(), use this namespace
right here. Telerik.Maui. Controls.Compatibility, hook that up
and you're ready to go with all these amazing controls. All right,
so we've got that all out of the way. Now, you might have
already noticed a little spoiler on the left right here which Telerik UI for
.NET MAUI Toolkit. And you can see all the controls here. Super,
super helpful. Because what I can do now is just
remove all of this from my default template. And what I can do
is scroll down here, get that tab view, just do that
over to my XAML view right here. Just
drag it in. And I have a tab view, complete with a little sample
code on how to use it. The basic usage is right here and you can start
using that now. That is super cool, super helpful. If
you want to get that install through the MSI that I just
mentioned. Or go to Extensions in Visual Studio, Manage Extensions
and make sure that you're selecting the Visual Studio
Marketplace here. And then you can search for Telerik.
They have a bunch of other extensions but the one that you want to have is this
progress Telerik UI for .NET MAUI extension, right? Five stars, five
votes. Make sure to vote if you like this thing, install that and
you will get this toolbox. And also a little menu in here that
says Telerik that points you to all the documentation reporting a bug,
request support, all that great stuff. So now I have this tab
view and let's see what other cool stuff we have here. So let's
start with a simple calendar right here. So let's drag a calendar in here and
let me see, let me find it here in the
toolbox. Super nice, super quick calendar. Boom. Put the calendar in
here and that is it. You just have a calendar and what's
really cool like it also imported this XML namespace right here. So typically you
have to figure that out yourself. It just adds that here inside of your content
page where you're using it so that you can start using your stuff right
here. Now the RAD thing is a little, I think quiz pop question, little
trivia, it stands for Rapid Application Development and
I think it has historical reasons that they start naming that with
everyone. Please Telerik, be in the comments and explain to us why
that is. But that's how they prefix kind of like all their controls and all
their things and of course you can just start typing your own, right? So if we
go with a second thing here and what do I want to do here?
Let's check out the accordion which is really cool. So if you do
telerik. Then you have all the other things here, right, that are in
that telerik namespace so I can do Accordion, AccordionItem, Item
Header or the RadAccordion. But I can also still just drag that
from here from the toolbox and I get a little bit of sample code right
here. So that is pretty amazing. So we now have an accordion, we have a calendar. What else are we
going to do? We're going to see a little image
editor. So an image editor is pretty cool. Let's remove the label
right here and let's check out that image editor. Boom, we
got an image editor and you can see, I'll of course
run this in a little bit and you can see how it all looks like. But
I'm just going through the code right now and all the controls that
are here an image editor. So we get a grid and then we have this
RadImageEditor which gets a reference. And then we have this
image editor toolbar, right? So it includes a toolbar that lets you do
operations on that image. You don't need to use it, you can
invoke all those operations from code if that's what you want. But you get this
toolbar included and it references kind of like that image editor so it knows
where to invoke all the operations and that's why it's set up here. So we
have of course a source. That's what we need. And we have the .NET Bot built-in in the default template, right? So let's
just use that. We're going to see that and let's just add another tab view item.
So I'm going to do telerik:TabViewItem and I'm going to add one last thing and I'm going to add the
PDF viewer, right? So we have a ton of good stuff. I can't go over all
of it. So let me know if there is one control that you want
to know more about. Let me know down in the questions before the trial
ends and then I'll make sure they make a follow up video
or answer you in the comments or maybe Telerik is in the comments as
well. PDF viewer. So we fix it that way. Okay, the PDF
viewer, we got that one and I got a little sample
URL. You can also see this is kind of like follows the same pattern
as that image editor. So we have again a grid so that it
nicely lays out. And then we have this PDF viewer
toolbar right for this PDF viewer. So it references it like this. And
then we have all the options. So you can leave options out if that's
what you want. We have the fit to width toolbar, the zoom in,
zoom out, navigate to previous page and next page. So you can leave
out buttons if that's what you want. And of course also we here have to
provide it with a PDF thing. So you can make that a local file or
you can make that a URL. So this is just some dummy thing that
I found right here. And you can start using that. Okay, I think we got a nice set of
things here. So let's just start running this on Windows. And you can
see that we will see this thing, how it looks
like on Windows because that's how .NET MAUI works, right? It translates
everything to how it should look like on the platform. There is a build
error here because in my code behind is referencing elements
in the default template that are not
available anymore. So let's just remove those and run it again. So we're going to see it
on Windows. We're going to see the tabs on Windows, right? And we're
going to see all those controls that I added there. And if I just run it on Android in a
little bit, you will see that it transforms all of that.
And it also works on Android. I actually didn't show you that on the
website, but on the overview of all the controls. Let me just while
we're waiting here, let me just hop over back to the website here. Here at
the top you can see supported for Windows, macOS, iOS and Android. So it supports all the platforms that
are supported by .NET MAUI as well, which is really cool. So not
just Android and iOS, which you see for a lot of the controls, open source
or not, that's usually the primary focus, but
for all the platforms out there. So that's really cool.
Okay. Back to Visual Studio. Our Windows machine is running. You will get this
little pop up if you're using the trial just so that you're not using this in
production. So we've got that and we have all the tabs
here, right? So tab, tab, tab, tab. And let's start here
with the calendar. You can see this is a crazy cool
calendar. You can, of course, put it in a little layout so that it probably
looks a little bit nicer, maybe. Or if you like big calendars,
then this is for you. But you got all this stuff built in,
so it highlights the day of today. You can just click on this month and
year view and you will zoom out. Zoom out so that you can select other
stuff right here. And if we zoom back into today, September, and you will get right here and you
can see this selecting thing going on. And I think this also all works with
Hot Reload. So if I go in here and say in that calendar,
like, hey, I want to set the selected date, and it has these
converters built in, right, so it doesn't have to be a daytime
object. I can just say 2023 September and let's make that 20 and save that. I think they should show up
right here. But it doesn't. Okay, so maybe that doesn't work
retake. So we don't have that. You'll see that
running in a little bit and another cool thing that you can do, it
can do loads of cool things, but another cool thing that you can do
is say like, hey, the selection mode, and we have a couple of those. You can
select multiple so you can select multiple dates or you can select a
range, right, that usually makes sense in a calendar as well. So you can
select a range and let's see if it takes that one. So if I do this one
and then that one no, it doesn't really take like this.
Okay, so we'll try the Hot Reload in a second here. Maybe if I click the
button, it says no changes found. Okay, we'll fix that in
a little bit, doesn't matter. So what else did we have? The accordion.
Right, so the accordion is kind of like an expander. I think we have a separate
expander as well. But we have this accordion view, right, where you can
have these little headers and then some content inside of that so that will
help you lay out all the things as well. And I think this one looks
pretty consistent across platforms as well, so maybe I think they're drawing some
controls as well with skia. So we've got this control now, the
image editor, this one is super, super cool. We see the Netbot
here, right? So I'm on desktop right now, so I can just use my mouse
wheel to zoom in and zoom out if you're on mobile. And maybe if
you have a touch enabled desktop as well, you can just pinch and pan to
zoom as well. You can use the buttons here in the
toolbar that we've just seen or you can set this zoom to fit an actual
size. You can have all these things. You can flip horizontal,
vertically, you can undo and redo all those things just built
in and what's super cool, you can crop it. So if you want to
have something like an avatar profile image view, then you
can just say, hey, I want to have this square thing and sorry, the
circle thing, because that's what all the profile images do, right? And you can just say, okay, and now we
are clipped to this circle thing and you can drag it around in
there. You can rotate a little bit manually and you can do all kinds of
filters here. So you can play with the U, you can play with the
Saturation, you can play with the brightness, the blur. If you want to see the blur,
we have to bring the brightness down a little bit. So you can play
with the blur or sharpen, and you can apply all of that to this image.
Crazy cool. Just built into this little control suite. That's
by telerik. Okay. PDF viewer. Always super popular
as well, PDF, I think it's a licensed technology, so
I think that's why it's always super hard, maybe even expensive. The format
isn't really nice to work with. So that's why there
aren't many, if any, free PDF viewers out there.
But Telerik has one, not for free, but it has one for
you to use. And this is a very simple PDF dummy file. This
is just the one that I found on the Internet, but you can zoom in,
zoom out, make it fit to the size here. And if there
were multiple pages, there are no multiple pages in
this PDF file. You can just use these buttons right here to navigate up and
down through all the pages. And I'm sure that there is more
functionality built in here for you to use. Now, if I switch over to
Android, so I just stop this one, then we can also see the
changes here that I made to this calendar thing. So let's just switch
over to Android right here, select the emulator, switch over to
that. It's going to build for Android. It's going to bring up
the emulator, and it's going to show me the exact same stuff, but now
how it's supposed to look like on Android. Okay, the application is
coming up so we can finally inspect all this
telerik goodness on an Android device. And of
course, this also runs on iOS. I just haven't hooked that up to my
demo machine right here. So let's load this up. Here we go
again. The pop up for the trial. That makes sense.
And now we can see the same kind of calendar, right? I must have
messed up something with the date. I don't know what it is
because it's not selected as I was expecting here. But you can see that
it does do the selection with the range now, right? So I can select
one date and then the other one, and it selects a full range. So we've
got that going on. And again, if you do all this thing,
you can zoom out to the years, do all of that, navigate through these
years. You can do this minimum date, maximum date.
You have all the control to create a fully featured calendar
application yourself. You don't need to worry about creating
this control. Super powerful, this accordion. Like I said, it looks
and feels pretty much the same over platforms from what
I've seen. And it's a very custom control, right?
This is not something that you typically see on the platform, specific devices.
So there is this for you to use. The Image Editor. Like
again, you can see the toolbar is a little bit shorter. It's a little
bit different, but you can do this. I'm not sure what the shortcut key is
here for pinching and that kind of stuff. Is it this
one? I don't know. I'm just pressing keys now. I don't know what it is. So
you have to trust me. It works. And you can still do all of
these filters, all of these things, right? But it's made a little bit more
mobile friendly for you to actually use. Instead of having
those little pop ups in there, you can just cancel whatever changes you're
doing here. So you have all the power here at the tip of your finger
now on this Android device. And the same thing for this PDF viewer, right?
It's just loaded already into memory. You can zoom. You can do this. You can
do all kinds of crazy stuff. And that's how cool the controls are
in this Telerik control suite. As you can maybe tell, I got
carried away here a little bit because this video is a little bit longer
you're used to from me. So let's just wrap up quickly. Let me know down in
the comments what is your favorite control? What control do you want to
learn more about? What more? Okay. Like this video, subscribe to my
channel and just go here to the next video, and I'll see you
there's.
