.NET MAUI Entry control - Creating a Custom Entry Control with Borders and Rounded Corners

as promised in the previous video I would like to explain you how to build a custom control in this case the controller irritates me so much and this is the entry control on.net Maui so it's relatively similar as as on xamarin although there are a few changes so essentially on auxiliary we had before renderer now we have handlers and I have already prepared a link which you can visit to understand how the Handler is essentially work and I'm not going to jump too much into the details I want this to be as short as possible so the entry here that you see is visible on the manage event now here you will see that I have a custom control which is called standard entry and here I have some options that you usually don't see in your implementation for instance you don't see a padding you don't see a quarter radius or a border color so if I would do something like writing the entry here I would not have order I would not have petting I would not have boiler color obviously which is which was not visible at the start so how do I add those fields so first thing that you need to do is you need to Define your class and I did this inside a custom control you defined a class which has a bindable properties and I created a bindable property of corner radius border thickness whatever whatever you want you can put it here and then you specify your Getters and Setters and then it's important that this is actually of type entry so you're essentially inheriting the entry there so that's more or less is that's your kind of a consider it as as a like a head class which you're going to use afterwards to map the values of this class to the platform specific values now how do you do this you have here platforms folder and when you open it you will see some subfolders you will see the subfolder of Android you will see iOS and you will see Mac Catalyst at least for me for now now here as you see here I have entry mapper right here I have entry mapper here and I have entry mapper here so what is changing so you see here that I left the same namespace and this namespace game is is actually something relatively important um and then you can actually switch here the the the types so if I'm if I'm opening this file it's using.net on Android if I'm using this one it's using.net.ios so what you have to do here is you essentially checking what is your view what is your I element here and if view is a standard entry which is this guy here then what you need to do you need to map these values to the very specific settings on the on on the platform level so exactly here you're setting a background here in the Android views and now this is a bit of a tricky part because you need to actually check the documentation analyze how this thing works Etc it's very much the same on the on the Apple side so you need to figure it out you know how to update the background how to set up the Border radius and these things so it's not very easy to do this it's actually quite annoying and quite difficult to do all this and uh yeah I even have some specific class here for the UI text padding um but anyways it was a bit of a journey to set us set these things all up it was it was actually quite difficult and it required a lot of Googling there now this is not a brand new control it is just essentially extending the entry to the level which should have from the start like I cannot stress this enough um the same code I have for the Mac catalyst so nothing is actually different here and what now so now you have the classes platform specific classes and implementations and you have a model which is a standard entry so what do you do now now in the Maui program here now you have something which is called here you can access the handlers and you can append um your Handler and here what I'm doing is I'm saying that I'm adding a classic in my opinion classic um a mapping and what I'm saying is if View is a standard entry if if it's a this guy then please map me uh the view uh for my event handler uh for my entry method here so it's it's really really uh sometimes difficult and confusing to start with and especially because it is not very it's not so close to the to the xamarin approach so it is a bit different here and uh yeah this this is the way how you do this so essentially you would have to do it in a couple of places and then your standard entry is becoming available you can actually use it anywhere where you like you can on a main page even let me just try so I'm just going to try to get standard entry it will already suggest me to use a specific namespace and you know I can hear ad uh border color or whatever whatever I actually need now obviously um this is not you know production ready code so you already see here some uh invalid uh possible invariable operation exception so it is just something that I really really want to test um unfortunately unsuccessfully so far but if you take a look at the simulator it it here Works actually emulator um so here it works and I choose only this one I was also customizing these things for the event for the dates and for the uh for the drop downs uh in in my other applications essentially I just copy pasted the code and it's important to say that the code that you see here is a result of a lot of Googling so yeah um I'm not the owner of all of this code so some of them is is copy paste and some of them is is some of it is is parts of of of xamarin code so I hope this is going to help you it's um I know how struggling it can be so thank you very much for your time and I hope that this was fruitful

Channel: sizeofeight

Views: 3,226

Keywords: Input field customization, .NET MAUI, Cross-platform development, Mobile app development, .NET framework, Custom control, Custom entry control, Borders and rounded corners in .NET MAUI, Entry Control, Rounded Entry control, .NET MAUI UI customization, Customizing cross-platform apps with .NET MAUI, Cross-platform app development with .NET MAUI, UI UX, Input control, Textbox Maui

Id: V1xc_TOsa5Q

Length: 7min 7sec (427 seconds)

Published: Thu Feb 09 2023