×
Namespaces

Variants
Actions

Text character counter for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to display the remaining number of characters that may be entered into a TextBox.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Windows Phone emulator
CompatibilityArticle
Created: vineet.jain (11 Aug 2013)
Last edited: vineet.jain (12 Aug 2013)

Contents

Introduction

Some applications need to limit the amount of text that can be entered into a TextBox - for example a messaging app should limit SMS messages to 160 characters. In these apps it is often useful to display both the total number of characters, and how many more can still be entered.

This article shows how to implement such a display. In overview, we simply implement a callback method (textCountChanged) which gets called every time the TextChanged event is fired to update the display with the remaining character count.

Char count increasing Char count max

C# Code

In the page constructor, register the callback method :

          // Constructor
public MainPage()
{
InitializeComponent();
int iMinLength = 0;
PageTextBox.MaxLength = 30; // let say max length for TextBox is 30
string iLengthBuf = iMinLength+"/"+PageTextBox.MaxLength; // display the text char count as : 0/max value (initially)
TextCharCountBlock.Text = iLengthBuf;
PageTextBox.TextChanged += new TextChangedEventHandler(textCountChanged); // callback method registered
}

Callback Method :

        private void textCountChanged(object sender, TextChangedEventArgs e)
{
int TxtBoxTxtlen = PageTextBox.Text.ToString().Length;
TextCharCountBlock.Text = TxtBoxTxtlen.ToString() + "/" + PageTextBox.MaxLength; // display the text char count as : entered/max value
 
if (TxtBoxTxtlen == PageTextBox.MaxLength)
{
//MessageBox.Show("Max Length Reached");
}
}

XAML Code

The XAML code below simply defines the TextBox which displays available/remaining characters.

       <Grid x:Name="ContentPanel" Margin="24,138,0,23" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="23*"/>
<ColumnDefinition Width="129*"/>
</Grid.ColumnDefinitions>
<TextBox Name="PageTextBox" HorizontalAlignment="Left" Height="72" Margin="-10,36,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="2"/>
<TextBlock Name="TextCharCountBlock" HorizontalAlignment="Left" Margin="297,113,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" RenderTransformOrigin="0.319,0.331" Height="Auto" Width="Auto" Grid.Column="1"/>
<TextBlock Text="Enter Text" HorizontalAlignment="Left" Margin="0,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="39" Width="157" Grid.ColumnSpan="2"/>
 
</Grid>


Summary

The count of characters keep on changing as the text is written or deleted in TextBox. This particularly makes the app to avoid using the message box to show an alert to user if the max length of characters which can be entered is reached.

Source Code

The Source Code is attached in the metadata of the article.

This page was last modified on 12 August 2013, at 08:11.
216 page views in the last 30 days.