ScrollViewer does not scroll up while Keyboard is active

Question

How I can get behavior of form in windows Phone like Settings >> Mobile Network >> EditAPN. In this page it have many textboxes in scrollviewer. When user taps on any textbox and its get focus then the page scrolls up and header remains constant and SIP keyboard shown. And when user lost the focus from this text box then page comes to its normal state and SIP keyboard hides and header remains unchanged. I want to achieve this behavior. I searched a lot but did not get any solution. Strange to see scrollviewer behavior in WP7. Any help will be great and appreciable. Thanks in advance. Note: If there is any tricky solution, please provide sample code.

Here is my sample code.

<Grid x:Name="ContentPanel" Grid.Row="1" >
            <ScrollViewer x:Name="Scroller">
                <StackPanel Orientation="Vertical">

                    <TextBlock Text="Name"/>
                    <TextBox x:Name="txtName" />
                    <TextBlock Text="Email"/>
                    <TextBox x:Name="txtEmail"/>
                    <TextBlock Text="Phone"/>
                    <TextBox x:Name="txtPhone" />
                    <TextBlock Text="Adress"/>
                    <TextBox x:Name="txtAddress" />                 

                </StackPanel>
            </ScrollViewer>
        </Grid>

When I try to scroll down, it does not move down fully and seems to be worked as elastic.

Edit: This example, I have already seen and not useful in my case. I have 4 textboxes and my focus is on first textbox and keypad comes and hide last textbox. If user wants to go to last textbox and wants to enter input, it does not scroll fully and works as elastic. For this user has to press on some other part of screen, then he enter in last box. I saw in WP7 app in Settings -> Mobile Network -> EditAPN. There are 4-5 text boxes and these scroll perfectly. Don't know Which control or workaround MSFT used.

Edit: This example, I have already seen and not useful in my case. I have 4 textboxes and my focus is on first textbox and keypad comes and hide last textbox. If user wants to go to last textbox and wants to enter input, it does not scroll fully and works as elastic. For this user has to press on some other part of screen, then he enter in last box. I saw in WP7 app in Settings -> Mobile Network -> EditAPN. There are 4-5 text boxes and these scroll perfectly. Don't know Which control or workaround MSFT used. — user1268477

Cybermaxs Cybermaxs · Accepted Answer · 2013-02-05T13:11:37

Maybe I am wrong, but why not using a simple grid and a listpicker control. You will need the Windows Phone Toolkit for this (Nuget Here).

The first Row of the grid contains the Header and will not change. The second Row contains what you want (scrollview, listpicker, ...)

Here is a very basic example :

<phone:PhoneApplicationPage 
    x:Class="PhoneApp3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="PageTitle" Text="MY HEADER" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1">
            <toolkit:ListPicker>
                <toolkit:ListPickerItem Content="aaa" />
                <toolkit:ListPickerItem Content="bbb" />
                <toolkit:ListPickerItem Content="ccc" />
            </toolkit:ListPicker>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Edit :

When SIP keyboard is rendered, PhoneApplicationFrame.TranslateTransform.Y is set to specific values (-259 in landscape orientation, -339 in portrait orientation). To update layout, we’ll just set top margin to the specified value(-s) and after that Silverlight layout system will fix the issue.

This example may help you.

ScrollViewer does not scroll up while Keyboard is active

1 Answers