Keyboard over input fields

How-to Discussions
1

Is there a way to prevent the keyboard from covering input fields at the bottom of the screen? In native apps the whole screen gets pushed up when the keyboard comes onto screen to keep the input visable.

<DockPanel ux:Class="Login">
    <Grid Rows="1,1">
        <StackPanel Alignment="VerticalCenter">
            <Text Alignment="HorizontalCenter" FontSize="50">DumpLog</Text>
            <Text Alignment="HorizontalCenter" Opacity=".5">Track your bowel movements on the go.</Text>
        </StackPanel>
        <StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
            <TextInput PlaceholderText="username" Value="{username}" />
            <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
            <PooButton Text="Login" IsEnabled="{areCredentialsValid}" Clicked="{loginButtonClick}" />
            <Text Alignment="HorizontalCenter" Opacity=".5" Value="{errorMessage}" />
        </StackPanel>
    </Grid>
</DockPanel>
2

Hi!

You can use the BottomFrameBackground to achieve this. It is an element which will get the size of the keyboard (and bottom bar on some android devices).

We usually dock it to the bottom of a DockPanel :

<DockPanel>
    <Panel>
        ... your content ....
    </Panel>    

    <BottomFrameBackground Dock="Bottom"/>
</DockPanel>

You can use the TopFrameBackground to compensate in the same way for the status bar.

Because this taks is so common, we have wrapped it in an class called ClientPanel, which basically looks like this:

<DockPanel ux:Class="ClientPanel">
    <TopFrameBackground Dock="Top" />
    <BottomFrameBackground Dock="Bottom" />
</DockPanel>

I hope this helps :slight_smile:

3

Thanks very much for the help, this is exactly what I was looking for :slight_smile: