Keyboard overlaps textbox

Question

I'm using a list of textboxes for a registering document in a WP8 app.

The number of textboxes is quite large, so the user has to scroll between them. To navigate between one field to another, I added two applicationbarIcons, next and previous. Pressing on next will change the focus to the next textbox from list, and scroll the content of the scroll viewer with the height of the textbox (in this case 50).

However, sometimes, when switching the focus to the element bellow, the keyboard covers the text box. (the content doesn't scroll up).

Is there a way to force the textbox to move above the keyboard, even if it is in a scroll view?

<ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <TextBlock Text="{Binding Source={StaticResource LocalizedStrings}, Path=LocalizedResources.STRING_CONTACT}" Margin="10,5" FontWeight="SemiBold" Foreground="#878780"></TextBlock>
            <StackPanel Margin="10,5" Height="190" Background="#F4F3F4">
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="firstNameTxt"   BorderThickness="0" Background="Transparent" InputScope="PersonalFullName"><TextBox>
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="lastNameTxt"    BorderThickness="0" Background="Transparent" InputScope="PersonalFullName"></my:DefaultTextBox>
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="MobileTxt"  BorderThickness="0" InputScope="Number" Background="Transparent" ></TextBox>
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="EmailTxt" BorderThickness="0" Background="Transparent">
        </StackPanel>
</ScrollViewer>

Code behind:

void left_Click(object sender, EventArgs e)
    {
        int index = this.controls.IndexOf(currentControl) - 1;
        if (index == -1)
        {
            this.Focus();
            return;
        }

        currentControl = this.controls[index];
        ContentPanel.ScrollToVerticalOffset(ContentPanel.VerticalOffset - 50);
        currentControl.Focus();


    }

If you're on WP8.1 a quick and easy fix would be to just use [BringIntoViewOnFocusChange](http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.bringintoviewonfocuschange) property on your `ScrollViewer` and you could get rid of your codebehind altogether. — Chris W., Apr 28 '14 at 20:50
Thanks a lot, I'll keep in mind this. Unfortunately, I need a solution for WP8 alse. But considering that this issue happens randomly, in about 15% of the cases, I'm loosing hope that there is a solution in WP8 — Dacian Mujdar, Apr 29 '14 at 08:05

score 6 · Accepted Answer · answered Apr 29 '14 at 08:44

This is a common issue on WP8. When a textbox is focused, it will translate Application 's RootVisual to bring it into view. This doesn't work well in some cases (when clipboard is on, or in your case). A workaround is manually translating RootVisual to a desired vertical offset on GotFocus and LostFocus events of TextBox.

private void TranslateRootVisualY(int yNew)
{      
  var rootFrame = Application.Current.RootVisual as PhoneApplicationFrame;
  rootFrame.RenderTransform = new CompositeTransform() {TranslateY = yNew};
}

In your case, you can eliminate the automatic translation and make ScrollViewer scroll to desired offset in GotFocus event:

private void firstNameTxt_GotFocus_1(object sender, RoutedEventArgs e)
{
   TranslateRootVisualY(0);
   Dispatcher.BeginInvoke(() =>{
      double destOffset;
      //...calculate destination offset
      ContentPanel.ScrollToVerticalOffset(destOffset);
   });
}

destOffset can be calculated from sender and other function like GetRectFromCharacterIndex

Thank you! By manually setting the offset, I manage to keep the focused textbox above the keyboard in all cases now. — Dacian Mujdar, Apr 29 '14 at 11:49
Mega thanks about this method. In the UWP app, I spent the whole day trying different solution. The culprit was the usage of the virtualization of our ItemsControl that we need. However, with your "hack", I could get the desired result. — ArchieCoder, Mar 17 '16 at 05:45

Keyboard overlaps textbox

1 Answers1

Linked