Autoscroll in a ScrollViewer containing TextBox on Windows Phone 8.1 - xaml

Question

I have developed an Universal app that uses a login form, that allowing users to connect or to create an account.
It is a simple form that contains TextBox and PasswordBox. My problem is that it's not easy for the user to switch between each fields:
=> For example, when the user enters in the second field, he must deactivate the keyboard, scroll in the fields and select the third field.
By comparaison, on the Windows Store account's creation form, it is more user-friendly:
=> When the user give the focus to a field, the next field is also visible, as if there is autoscroll corresponding to these fields. So the user doesn't need to deactivate the keyboard to enter in the next field. All the fields can also be easily entered.
Is there a way allowing to reproduce this?
I already use the "KeyDown" event in Code-Behind, that permitting the user to switch between the fields with "Enter":
private void RegisterTextBox_KeyDown(object sender, KeyRoutedEventArgs e)
{
TextBox currentTextBox = (TextBox)sender;
if (currentTextBox != null)
{
if (e.Key == Windows.System.VirtualKey.Enter)
{
FocusManager.TryMoveFocus(FocusNavigationDirection.Next);
}
}
}
With this XAML:
<ScrollViewer x:Name="RegisterScrollViewer">
<StackPanel>
<TextBlock x:Uid="loginRegisterTextblockMessage"
Style="{StaticResource TitleTextBlockStyle}"
Text="Remplissez vos informations d'inscription" />
<TextBox x:Uid="loginRegisterTextboxOrganizationURL"
Header="Organization or URL"
IsSpellCheckEnabled="False"
IsHitTestVisible="True"
IsTextPredictionEnabled="False"
Text="{Binding OrganizationURL, Mode=TwoWay}"
TabIndex="10"
KeyDown="RegisterTextBox_KeyDown"
/>
<TextBox x:Uid="loginRegisterTextboxLastName"
Header="Name"
Text="{Binding LastName, Mode=TwoWay}"
TabIndex="20"
KeyDown="RegisterTextBox_KeyDown"
/>
<TextBox x:Uid="loginRegisterTextboxFirstName"
Header="First name"
Text="{Binding FirstName, Mode=TwoWay}"
TabIndex="30"
KeyDown="RegisterTextBox_KeyDown"
/>
<TextBox x:Uid="loginRegisterTextboxEmail"
Header="Email"
InputScope="EmailSmtpAddress"
Text="{Binding Email, Mode=TwoWay}"
TabIndex="40"
KeyDown="RegisterTextBox_KeyDown"
/>
<PasswordBox x:Uid="loginRegisterPasswordboxPassword"
Header="Password"
Password="{Binding Password, Mode=TwoWay}"
TabIndex="50"
KeyDown="RegisterPasswordBox_KeyDown"
/>
<PasswordBox x:Uid="loginRegisterPasswordboxConfirmPassword"
Header="Confirm password"
Password="{Binding PasswordConfirmation, Mode=TwoWay}"
TabIndex="60"
KeyDown="RegisterPasswordBox_KeyDown"
/>
<CheckBox x:Uid="loginRegisterCheckboxTermsOfUse"
IsChecked="{Binding TermsOfUse, Mode=TwoWay}"
TabIndex="70 ">
<TextBlock Style="{StaticResource BaseTextBlockStyle}">
<Run x:Uid="loginRegisterTextblockTermsOfUse1"
Text="I accept " />
<Underline>
<Hyperlink x:Uid="loginRegisterHyperlinkTermsOfUse"
NavigateUri="http://termsofuse.html" >
<Run x:Uid="loginRegisterTextblockTermsOfUse2"
Text="terms of use" />
</Hyperlink>
</Underline>
</TextBlock>
</CheckBox>
<Button x:Uid="loginRegisterButtonRegister"
Content="Subscribe"
Command="{Binding RegisterCommand}"
TabIndex="80"
/>
</StackPanel>
</ScrollViewer>
But this doesn't solve the problematic that occurs without using the "Enter" key.

Answer 1

When a TextBox got focused (focus event), you can try to use ScrollViewer.ChangeView to programmatically scroll the form to the desired position. This behavior can be improved by getting the keyboard height using InputPaneShowing and InputPaneHiding events and react accordingly.