Building An Edit Label Custom Control in Xamarin Forms.

When displaying textual information to your user, you want it to be well displayed with good font size, appropriate style, text color… But you also want the user to edit this information with minimum efforts. Let’s say you have a page in your app with a title, or several labels containing text. And you want the user to edit these as he wish, without switching to a new page. A good scenario will be to tap on the label and edit the test as it focus and display the text as it was, when focus is lost.

This is seen already in several applications. It could be achieved easily in Xamarin Forms by applying custom modifications to Android’s EditText and iOS’ UITextField, then call these as Custom Renderers. But we will achieve this using XAML and only code in the shared project. This blog post is about building this edit label custom control in xamarin forms xaml.

An overview of the control

This control is not complicated and the logic behind it is that. It behaves like a text entry when focused and it behaves like a label when it loses focused. So, to implement it in Xamarin Forms XAML, we will use a contentview, leverage Visual States, Gesture Recognizers and add a few bindable properties to make our control.

Building our custom control in Xamarin Forms

First, we create a ContentView which will have the atrribute (x:Name=”thisEdiableLabel”), this attribute will be used for referencing in XAML.

We then add a bunch of bindable properties which will be used to customize our control. The most important property here is the “IsFocusedMode” Property, which we will use to play with the views contained in the ContentView.

Initially, our control will need to display already available information. So, the content view’s primary content is a label to display this information. This ContentView will switch to edit mode once the Label gets tapped as shown below.

Let’s add finishing touches. At this stage, the Entry when focused, does not always display the keyboard. The cursor is at the beginning of the text too. These can be corrected by setting a few properties when the FocusMode bindable property changes. In our case, the name of the method in charge of this is called : “OnIsFocusedModePropertyChanged”. This is done as shown below.

Demo

Edit Label Custom Control In Xamarin.Forms demo

Conclusion

Building custom controls entirely with XAML and C# in the shared project only is easy and fast. Though it might not always be the best when it comes to performance. Here is a similar blog post about building a SnackBar in Xamarin Forms with XAML. With this, we built our Entire edit label custom control in Xamarin Forms XAML. This required a bit of code behind to mage states and properties. As I said earlier, this could be achieved using custom renderers, but this approach allow’s saves us per platform modification of the control, though it might not be the best when it comes to performance.

If you liked this post, or it was useful to you, please 👍 like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter, Github and like my page on facebook. And every other social media by clicking on the buttons at the end of this post.Follow me on social media and stay updated