Ever wanted to have a Border around your Xamarin.Forms.Editor control? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!
That’s what we gonna be build yol!
The default Xamarin.Forms.Editor control is a very dull and simple control which doesn’t have much of customization properties of its own. In this case the Editor doesn’t even have a proper border around it that explicitly shows the edge of the element. So here we’re going to look into how to add a nice Border around Editor in Xamarin.Forms without any custom renderers or 3rd party libraries!
We all know the Frame control, which has a nice Border property, and also CornerRadius property allowing us to control the curves of the corner edges of it. This is the simple magic we’re going to use here. We’re going to wrap our Editor inside this Frame control. 😀
How simple and easy is that eh!
Behold the golden XAML code!
So there we go as we discussed the Frame is wrapping around the Editor control. So the Frame has been configured with CornerRadius property so we can have some nice round corners. Then the Padding has been reduced to 5 so we have less space between the border and the Editor view, this you may change as you wish. 😉
HasShadow property is something you could change as you wish, which you should keep in mind, behaves differently on iOS and Android.
Now just to add something extra, imagine if you wanted to have the whole background with a certain color for the given Editor, this is how simple it is!
We simply add the BackgroundColor property of the Frame and then you set the HasShadow to false so it doesn’t show up Border Color just for the kicks of it. 😀 So just like that you could easily customize this as you wish!
Fire it up!
There you have it running on Android and iOS like a charm!
Let me type something inside our “cool” Editor…
Grab it on Github!
Well then, that’s it for now. More awesome stuff on the way!
Cheers! 😀 share the love!