WP7 Text Boxes – OnEnter (my 1st Behaviour).

2011-01-12 13h45_15One problem I have encountered on various WP7 apps (including my own applications) is moving between text boxes on a page. The problem can present itself when the SIP is being displayed in front of the next control that requires input.

In some cases the user is forced to press an area on the page that does not include a text control to take the focus away from the text box. Once the SIP is hidden then the user can click the control they want to enter text into.

This is mainly because the controls do not support the concept of tab order because the SIP does not include a tab control to move between controls.

One solution to this is to look for the enter key to be released and move the focus on to the next control:

private void txtUsername_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)
{
    if (e.Key == System.Windows.Input.Key.Enter)
        txtPassword.Focus();
}

This could prove to be a pain for developers and forces additional code within the page code file that can be said to be quite untidy.

It is because of this that I have created my own solution using a behaviour that can be attached to a control. One advantage of this is that it will be possible to set the values using Blend therefore reducing the reliance on the developer.

The OnEnter Behaviour:

The XAML below gives an example on how the behaviour can be attached to a text box

<TextBox x:Name="txtUsername">
    <i:Interaction.Behaviors>
        <mh:OnEnter NextControlName="txtPassword" />
    </i:Interaction.Behaviors>
</TextBox>

The additional namespaces that I have added to the page are:

xmlns:i="clr-namespace:

System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:mh="clr-namespace:

MikeHole.WindowsPhone.Behaviors;assembly=MikeHole.WindowsPhone.Behaviors"

You can download the project from here. (if you have any problems downloading this then please send me an email at: mike [at] mikehole [dot] com and I will send it on).

If you can think of any ways that the behaviour can be improved or know of any better solutions then feel free to leave a comment.

Cheers,

Mike

About these ads
Tagged with: , , , ,
Posted in Phone, Silverlight, WP7
7 comments on “WP7 Text Boxes – OnEnter (my 1st Behaviour).
  1. [...] WP7 Text Boxes – OnEnter (my 1st Behaviour). (Mike Hole) [...]

  2. Jan says:

    Looks like we have the same taste when it comes to wordpress styles :-)

  3. pauliom says:

    Please have a look at my keyboard behaviour over at http://pauliom.wordpress.com as it also talks about tab stops. Also how to use it with binding too. Sorry using wp7 so can’t copy and paste actual link
    .

  4. [...] Mike Hole’s Blog In some cases the user is forced to press an area on the page that does not include a text control [...]

  5. Alex Z says:

    Hi Mike,

    The link is no longer available :(

    Any chance i can get it?

  6. mikehole says:

    Hi,
    After some reckless housekeeping of my SkyDrive I managed to delete the source code.

    All is not lost however as Derek Lakin has created a similar project that can be found here: http://blog.dereklakin.com/user-friendly-input-pages/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: