Do you remember that Material design
thing and wish you could have that in .NET MAUI? Or maybe you need a custom
TabView or a BottomSheet or some blurs or even a TreeView
control? Well this control suite has all of
that and more. It's free and open source. It's UraniumUI. So
let's go check it out! On this channel. I talk about controls
and plugins and control suites for .NET MAUI all the time and this is one that I
recently discovered. It's called UraniumUI and it's free, it's open source so
it has all the good stuff. It's available
for you right now. Today. It already has seen a lot of development actually,
and it's available on all the platforms that are supported by .NET
MAUI as well. iOS, Android, macOS, windows and even
Tizen. It brings in a couple of new controls.
It has like a tree view which is pretty cool. It has a bottom sheet,
some other things, we'll see that in a little bit. But
what most of you are probably also interested in is it has the Material
design. Optionally, if you don't want to use
that you totally can. But the Material UI design, you might still know it from
Google, they still use it on their Android devices. But the
Material design is something that we had for Xamarin and now with this control
suite it's also coming back to all the other platforms, iOS, even
Windows. You can use UraniumUI to implement the Material
design in your application. Let's just not waste any
more words and time here, let's just go check it out on my screen. Before we
dive straight into Visual Studio and the code, let's have a look at the
GitHub repository right here. This is driven, maintained
by one person mostly, which is called Enis. And I'm sorry,
I'm not even going to try with your last name, but Enis, thank you so much
for doing this and making the .NET MAUI ecosystem a better place. If
you're watching this, it's open source. Please consider contributing in any
way you can. Open a pull request, sponsor him for a little bit, but at
the very, very least star this repository. You can do it here in
the top right, star a repository and show your support for Enis and his
wonderful work so you can find all the information here. It
has this nice style and it has its very own logo which is
super cool. You can see all the stats. Enis has created videos as
well. He has documentation, we'll go into that in a
minute. But he has these videos to get you started as well right here
so I'll link to that in the video description. But besides all
the controls and all the things in here, there's also startup
templates. So you can also install templates in Visual Studio and you can do File,
New UraniumUI application and it will have all the NuGet
packages already set up for you. Your MauiProgram is already in place. I'm going
to show you this from a new .NET MAUI project. So how to install it
on that, but you can also use the templates that are available
here. Light mode, dark mode support, all the platforms for .NET
MAUI are supported. It has support for dialogues for Mopups
and the Community Toolkit one, validations. It has so much I'm going to
show you the base a day how to get started with UraniumUI. But if
you see something in here that you want to see in a little
bit more detail, please let me know down in the comments and I'll
make a follow up video on that. Okay, so let's scroll back up here a
little bit. We have this GitHub repository but also we have the documentation so
we have pretty extensive documentation. It doesn't
look right because I zoomed in a whole lot here, but a very extensive
documentation on how to get started with all of this. You
can see the core, the dialogues, the icons, the styling, the effects
material migration guide. Oh my gosh, there is so much here. But let's
have a look at the getting started because that is kind of interesting.
It also explains like hey for the existing project, for new projects you can see
how to install that UraniumUI template that I just
mentioned. But I'm going to show you this with a new .NET MAUI template. So I'm just going to scroll back here
with the existing project. It's what Enis calls this. But I just
whipped up Visual Studio. I created a new .NET
MAUI project right here. This is just the vanilla
project. If I run this on my Windows machine you'll see the new .NET 8
template coming up with the race car and it just increments with
this button. So that's it right? Just a new project. And let's
get started with actually what's here in this getting started
guide. So what you can do is dotnet add package UraniumUI.Material. I
like my UI for this. So I'm just going to
go to Visual Studio and I'm going to go into the Solution
Explorer, Right-Click and do Manage NuGet Packages. So then
I'm going to browse and do the name in here. UraniumUI.Material. If you don't want to use Material
that's perfectly fine. You don't have to install the Material package but if
you want to use it just use this one and then the just vanilla UraniumUI package will automatically be brought
in as a dependency. So I'm going to install that. The latest
version at this time is 2.7.3. You can see it brings in a couple of
things right here which is totally fine and it should be installed in a second. Now when you have that you
want to set up a little thing in your MauiProgram. So
let's go into the Solution Explorer again. Go to your MauiProgram.cs and
you probably here as a first in the top you want to
add this: using for UraniumUI.
IntelliSense is already helping me and now we have to
set up our builder for UseMauiApp but also we have to
do UseUraniumUI(). So we have that and we
also want to use Material. So we also want to do
UseUraniumUIMaterial(). So there we go and save that and we're
all good to go. Now by default this is not going to
trigger all kinds of things and you're done now that's not how it works
unfortunately. But let's check the documentation because it's very very
clear and you can mostly copy and paste this which is something I like.
So we've done this MauiProgram, UseUraniumUI() and what you then want to
do is kind of like apply the styling so that you
will have that Material stuff in here. So what we can do is define
the following XML namespace so we can do xmlns:material and you have to do this in your App.xaml. So
we're going to do the styling right there. This is typically where
you set up all your styling and your dictionaries. So let's go to our app
XAML and you can see that it also already has this default
stuff in here. We're going to add this XML namespace,
xmlns:material and also for UraniumUI. Enis set up this nice custom URL
thing so that it's kind of like easy and you have all the
things in one instead of separate namespaces, all kinds of XAML magic
that you don't need to care about. Okay, so with this in place we want to
do a couple of things. You can do a couple of things. You
have a lot of flexibility there. Again, this is all in the
documentation but we have this resource dictionary for app colors which is just the
default colors that are inside of your default .NET MAUI template. And
the styles, we saw that but we're going to give this a little x:Name. You can
see that so we can reference those. This is actually set up pretty
smart if you ask me. So we have those, this is just
exactly the same but with the x:Names. But I'm going to replace them
like this. You can see it's almost the same, right? So we have this in place
and then you can add this material style resource and it
says colors override and you can say based on these styles right here. So this kind of like
overrides only the things but uses the colors that you might have already
in place in those resource dictionaries that I just showed you. So you might
have already customized this. This is a new .NET MAUI project. But if you have
an existing project with existing colors and that kind of stuff you can
override it very easily like this. If you don't do this, it will use a
implemented style with UraniumUI, green and all kinds of colors that are
set up for you also very cool. But you're probably going to want to
customize this with your own colors in your own application. Now with this in
place, let's see if the documentation tells us anything else. No, optionally
you can install this font library and now we should be good to go. So
let's just see if this actually does anything for us already.
So let's go in this Windows machine. Let's deploy our application again.
Now with the UraniumUI package installed we have this new styles
already set up. Let's see if we already notice kind of like a
difference here. And it might not be very clear right off the bat but we'll
take it a little step further. You can see the background went gray
so maybe that's something. Otherwise there's not much difference to see
right now. Okay, so let's take it a step further. We're going to go
to the main page and what we're going to do is also add that same
namespace kind of here, xmlns. Let's make it a little shorter. You can make that name
whatever you want, right? That's just the identifier that we're going to
use. And then we're going to search for UraniumUI and let's take the material one. Okay, so actually you should be
able to use that URL, right? So let's just take this one
again. Take the URL here. That's much, much nicer. So we know we
have everything. Okay, so we have that url.
And I think what you actually need to do for that styling to also
pick up is you need to actually use the UraniumUI control. So what we
can do now is here, have that ur, and you can see all the
controls in here we have autocomplete TextField. Pretty cool. A checkbox, a
chip, all these kinds of things. Let's go
with a simple text field for now. So we have this simple text field and
let's make that a title. So the property names are a little bit
different than the property names of the default .NET MAUI controls. So
let's give this a title. Please enter your value. So let's have that. And let's put a ur:CheckBox in here, which is also very cool. Do
we do this? A title? No, this is the text. So here
we have this text. And maybe this checkbox can do
something like hey, have you subscribed to subscribe to my channel yet? If not, this is a nice time to do that. Go subscribe to
my channel down below right now. Okay, so if we run
this again and this is on Windows, right.
Material typically is implemented on Android, but now we're running on Windows and
you can see this text field looks like Material. And if I
click it, this is really cool. If I click it, if I focus
it, you can see that it goes here to the top, becomes a little
bit smaller and you don't lose that title thingy. So that is really cool.
So you can see it nicely animates here too. And I can put
in my value right there. So that's cool.
Also this checkbox, very Materially styled. You can see it has this
material style. It uses the colors that are already here. Like this
purple thing, right? Like if you do that, we can do this purple thing.
Let's see if I can offscript, you should never go off script, but
let's see if I can remove that color override and see if that happens. If I just, well, just only the colors.
Let's see if that does it. If we can get that UraniumUI green to
show right here how it would be out of the box. So you
know that if it shows up, see? So now it's all kind of like that
green highlight. And you can see it's the default implemented style
from UraniumUI. But if you just plug in your colors
right here, there's probably some convention that you should use. So the
names get overridden correctly. You will get your own colors right
here. Now if I switch this over to Android and I'm going to go into
the next phase right here, then you can see this, of course, it's
.NET MAUI. This is the power of .NET MAUI. It runs the same way on
Android as well and it has this consistent look and
feel because we're using the Material design across these two platforms so
it should look and feel the exact same. And the Android
emulator is coming up so we should see our deployed
application in a second here. And you can already see I have a
little UraniumUI icon right there because in the UraniumUI repository we also have this sample right here which is the demo/UraniumApp
and I've deployed that to the emulator as well. And it has
all the functionality that is available in the
UraniumUI framework. So that's really cool.
We're going to look at that so you get a taste for what is all in there. So
let's have a look. Oh, here's our application which is
deployed and we have. Please enter your value. Right that's still the same.
And if I go in here you can see that small little title thingy going
on again. So if I get rid of the keyboard my
emulator is a little bit slow. I can see if I can lose the focus
again. If you lose the focus here then it will go back, right? It's
a little bit hard because I don't have much focusable controls right
here. But you can see that it behaves and looks and feels the
same as on Windows. Right? So that is really really cool.
And this would be the same on iOS as well. So there you have it. Now
let's switch over to that UraniumUI application
actually. So let's stop running this one and I'm going to
switch over to the app. I'm not going to build that from
scratch. It's just deployed to my emulator. It's the exact same one that you can
find on the repository. I close the repository and you can see
the deployed app right here. So we've got this and this text should
be selectable. So this is already like on the home page. Boom.
We've got this label with selectable text which is really cool,
right? This is something that you should be able to do on all the platforms as
well. It's just a read only label but you can also select it.
Super cool, super small thing, but super cool that it's
implemented. We have this flyout menu and you can see all the
features here. ExpanderView. You might also know that from the .NET
MAUI Community Toolkit. We have buttons, checkboxes, radio buttons, text field,
editor views, autocomplete text field. There's all this kind of stuff here.
So bottom sheet which is really cool. I always love a good bottom sheet. And
you can also see the properties here. So if I click the is presented,
you can see it's data bound, right? So it will just pop up from
there. You can see, you can put a list in here, scrollable content. I
can swipe it down again and it's gone. I can click on this and it will come
back up. So this is really amazing stuff. If you want to go a
little step further you totally can. Bottom sheet expanding and you can see
that it can have this rich context. This is
kind of like mimicking an audio file that's playing in the
background. Tell it to my heart, sounds like a great song and you can
open it and you have this song queue and you can click
on another thing and it will actually start playing that.
This is just a demo. Of course it's not actually functional, but you can see
the cool stuff that you can actually implement with this control suite. So
what else do we do? A tab view, right? That's always
cool. A customizable tab view. You can style the tabs any way
you want and it has that material look and feel right out of the box as
well. You can also of course have them in your full
screen down here, which is really really cool. The TreeView. A lot of people have
asked me for a tree view. Personally I don't think a TreeView
belongs on a mobile device, but I'm not here to build your app. If
you want a TreeView inside of your app, you can totally do this
with this control suite. You can see this is mimicking a file
system. You can expand things, you can add icons to it, you can select them.
So this is really cool stuff. Now what else, what else? Even this one blew my mind.
This was really cool. It implements like Google
AutoComplete. I'm not sure if this is like a control or this just uses that
AutoComplete field that we just saw. But if you're going to look for
UraniumUI, this is oh well, Uri Geller... Uranium and Urinal. Oh my gosh, this is totally...
Okay. Don't go off script. So it autocompletes from
Google, right? So it gets this Google AutoComplete values and
you can use that inside of your application which
is really really cool. So as you can see, lots of cool stuff
in here. And that is how to get started with UraniumUI. I
already mentioned like if you see something that is triggering you,
if you want to know more about a certain feature, the bottom sheet or the data
grid, I didn't even show that one or the tree view? Please let me
know down in the comments and I'll see if I can make a follow up video on
that one. But this is a pretty cool and extensive control
suite, so please let me know your thoughts. Have you been using it
already? Did you know about this? Just share it in the comments and I'll be
responding there. Thank you so much for joining me for
another video. Let me know what you want to see. Please like this video.
Subscribe to my channel if you haven't done so. Also in 2024, that's
something that we still will need to do. And check out this next video, which
is recommended just for you, and I'll see you there!
