locked
Prevent Keyboard from overlaping a focused textbox

    Question

  • I have made a page on a windows store app that contains a bunch of TextBox controls in a column, when click on some of the last ones, the keyboard shows in front of the focused Textbox( can't even see what im writing), is there a way of automatically pull the app up, or center the view in the focused control, when the keyboard shows?

    heres some of my page code

    <UserControl.Resources>
        <ResourceDictionary>
            <common:StringToValidityConverter x:Key="StringToValidityConverter" />
        </ResourceDictionary>
    </UserControl.Resources>
    
    <StackPanel>
        <StackPanel Style="{StaticResource SubHeaderStyle}">
            <Image Source="/Images/Contract/Billing.png" Style="{StaticResource SubHeaderImageStyle}" />
            <TextBlock x:Uid="Billing" Style="{StaticResource SubHeaderTextStyle}" />
            <Button Click="OnResetButtonClicked" Style="{StaticResource ResetButtonStyle}" />
        </StackPanel>
    
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <TextBlock x:Uid="AccountNumber" />
            <TextBox Grid.Column="1" Text="{Binding AccountNumber, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="BillingPeriod" Grid.Column="3" />
            <input:SfDatePicker Grid.Column="4" Value="{Binding BillingPeriod, Mode=TwoWay}" />
    
            <TextBlock x:Uid="AccountCategory" Grid.Row="1" />
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding AccountCategory, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="CompanyName" Grid.Row="1" Grid.Column="3"/>
            <TextBox Grid.Row="1" Grid.Column="4" Text="{Binding CompanyName, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="CompanyType" Grid.Row="2" />
            <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding CompanyType, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="VatNumber" Grid.Row="2" Grid.Column="3" />
            <TextBox Grid.Row="2" Grid.Column="4" Text="{Binding VatNumber, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <StackPanel Grid.Row="3" Orientation="Horizontal">
                <TextBlock x:Uid="RegistrationNumber" />
                <TextBlock Text=" 1" />
            </StackPanel>
            <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding RegistrationNumber1, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <StackPanel Grid.Row="3" Grid.Column="3" Orientation="Horizontal">
                <TextBlock x:Uid="RegistrationNumber" />
                <TextBlock Text=" 2" />
            </StackPanel>
            <TextBox Grid.Row="3" Grid.Column="5" Text="{Binding RegistrationNumber2, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="BusinessActivity" Grid.Row="4" />
            <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding BusinessActivity, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="NumberOfEmployees" Grid.Row="4" Grid.Column="3" />
            <TextBox Grid.Row="4" Grid.Column="4" Text="{Binding NumberOfEmployees, Mode=TwoWay}" Style="{StaticResource ShortTextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="Language" Grid.Row="5" />
            <TextBox Grid.Row="5" Grid.Column="1" Text="{Binding Language, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="CorrespondanceLanguage" Grid.Row="5" Grid.Column="3" />
            <TextBox Grid.Row="5" Grid.Column="4" Text="{Binding CorrespondanceLanguage, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="LandlinePhone" Grid.Row="6" />
            <TextBox Grid.Row="6" Grid.Column="1" Text="{Binding LandlinePhone, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="MobilePhone" Grid.Row="6" Grid.Column="3" />
            <TextBox Grid.Row="6" Grid.Column="4" Text="{Binding MobilePhone, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
    
            <TextBlock x:Uid="EmailAddress" Grid.Row="7" />
            <TextBox Grid.Row="7" Grid.Column="1" Text="{Binding EmailAddress, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
                     common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
        </Grid>
    </StackPanel>

    Thursday, October 2, 2014 8:52 AM

Answers

  • The app should automatically scroll the focused control out of the InputPane's obscured rectangle, but other controls lower on the page may still be blocked. If the focused control is still obscured then something odd is going on, but I'd need a runnable repro sample to try to diagnose it.

    You can control this yourself by handling the InputPane.Showing event to adjust the page's layout yourself and then set the EnsuredFocusedElementInView property to true to let the InputPane know that it shouldn't do its own handling.

    See Guidelines for touch keyboard for more details and a code snippet.

    Thursday, October 2, 2014 7:22 PM
    Owner