Use gradients in your UI | .NET MAUI Minutes

[Music] [Applause] hi everybody welcome back to net Maui minutes a new series where we're going to Deep dive into some basic net Maui topics for just a few minutes I am MADD monilla I am on the net Maui team and today we are going to look at how to draw gradients in your app so a lot of times you're going to set the background color or the color of something um and usually it's just a solid color but a lot of times we want it to be more interesting than that and one way to do that is with gradients so you can set gradients from any color to any color maybe your brand maybe you add a bunch of different fun colors maybe you make a rainbow it's all really easy using the linear or the radial gradient brushes in Maui um and they're built right in and we're going to look at how to do that right now so I took the file new template app um which usually has a nice little net bot up here and I just replaced it with a white frame so a white box basically and we are going to take this Frame and give it a special gradient back background so I will split out the tag so that I can set the frame background property like this and then I'm going to set we're going to start with a linear gradient brush so heart reload which is what I'm using to change the UI as I type here um is not going to be able to repaint the brush for me without me restarting the app or reloading the page so you're not going to see anything pop up until we restart but let's just give it a basic gradient here so the linear gradient Brush by default has um two point properties that you can set but you don't have to the start point and the end point the start point is up here on the top left by default 0 0 imagine that this is just like a a graphic plane right and you have z z and 1 one which is your default end point um and then you would get a horizontal diagonal gradient like this left to right top to bottom but you could also do 0 1 1 Zer however you want to do it and then the way that you Define a gradient is with what we call gradient stops so each of them have a color and an offset so let's make this first on pink um and then the offset is a percentage of how far through the gradient you want this color to be the most pure basically so in something that's 0 0 to one one um let's say I want the pink to start right at the beginning I could have my offset be zero and offset is a value from 0 to one so if you want it to be 20% you'd put your offset at 0 2 and then I'm going to add another gradient stop at the end we're going to make it purple uh and the offset of this will be a one and I will close that tag and then let's restart the app to get rid of those squigglies and let hot reload paint that brush on for us and then we can play around with it cool so there it is there's my gradient that was easy um and like I said it's 0 to one one super easy to change say I want this to go left to right I just add my endpoint right here and I make it 1 Z instead of 1 one which is the default and it changes it so it's now pink on the left and purple on the right very easy so using a radial gradient brush is almost the exact same um but couple things change I change the linear gradient brush to a radial gradient brush which makes sense and then there's no Endo anymore because it's a circle um I have a center and I have a radius so by default the center is going to be 0.5 to.5 right in the middle of that box and then the radius is going to be .5 um but you can change that as much as you want and customize it for whatever works for you so let's um keep these here and then we're also going to add a different gradient stop just so that you can see what it looks like if I have many colors and let's do teal and make it really pretty offset and we'll make this offset 75 so 3/4 of the way through the radius we want this um teal color to happen and then to switch back to purple so I will restart the app so heart reload can redraw this for me give it a second there's my beautiful gradient cool and then I can tweak this now I can tweak the offset of my gradient stops here um I could put this offset at like one for example and totally change it how everything looks I could make this 0.25 and make the pink bigger in the middle there's a whole bunch of different things I can do here but once you have um the gradient brush you're painting with and the amount of stops you want then heart reload will let you tweak it as much as you want so that is it super simple just to start drawing gradients in your Maui app everything is in the documentation um so feel free to check that out and it will be in the show notes below so we hope to see you at another net Maui [Music] [Applause] minute

Channel: dotnet

Views: 5,451

Keywords: .NET

Id: lL_60Dh9bdg

Length: 4min 56sec (296 seconds)

Published: Thu Dec 28 2023