Why can't I scroll all the way to the bottom when onscreen keyboard is active

Question

I have a bunch of controls in a collection of stackpanels that is contained in a grid. The grid is pretty long and runs off the page so I have put it in to a scrollviewer. Everything works perfectly and I can scroll up and down my page until the keyboard is active. Once that happens, I am not able to scroll the content all the way to the bottom when a textbox is highlighted. I can scroll to a certain extent but not all the way down. Am I doing something wrong? My code is as follows:

<ScrollViewer Margin="12,0,12,0" Grid.Row="1">
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Height="837" Width="456">                
            <StackPanel HorizontalAlignment="Left" Width="450" Margin="0,63,0,405">
                <TextBlock Height="30" Name="tBlk_Username" Text="Display Name" />
                <TextBox Height="71" Name="tb_UserNameVal" Text="{Binding UserNameValue, Mode=TwoWay}" Width="452" />
                <TextBlock Height="30" Name="tBlk_Email" Text="Email" />
                <TextBox Height="71" Name="tb_EmailVal" Text="{Binding EmailValue, Mode=TwoWay}" Width="452" />
                <TextBlock Height="30" Name="tBlk_Message" Text="Message" />
                <TextBox Height="130" Name="tb_MessageVal" Text="{Binding MessageValue, Mode=TwoWay}" Width="452" />
            </StackPanel>
            <StackPanel Height="37" HorizontalAlignment="Left" Margin="0,519,0,0" Name="stackPanel2"
                        VerticalAlignment="Top" Width="450">
                <TextBlock Height="30" Name="tBlk_PicInfo" Text="Include a Photo" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="90" HorizontalAlignment="Left" Margin="12,432,0,0"
                        Name="stackPanel1" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
                <TextBox Height="71" Name="tb_Location" Text="{Binding Location}" Width="367" IsReadOnly="True" />
                <Button Height="60" Name="btn_Clear" Width="60" BorderThickness="0" Background="{Binding LocationImage}" Style="{StaticResource LocationButtonStyle}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <GalaSoft_MvvmLight_Command:EventToCommand x:Name="ClearCommand" Command="{Binding ClearCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="205" HorizontalAlignment="Left" Margin="12,556,0,0"
                        Name="stackPanel3" VerticalAlignment="Top" Width="452" d:LayoutOverrides="GridBox">
                <Image Name="img_FlickrPic" Stretch="Fill" Width="260" Source="{Binding Capture}" Margin="0,13,0,0" />
                <Button Name="btn_Capture" Width="90" Height="90" Margin="0,67,0,55" BorderThickness="0">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/camera.png" />
                    </Button.Background>
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <GalaSoft_MvvmLight_Command:EventToCommand x:Name="CaptureClick" Command="{Binding CaptureCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>                        
                </Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Left"
                        Margin="4,763,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
                <Button Content="Submit" Height="71" Name="btn_Submit" Width="130" IsEnabled="{Binding SubmitEnabled}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <GalaSoft_MvvmLight_Command:EventToCommand x:Name="SubmitCommand" Command="{Binding SubmitCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </StackPanel>
            <StackPanel Height="59" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="456" Orientation="Horizontal">
                <TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConf" Text="Please share my " Width="150" TextAlignment="Center" Height="33" />
                <TextBlock FontFamily="{StaticResource HelveticaNeue}" Foreground="#FF00BCE4" Name="tBlk_StepConfCount" Text="{Binding StepVal}" Width="56" FontSize="34" TextAlignment="Center" VerticalAlignment="Top" />
                <TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConfTrail" Text=" steps for water" Width="134" TextAlignment="Center" Height="40" />
            </StackPanel>
        </Grid>
    </ScrollViewer>

what's the RowDefinition for the ScrollViewer's row? And you have some Crazy Margin and Height values defined.. you could probably do the entire thing cleaner using RowDefinitions and ColumnDefinitions and solve the issue. — William Melani, Mar 02 '12 at 00:10
The RowDefinition is part of the layoutroot grid that the scrollviewer sits inside of. You mean put the stackpanels inside the content grid in to actual rows that I define for that grid? Hmm... That would effect the vertical span of the content? — Cranialsurge, Mar 02 '12 at 00:21
When you hardcode values, your app doesn't work in all situations. Take for example, you decide to support landscape. Well now your fields don't stretch all the way like they should, b/c you hardcoded them to 452 px. — William Melani, Mar 02 '12 at 00:34
Gotcha, thanks. I'll toy around with layouts a bit more to get a little more comfortable with the UI. — Cranialsurge, Mar 02 '12 at 08:48

score 0 · Answer 1 · edited May 23 '17 at 12:27

The problem is that the ScrollViewer doesn't pay attention to the Soft Input Panel (or keyboard), so it only scrolls as long as it can behind the keyboard so to speak.

A simple solution is to add a margin to the bottom of the content control of the ScrollViewer.

The longer and more complicated solution is to add the margin when the SIP is displayed. Unfortunately there's no event for it, but I guess one could listen to when a textbox gains or loses focus, and set a margin or perhaps show a control at the bottom of the page when a textbox has focus (and hence the SIP is displayed) and hide it when it doesn't.

Why can't I scroll all the way to the bottom when onscreen keyboard is active

1 Answers1