Getting Started with UraniumUI on .NET MAUI

hello my name is Enis and I'll guide you getting started to uranium UI so let's get started uh before we go uh we we will navigate to getting started documentation here we can say there's two way to get started with uranium UI the first way is existing project the second way is and much more easier one is new project uh uranium UI provides a couple of templates so you can create a new projects with uranium you preinstalled so this is the easiest one and I'll show you how to add it to your existing projects so in this section uh so that means I need an existing project so let's get started and I create a new Maui application tempates are loading yeah new my application awesome app this will be my aome app app it will be long-term support with net 8 now I have an existing Mai application okay it will uh restore the packages that's okay the second step is adding related material uh related uranium material package here so you can add this package with command line or you can use uh your Visual Studio package manager tool so I will do that I right CL click my application and choose manage nuget packages here in this window I'll navigate to Bros Tab and I'll search for Uranium UI uh you can see a couple of packages here uh the package we will add here which is material UI do uranium ui. material package here the uranium Y is the core package and it has limited component in it the most of components are located in material package so I will install this package to my application also this package has a reference to uranium UI so that means the uranium package will be shipped to your application too okay it's installed I'll build my application first I want to make sure all the packages are restored while doing it I'll now get back to documentation and the next step is going my program.cs file and add this uh lines of codes so let's navate to my program.cs file and here you can see there's a builder here and it uh calls use my app I will chain this uh method and call use I'm waiting maybe restoration progress continues yeah you can see use uranium UI and use uranium UI material here you have to call those lines of codes uh my visual studio added automatically this name space uh if this name space isn't added by default you can add it manually using uranium UI so after that you are ready to use components from uranium UI but uh there is another step to do that uh which is adding material styles to your application so this is not mandatory but it really helps to customize colors and styles in your application so to do that I will navigate to app XML app ZL file which is located in the root of my project here this is the app ZL file so I'll add a namespace of material here I'll call it material and call this namespace the visual automatically finds it but if it doesn't work for you or you use any other editor you can find that namespace from the documentation which is here I'll make it bigger but it doesn't help okay which is at here you can copy here and paste in your application here sorry I forgot the code here okay now you can add this style from Material namespace after doing that everything will work but you may want to use the same colors from your app with material components so we need to pass colors overwrite as our colors file so to do that I'll set a name to my colors which is let's say this is app colors and pass it here as reference app colors after doing that the material components material style will use your existing colors from this file this file is located under your project under your ma project which is resources Style and style Z page sorry color Z page you can see there is predefined colors and uranium UI will use these colors now let's use some components in our page I will navigate to main page zaml page I'll add same name space here and use some components from UR let's call our namespace and let's add a checkbox from uranium UI what can we add more I'll take a look at uh let's say yeah input might be better yeah let's say a text field here text field from uranium UI I'll run my application uh let's go with my emulator here by the way you can find uh the documentation for each element in the documentation under material item here you can see I added a text field you can see what properties can you use with text field with text field you can see title is one of the properties or you can use icon or you can use uh font images for icons you can use accent color you can use allow clear you can use attachments you can use pwor show high attachment like that so you can see you have to visit the documentation to learn how to use components properly it is suggested or you can learn uh by trying you can see uh I have a checkbox here which is purple which is same color with your application and when I focus this uh text field you can see it is uh Maui purple right now so uh if you don't use this colors overwrite parameter they will be green uranium UI green so that's why you have to to do that because otherwise you will customize for each manually if you want to use different colors you can see this is green right now and when I focus it it is green so that makes your colors common so you can customize colors from a single file like that so that's it uh that's uh getting started in a nutshell uh if you're looking for for a custom topic or if you're looking for advanced topic you have to do navigate to documentation and read for each item for example if you uh want to learn something about checkbox you have to navigate checkbox documentation here and you can read you can see examples uh thank you for watching me uh see you soon in the next session

Channel: enisn

Views: 2,823

Keywords:

Id: 4S_KKT2JeGE

Length: 8min 55sec (535 seconds)

Published: Thu Dec 07 2023