How to raise panel when keyboard is up?

General
1

Hello! I plan to implement TextInput at the bottom of the app so that I can chat and enter text.
However, if you click on TextInput at the bottom, the ScrollView will not go up.

‘WhileKeyboardVisible’ is easy to use but not available.
Because we are using galaxy s8, the soft home, back button on this device will hide the TextInput.

So, without using the above event, we need to raise the ScrollView by the height of the keyboard + soft button a galaxy S8. Help. I will upload the miniaturized sauce for maximum understanding.

<App Background="#999">
    <DockPanel>
        <Grid RowCount="3" Rows="56, 1*, 60">
            <Panel Height="56" Color="#ff9595" Dock="Top"/>

            <ScrollView>
                <DockPanel>
                  <Each Count="20">
                      <Panel Dock="Top" Height="50" Color="#b4ec9d">
                          <Rectangle Color="#333" Height="1" Alignment="Bottom" Width="100%"/>
                      </Panel>
                  </Each>
                </DockPanel>
            </ScrollView>

            <DockPanel ux:Name="bottompanel" Height="60" Color="#57c5e8">
                <TextInput Value="input Text" Alignment="Center"/>
            </DockPanel>
        </Grid>

        <BottomBarBackground Dock="Bottom" IncludesKeyboard="true"/>
    </DockPanel>
</App>
2

Thanks for providing a complete, minimal repro!

Ran the code, and it’s perfectly fine for what you’re trying to do.

  1. <BottomBarBackground Dock="Bottom" IncludesKeyboard="true"/> takes up as much space as the bottom navigation and on-screen keyboard when visible.
  2. The Grid fills the remaining available space.
  3. In the Grid, ScrollView fills the remaining available space after the 56 and 60 pt high elements have been placed.

I don’t see an issue here, it’s fully correct.

1 Like