Customizing borders & corners | .NET MAUI Minutes

[Music] [Applause] hi everybody welcome back to net Maui minutes where we cover some basic net Maui topics in just a few minutes I'm your host MD monilla and today we are going to look at how to add borders and Corners to different UI controls in your net Maui app so we're going to hop right into the file new project and I have actually customized this button here so it has a white background black text and is just the default button that this platform gives me so I'm on windows so this is giving me a little bit of a rounded corner here you can see no border or anything fancy but if I were to run this on Android uh this would be a perfect square and depending on the version of Android might have a light border on iOS it's just going to be no background color no radius no border at all and so if I want to start customizing it to look the same on all the different platforms I just have to add a few different things so I can set the Border color let let's do fuchsia and the Border width let's do 10 it's going to be huge there we go um and just like that I've added a border to my button so doing it this way adding the property right to the control works for anything that's basically like a box that makes sense to have a border so buttons and images um other controls like that I can also add my corner radius here so let's make this 15 and it's going to make it like really circular just like that and again this is a really easy way to just customize things like a button to look the same on all the different platforms but like I said this only works for the controls that make sense to have a border and a corner something like a label which technically a border of a label would be a border of all the words which is not really what I want um I can create the Border container and that has a lot more customizations than just adding the border into the control so let's make that here border um and I'm going to put the label in it so I'm saying I have a border container with a label in it tab this a few times make my zaml nice and pretty um and now it's drawn this little thin gray border around my label let's set the width so that we can see it in this screen 200 nice and then I can start customizing it the same way I customized things in the button but since it's a different control now little bit different syntax instead of Border color we're going to use the stroke um and we'll do Fusia again almost spelled that wrong as always and then the stroke thickness right here which is how you set the width um same thing as before except I can customize this way more than the other button I can create like a dashed line using something called a um stroke Dash array and then I give that a couple values here and it will create based on this array I gave it a dashed line and I can play around with this to kind of find what I like um I'm going to get rid of this I'm going to show you the join so get rid of that I can join these lines in either a bevel a miter or round so bevel will give it like a little angle at the edge there super cool easy to easy to use um and then I can also change the shape of this so we're going to give the stroke shape a round rectangle which is a shape built into Maui that is literally just a rectangle like the basic border but with rounded Corners that's what it gave there now to customize the corner radius of this I want to use the round rectangle because it has a corner radius property and I want to actually expand this so we're going to close this here we're going to give a border. stroke shape property like this and then I'm going to delete this so that my syntax is valid and then we were going to give the stroke shape a round rectangle property with the corner radius of let's say 15 close that out give it a sec to render there we go now I have round corner with the button the way that you apply the quter radius is the same across the board but if you wanted to do something like have four different Corners you can also make this an array so if I do 15 0 15 you can see that now two corners here don't have a radius anymore and it gives it this cool little shape so that's just another way that you can customize things to fit kind of your brand or your design or your logo or whatever you need it to be so that is kind of your crash course in borders and Corners there are a lot more options that you can add to any of them um and all of that is in our documentation which we will link in the show notes so be sure to check it out and join us for another net M [Music] minute [Applause] no

Channel: dotnet

Views: 2,699

Keywords: .NET

Id: Qp9_FNS24DU

Length: 5min 4sec (304 seconds)

Published: Thu Dec 14 2023