Outlined Entry Control In .NET MAUI / Xamarin

hello guys welcome to my channel in this video I am going to show you demo about creating outline entry control in.net mavi so here I just created a new sample project uh let me add here new folder call Custom controls and in that I am just going to create new content View outline and break control okay now I'm just going to implement this control here on main page so let's see how it looking okay so it's a low date let me add here tags okay so it's displaying here now this text like I'm just going to load from bindable property so let me create a bindable property for placeholder as well as here the tax property so for binding text I am just going to create text property and the placeholder property so let's add that okay so here tax property is created this I am going to bind here on Entry control similar way I am going to create placeholder property and this property I am just going to bind here on this label okay now I can pass value from main page here on outlined entry control so I can press Now text and placeholder first name now let me run the app okay so now it's displaying here first name and last name now here on the click of entry control like a focus of entry I'm just going to display this label here on the border of frame so let's Implement that so here on Focus event I'm just going to write some logic and also on unfocus event so here on the entry control Focus I will just set label font size to like a smaller font size and default uh yeah here font size I will set as a 11 and then I will use uh translate to animation so on the click of Entry Focus this label will translate to minus 26 point and on focus of Entry I will just again set label placeholder like a font size to 15 and this translates 2 to 0. okay so here on the focus of Entry now this label translate to minus 26 points and on the unfocus again it get back to uh zero point now if you see here like if I enter any value and again if I unfocus from entry then this placeholder is over left with entry control so let's fix this issue so this logic I will write here now let's run the app and let's see like if on the focus of Entry if the tax is not null then it will translate to minus 26 point okay so here if I enter any value and I come to like another text box then this like first name it's still there and if I just remove all the tags and I just unfocus the first entry control then again it's translated to zero point now let's uh see this in a iOS device so for iOS I need to implement borderless entry control so let me just first run in iOS and let's see how it looking okay so if you see here it's a displaying entry border as well as this Frame border so let's create a borderless entry for this so here I'm just going to add new folder calls handlers and in that I will just add model is Centric class that's going to inherit entry and here in app jaml dot CS I'm just going to add code related to borderless entry now this borderless entry Handler I'm just going to use in this outline entry control so instead of this entry now I'm just going to inherit namespace now let's run the app and let's see okay so now it's displaying perfect on the click up control is just translating this label to like a minus 26 point and on the unfocus again it's get back to zero point now if you see here if I click here on label then nothing happen but if I click here on Entry then it's just setting focus of Entry control so for uh fix this issue I'm just going to add here tab question recognizer on grid control and here on the tap of grid I will just set txt entry dot Focus now let me again run the app and let's see so on the click of this Grid it's again just going to set focus of this entry control okay so now it's like a working perfectly and here on unfocus again it's get back to zero point and if I click on label also it's just setting focus on Focus okay so that's all for today I hope you like this video please uh subscribe my channel

Channel: Programming With Pragnesh

Views: 9,107

Keywords: Outline Entry, Outline Entry Control, Outline, .NET MAUI, .NET MAUI C#, .net maui, outline entry control in .net maui

Id: uKzIrp82b54

Length: 17min 21sec (1041 seconds)

Published: Sat Aug 13 2022