TextBox hidden under keyboard in Windows Phone

I recently came across a ‘bug’ in the Windows Phone SDK that makes it difficult to scroll down to the ‘next’ element in a form because the keyboard is covering 90% of the text box. Here is a screenshot of what I’m talking about:

I tried finding help on the AppHub Community Forum however the suggestions didn’t fix my problem and weren’t very future proof if i decide to add Text Boxes. Due to my background in flex and my noob silverlight skills, it did help me think of my own implementation as to how i could go about doing this. Here’s how I did it…

Ill start by describing what the principal of what Ive done is since some people might be applying this to their own custom ‘cell’ layout. What Ive done is made the label TextBlock and input TextBox both kinda hand focus to the TextBox. This means that for the image above, its possible to scroll to the email text box by pressing the “Email” label. However there’s also the opposite case to consider…
I just did this with a special case… When the taped label is the current  row, move to the previous row. Tada! Heres a video and the code snippits. Scroll to the bottom to download the source code.

The XAML elements…

And the code behind(CS) file…

Finally, click here to download the source code:)

2 thoughts on “TextBox hidden under keyboard in Windows Phone

  1. Just use the Enter key to skip to the next text box, it’s even more user friendly.

    In each text box, have an event handler for KeyDown, and then in the code behind the event handler…

    if (e.KeyDown == Key.Enter)
    nextTextBox.Focus();

    Problem solved.

Leave a Reply