Xamarin Forms Tips Part 1: Xamarin Forms Entry With Character Max Length And Counter

Hi guys, When building your Xamarin.Forms application there are several tips you should take into consideration to improve user experience. The Xamarin.Forms framework makes it easier to build cross platform applications, but, you can customize its functionalities for your use case. Personalizing your application, and adding additional functionalities not difficult. But for anyone new to Xamarin Forms, accomplishing these improvements may be tricky. Therefor, I decided to start a series of blog posts where I share several tips. These tips will be about adding extra functionalities to what Xamarin Forms already provides to its developers.

So, Here is the first tip. It is simple, and very necessary. Especially when it comes to user experience. We will talk about enabling character maximum length limits in a Xamarin.Forms entry, and displaying a live counter. This counter will display the number of characters which the user has to enter before the max length limit.

Building a Xamarin Forms Entry with Character Max Length and Counter

Accomplishing this requires a behavior, value converter and data binding. The behavior will serve in implementing the max length property on the entry. It does so by listening to each time a character is entered by the user. Then, calculating the length precised by the developer and ignoring every character which the user input after the limit reached. Here is the behavior :

private void Bindable_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (string.IsNullOrEmpty(e.NewTextValue))
                return;

            if (e.NewTextValue.Length >= TextLenght)
                ((Entry)sender).Text = e.OldTextValue;
        }

private void Bindable_TextChanged(object sender, TextChangedEventArgs e)

{

if (string.IsNullOrEmpty(e.NewTextValue))

return;

if (e.NewTextValue.Length >= TextLenght)

((Entry)sender).Text = e.OldTextValue;

}

In the above code, we use the behavior to listen to text changes on the entry. And ignore any change made if it’s the length is greater than the Max Length.

Here is the full code for the behavior.

public class LimitedLengthEntryBehavior : Behavior<Entry>
    {
        public int TextLenght { get; set; } = 30;

        protected override void OnAttachedTo(Entry bindable)
        {
            base.OnAttachedTo(bindable);
            bindable.TextChanged += Bindable_TextChanged;
        }

        private void Bindable_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (string.IsNullOrEmpty(e.NewTextValue))
                return;

            if (e.NewTextValue.Length >= TextLenght)
                ((Entry)sender).Text = e.OldTextValue;
        }

        protected override void OnDetachingFrom(Entry bindable)
        {
            bindable.TextChanged -= Bindable_TextChanged;
        }
    }

public class LimitedLengthEntryBehavior : Behavior<Entry>

{

public int TextLenght { get; set; } = 30;

protected override void OnAttachedTo(Entry bindable)

{

base.OnAttachedTo(bindable);

bindable.TextChanged += Bindable_TextChanged;

}

private void Bindable_TextChanged(object sender, TextChangedEventArgs e)

{

if (string.IsNullOrEmpty(e.NewTextValue))

return;

if (e.NewTextValue.Length >= TextLenght)

((Entry)sender).Text = e.OldTextValue;

}

protected override void OnDetachingFrom(Entry bindable)

{

bindable.TextChanged -= Bindable_TextChanged;

}

Now, to display the number of characters which the user has to type before the limit, we will use a value converter. Its role will be to get the number of characters entered and use it to calculate the number of characters left. This value converter will have the max length property (_wordCount )set with the same value as that of the behavior – 1. This max length will be decremented each time a character is entered and vice versa. Here is the code for the value converter.

public class TextLengthValidationValueConverter : IValueConverter
   {
       int _wordCount = 29;

       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
       {
           return value == null ? value : (_wordCount) - System.Convert.ToInt32(value); 
       }

       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
       {
           throw new NotImplementedException();
       }
   }

public class TextLengthValidationValueConverter : IValueConverter

{

int _wordCount = 29;

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

return value == null ? value : (_wordCount) - System.Convert.ToInt32(value);

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

{

throw new NotImplementedException();

}

Applying these to our XAML code is what is left. The behavior is applied normally as shown below.

<Entry.Behaviors>.
     <behaviours:LimitedLengthEntryBehavior />
</Entry.Behaviors>

<Entry.Behaviors>.

<behaviours:LimitedLengthEntryBehavior />

</Entry.Behaviors>

Now, the converter will be used on a label beside the entry (You may use it on another control). Taking into consideration that the label is stacked horizontally with the entry (I just decided to stack it, this is not a requirement for it to work). This label is bound to the length of characters which the entry has, and uses the converter to display the number characters remaining. Here it is:

<Label
    Style="{StaticResource LegendLabelStyle}"
    Text="{Binding Text.Length, Source={x:Reference TitleEntry}, Mode=TwoWay, Converter={x:StaticResource TextLengthValidationConverter}}"
    VerticalOptions="End" />

<Label

Style="{StaticResource LegendLabelStyle}"

Text="{Binding Text.Length, Source={x:Reference TitleEntry}, Mode=TwoWay, Converter={x:StaticResource TextLengthValidationConverter}}"

VerticalOptions="End" />

Conclusion

Using the above code, you should be able to implement a Xamarin Forms entry with character max length and counter. What I explained in this article is not limited only to a label beside an entry. You can create a custom entry using custom renderers. And add a property to the entry which automatically does the job of the label I used above. Bellow, you can see the demo which I implemented. It is a screen shot from a simple application I will soon distribute to Microsoft and Play stores. Here is the link to the application on Play store. If you like the application and find it useful, please don’t forget to rate it.

Xamarin Forms entry with character max length and counter demo

You may also like this post about using LiteDB as an alternative to SQLite. To get code samples about Xamarin Forms posts made on this blog, check this.

If you find this article useful, please follow me on Twitter, Github, Linkedin, or like my Facebook page to stay updated.

Follow me on social media and stay updated

2 comments

Mark Zhukovsky
September 9, 2019
None of that is necessary really. Both Entry and Editor have a MaxLength property. Then to display the current character count you can just bind to the Text Length of the Entry/Editor. Yes, if you want to show the remaining characters you would need a little code, but instead you could just show the current count and the limit. e.g.:
Loading...
- Damien Doumer
  September 9, 2019
  Hi @markzhukovsky:disqus , Thanks for your feedback.
  This is an old post, and if I remember well, it was written before the addition of the MaxLenght property to Entries in Xamarin Forms.
  And your solution for the number of characters is great and it will obviously work, but it won’t be a count down as what the post is trying to demonstrate.
  Loading...