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();


    }

Answer 1

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