Get started building a material text entry in .NET MAUI

[Music] [Music] hi i'm matt goldman and i'm the author of dot net maui in action and today i want to have a quick look at how we can build a material style entry text box for a.net maui app on my screen here i'm looking at the material.io specification for the material design language you can see here that this is for the the text field type now we've got this field style here you can use to get this in xamarin forms using visual material but i really like this outline style here now you see that the way it works is you've got a border for your text field and you've got a label in the middle when i click into the label you can see that it animates up to the top there and it changes color and the border changes color as well and when i unfocus from this text field it goes back into the middle if i go in here and i start typing something when i unfocus from it the label stays up there so i really like this and i want to see how we can achieve something similar in.net maui let's get started so i'm going to switch here to visual studio now i've got a visual studio project here that i've created this is just using the template i haven't done anything with this yet um so all that we've got here is visual studio dot net maui project out the box so i'm just gonna spin this up here on my windows machine and we'll take a look at what it looks like you can see here that in the template we've got a few visual elements on screen here we've got an image some labels and a button we've got through the beauty of hot reload i can drop an entry onto the onto the page here so i'm just going to do it between the the label and the button so if i go entry and let's give it a placeholder and i'm just going to put hello and horizontal options equals center just so that it's the same as all the others oops that's not right center we can see here through the xaml live preview that it's updated i'm going to switch back to the app so you can see that it looks a bit different to the effect that we want to achieve here running on windows so it's got a kind of border and it's got a thicker border at the bottom it has got that placeholder there when i click on it it doesn't animate up and we can see that when i focus into the text field here that line at the bottom thickens up a bit and i can go hello okay great that's kind of what you get out the box that's the standard entry i want to add my own okay so the first thing i'm going to do is i'm going to add a new control uh just to take away the border and background and all the things you get out of the box with dot net malware using those platform handlers and so i'm going to get rid of that so i'm going to create my own i'm just going to subclass the entry class so i'm going to create a folder here in my solution called controls and i'm going to create a control in there called borderless entry i'm going to go to add new folder controls and in here i'm going to just add a new class and i am going to call it borderless entry borderless entry so a couple of things i can do first thing i'm going to do is convert that to farscope namespace get rid of the usings i'm not using change this to public and as i said i want to subclass the entry type which is that one there so all right that is a good start so where i'm going to change this entry to to make it borderless and get rid of the background and all that i'm going to use a handler so where i'm going to put my handler is going to be in my maui program because then i can call it when the app starts up and it's just going to apply that everywhere so let's open up memory program i am going to call uh microsoft dot maui dot handlers and in here i want the entry handler [Music] and i am going to call the mapper on here and now i'm going to append to mapping you can do a pen to mapping pre-printer mapping and modify mapping of course for modifying you need to have a mapping to modify i'm just going to do a pen to mapping i'm going to give it a name here and i'm going to call it borderless okay and then i'm going to handle a view i'm going to pass this into a lambda function so that i can start modifying these here [Music] okay so the first thing i want to do is i don't want to apply this to every entry i just want to apply it to my borderless entry so the first thing i'm going to do is check that that's what we're doing if view is borderless entry we can see that sort of automatically brought in that name space for me there now there's a few things i need to do differently depending on what platform so let's start with uh android because that's the easiest one and i'm going to use a compiler directive so that we can check uh which platform we're going to apply these these mappings to so if android and then we're going to do elif [Music] you know so ios and and uh mac catalyst are actually going to be the same so we can uh i can do or if uh mac catalyst uh lastly we're gonna do uh windows so elif windows and then that's going to be the end of our if so in each of these different uh each of these different blocks here i'm going to do the different uh hand load mapping uh depending on which platform so let's start with android so handler dot platform view that's going to give us access to the android views background equals null [Music] and handler dot platform view i'm going to call the set background [Music] color method and i'm going to set it to android [Music] graphics color transparent that is all we need for android let's go ahead and do ios and mac catalyst now it's going to be slightly different very very similar handler platform view background color and i'm going to set this to a color from ui kit which is the apple library we're using uicolor dot clear we don't have transparent on ios uh in ui kit next up we're gonna set the border width to nothing so we didn't actually see this running on on mac os uh we will do we'll see what the difference is but there's a border all the way around so oops let's do this a bit more platform view now this is going to be in layer dot border width equals zero we set the border color as well it doesn't matter if we set the width to zero uh and now we're going to set the board as style as well kind of a bit of a braces here platform dot border style [Music] because and again we're going to call it border style from ui kit here ui kit dot ui text border style dot none i'll quickly point out that um i'm using the fully uh namespace references here the reason i'm doing that is because i've kind of already got these compiler directives here in this method and i don't want to have to put them up here as well in my using statements as well so i'm just calling the fully name spaced uh the namespace references there okay let's see what we need to do for windows now windows is going to be a little bit different i am going to add this in here but i'm going to show you something else in a moment as well uh so um oops handler dot platform view dot border thickness uh equals new and i need to give it a uh a microsoft ui xml thickness and i'm gonna this is actually a method so i need to pass it a value there of zero okay now that is most of what we need to do here so let's just run it and see what happens there's going to be one more thing we need to do on windows which i'll come back and do in a moment um but let's just see what we get so far and i don't think we're going to see any change here before we make the change on windows i'm actually going to run this on android as well and we'll see how it looks on android so here we go here is our uh you know what i also need to actually add so there's the standard entry uh let's add the borderless entry to our main page here as well so i'm going to add it above this one in fact actually the first thing i need to do is bring in the namespace for the controls so xml and s call it controls and i'm going to refer to my controls folder in my app in my namespace here should be under m here we go that's my controls namespace for file so i'll add it here controls borderless entry there we go there it is so nothing's happened here on windows so you can see that we haven't got any things set here so in fact you know what i can give it it's subclass from entry so i can give it the same placeholder hello waterless so just so we can see it a bit easier so i can tab out of it now we can see that when i tab out of it it's borderless so that's working but it's still when i tab into it it's got the border in the lower border so we need to fix that up let's just have a quick look on android i'm going to switch to the android platform here and i've got a physical device but i'm going to use my android emulator that's going to be a bit easier for us to see here so we can see that the xaml live previewer has started up there so i should be able to switch to my android emulator and see the same thing so we can see that that's actually applied to all of our entries there not just the borderless entry uh we might look at fixing that later but we can see that here's our hello borderless we can see that on android this works exactly as we want doesn't matter whether we're focused on it or not and the border is just gone okay so let's fix this up on windows so what i actually need to do to this is to go into the platforms folder and then windows and then i'm going to open up this app.xml file here and i'm just going to add some some styles here so first thing i'm going to do is add a resource dictionary and this is going to be in my maui win ui application resources so we're going to get some some squigglies here the compiler doesn't quite like this for some reason but uh it's going to be okay it's going to work so first i'm going to do is add a thickness [Music] and give it a key and the key is going to be text control border theme thickness [Music] and i'm going to give this a value of 0. we're going to add another one which is going to be thickness and the key for this is going to do the same thing but for when it's focused right so the key is going to be text control border theme thickness focused text control border theme thickness focused [Music] this is also going to be zero so that should be all we need to do now to get this fixed up on windows i'm going to switch back to windows now we'll keep working on windows until this is done um and then we can have a look at it running on the different platforms so i'm going to go and run this again now and we should see that we've got the borderless entry like we had before but now when we focus into it we don't get the border and the underline at the bottom as well like i said we've got some we've got some some blue squigglies here we don't really need to worry about that right now and that's an issue with the tooling not an issue with maui so okay so there's our standard one and we can actually see straight away that when we tap into it that border and that underline has gone so this is now working this is giving us what we what we want we've got a borderless entry and we're good to start building on this now and start adding the other effects from from the material entry that we want so i'm going to close this right now and let's move on and start fleshing this out a little bit more so i'm going to make a few changes here now right now we have added this borderless entry to our main page we don't actually want this borderless entry what we want is a material entry now i've just used the borderless entry here so that i can put it within the material entry control that we're going to build because you know we need a borderless entry so that we don't get the standard platform outlines interfering with the the border that we're going to add so back in my controls folder here i'm going to add a new uh maui content view i'm going to use xaml so i'm going to uh dotnet memory down here and i can go to content view xaml and i'm going to call this material entry [Music] and this will scaffold this up for us in this material entry we're going to have a few things we're going to have our border we're going to have our label and we're going to have our borderless entry so i want these all positioned nicely so i'm going to put them in a grid so i'm going to get rid of the content that's here and i'm going to add a grid now i don't need to specify any rows or columns for this grid because i only really want one column in one row i'm only putting these in a grid because that's going to let me lay them out and position them one on top of the other and that's going to be the easiest way to do this so we've got a borderless entry even though we want a border but we want our own border not the platform supply border so the first thing i'm going to do here is add a border now the border is going to have a background color of transparent because you know we don't we don't actually want any background on here i'm going to give it a stroke now the stroke is what the stroke is of type brush and you can give it just the color and it will create the brush for you you can create a brush um now i'm going to give it a color here and the color i'm going to give it is the static resource and i'm going to give it primary so we've already got the primary color defined here i'm just just going to give it that we'll use that for now uh the stroke shape [Music] stroke shape is of type shape now i'm going to use a round rectangle here so you can actually you can actually define the the shape here as you want but i'm going to use one of the predefined ones round rectangle and i'm going to give it a corner radius of 5. i could specify all the corners here if i just put one number that's going to apply to all of them let's go ahead and center it so vertical option center and horizontal options center so i'm going to do this because all of the different controls within this grid are all going to be centered so they all sit on top of each other because that's that's kind of what i want okay now i know that this is going to not have the right effect that i want on android so i'm just going to give it a little bit of padding that i only really want to apply to android now i could do this with a markup extension but i'm going to do it explicitly here for now um i don't want on indium i want on platform and the type argument is going to be [Music] thickness [Music] because of course it's you can specify it on each individual side so on platform oops platform equals android uh and the value is going to be i want it to be 10 on each side nothing at the top and the bottom so left top right bottom within this border we want our borderless entry because as i said we're creating this up this border which is our own border and this is this is what we want i'm going to go ahead and add this uh yeah i also need to bring in the name space again in fact something that i should have checked here and we can see that this this this isn't right there's no space so i'm going to go and fix that up um maui material entry dot controls and we can see that we've got a red squiggly here because this now doesn't uh have the same path as the partial class defined in the xaml so i'm just going to go and fix that up here maui material entry dot controls okay that should all be happy now so even though this isn't the same that the same name space i can't i can't reference my borderless entry here i need to explicitly define that namespace in the example so i'm going to go and do this now xml and s controls equals [Music] and we can see that intellisense has given me it there so now i can do this now i could start typing controls i could do border sentry it's going to automatically do it for me as i said we want everything centered so let's go and center this and everything is going to sit one on top of the other there um i'm going to give it a name because i'm going to want to do stuff with this so we'll get back to that i'm going to call it emmy entry let's leave that for now and outside of the border i'm going to add a label and the label let's give it some text enter some text and uh we want to center this as well within the grid everything's going to be centered uh i'm going to give this a name as well and i'm going to call it emmy label and that's again because we're going to we're going to come and do some stuff with these shortly okay so now we've got our the beginnings of our material entry control it's gonna have a border a label and a borderless entry uh i can go back to my main page here get rid of this borderless entry because we're not actually gonna um we're not actually going to use this at all anymore uh it's just there to flesh out our material entry so i can go material entry now we know that material entry doesn't have a placeholder path because we've got that label there that we've explicitly defined so let's go ahead and run this now and see what it looks like so this is our windows app we can see that there's some stuff here that's not quite right so the first thing is that our border doesn't fit around the text and there's our label though but you know other than that it seems to be working so why don't we go ahead and give this border a width uh in fact let's add that width to the borderless entry control because that's within the border that's actually going to that's going to expand the border as well so if i do that we should see some nice hot radio there we go perfect so that is now working so we've got our label our border and our uh and our uh our text our borderless text entry the problem that we have now is that we can still see the label so i can type and you know the label is still there let's fix that up next so what i'm going to do is i am going to add a couple of event handlers to my borderless entry i'm going to add one for focus and one for unfocused so let's add these now so focused and i'm going to let it give me the default name here because that's actually exactly what i want and unfocused [Music] new event handler okay so super simple for now right what i'm going to do is i'm going to make the label visible and invisible depending on whether it is focused or not the first thing that we want to do is when we're focused on the text field we 100 know that we want that label to be invisible so let's go in here and go label dot is visible because false so that's going to hide the label when we click into that text field that's a good start right but um when we unfocus from it we want to show it but only if we haven't typed something so if we were to go back to our material field here we can see that uh you know we're not doing this animation yet we're just showing and hiding this label for now but we can see that when you unfocus it comes back but if you've typed something it stays where it is we're gonna do something similar here so the first thing i want to do is uh check to see whether there's any text in the entry so if we're going if any entry dot text in fact actually what we want to do is check to see if there's anything there so let's do string dot is i'm going to go it's not a white space uh me entry dot text [Music] then we're going to go uh [Music] any label dot is visible equals true so what's going to happen now is let me just fire it up and explain what's happening here so just to repeat when we focus on that borderless entry the label should disappear when we unfocus from it the label should appear but only if we don't have any text in there this is going to start up now on windows and we can see we've got the same thing we've got our border we've got our label if i click into this bang the label has gone perfect if i tab out to unfocus the label comes back excellent so i'm just going to type something here and when i tab out the label doesn't come back that's a really good start this has taken us a long way towards our um towards our material entry in fact you know it's kind of it's not far off right we're basically almost there that's a nice call entry effect next up though what we really want is for that label to animate rather than just appear and disappear so i'm going to add a couple of methods here to my code behind to take care of that animation for me i'm going to add one called uh scale label down um and then i got one called scale label up and it's going to be a little bit confusing because the problem is the label kind of scales down but moves up and it scales up but moves down but i'm just going to use the scaling to define what's happening not the actual position as well so private void scale label down and let's add the scale label that one as well private void scale label up wow how good is there how good is this in teleco it's working really well what i want to do is i want to change the position of the label and i want to change the size as well so let's start by uh doing the the scale so i'm going to go me label dot scale and i'm going to make it a bit smaller so i want it to be 0.8 i am going to let this take 250 milliseconds and i'm going to use a linear easing [Music] this method is actually called scale two not scale so let me fix that up so that's going to do scale but i also want it to move as well for that i'm going to use the translate two methods so any label got translate to uh now this is going to use relative positioning so i want it to go uh it's going to use x y and then we're going to use the the timing and the easing so i'm going to go minus 50 i'm going to move it to the left a little bit minus 20. again 250 milliseconds i want these to happen at the same time and i want the same uh easing here as well [Music] cool all right now let's get rid of this and replace it with the scale level down method let's flesh out the scale label up method now as well so over here basically i'm just going to undo what i did before in fact i can even just copy paste this so what i'm going to do here is i'm going to change this to one because i want it to scale back to full size as i said these are all all relative so i want this to be zero i want it to be zero here just back in its original position let's run this now and see what we get okay so we've got exactly what we had before we've got the nice little border here we've got the text placeholder label now when we clicked into it before that we disappeared and then when we unfocused it became visible and now what we want to see is for it to move and scale so i'm just going to click into here almost perfect that's actually almost perfect so it scales up it moves to the left but we've got two problems the position is not quite right and it's still it's got a transparent background so we need to give that a background so when i unfocus it's also it's not going back so let's have another look at the code here and see why that's not working ah because of course what i haven't done is change this to the method that we want so [Music] now hopefully that should we should get some nice hot reload here let's see what happens i may have to restart yeah perfect okay so we can see that when i focus into this it scales down it moves up the positions off a little bit we'll fix that in a moment and the background is transparent so we'll fix that as well and when i tab out it goes back and when i type some text [Music] okay perfect that is now almost perfect so let's go and fix up a few different things you

Channel: Manning Publications

Views: 6,032

Keywords: dotnet, dotnet maui, Get started building a material text entry in .NET MAUI, MAUI, apps, appdevelopment, dotnet framework, dotnet developer, dotnet maui getting started, dotnet maui tutorial, learn dotnet maui, .net maui, .net, android apps, app development, how to make an app, mobile app development, how to build a material text entry in .net maui

Id: UiCz3DTPzjw

Length: 25min 8sec (1508 seconds)

Published: Tue Sep 20 2022