How to keep page header sticky when soft keyboard shows?

Question

I have a very simple page with a header and several textboxes in my UWP app:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Text="Page Title!" />

    <ScrollViewer Grid.Row="1" VerticalScrollMode="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <TextBox Grid.Row="0" Margin="20" />
            <TextBox Grid.Row="1" Margin="20" />
            <TextBox Grid.Row="2" Margin="20" />
            <TextBox Grid.Row="3" Margin="20" />
            <TextBox Grid.Row="4" Margin="20" />
        </Grid>
    </ScrollViewer>
</Grid>

In Windows 10 mobile, when the bottom textbox get focus and soft keyboard appears, the full content of the page is scrolling up and I don't want this. I want the header to remain visible and the scrollviewer scrolls to the textbox to keep in view. How can I achive this? Thanks in advance.

Try to add frame element and add all items except header to that frame then try — Shubham Sahu

Breeze Liu - MSFT Breeze Liu - MSFT · Accepted Answer · 2017-11-17T09:32:56

You can use the CommandBar and add the TextBlock into CommandBar.Content, then the header will remain visible in the page. The page xaml code should look like this,

<Page.TopAppBar>
    <CommandBar Background="Transparent" OverflowButtonVisibility="Collapsed">
        <CommandBar.Content>
            <TextBlock  Text="Page Title!" Margin="20" />
        </CommandBar.Content>
    </CommandBar>
</Page.TopAppBar>
<Grid>
    <ScrollViewer  VerticalScrollMode="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <TextBox Grid.Row="0" Margin="20" />
            <TextBox Grid.Row="1" Margin="20" />
            <TextBox Grid.Row="2" Margin="20" />
            <TextBox Grid.Row="3" Margin="20" />
            <TextBox Grid.Row="4" Margin="20" />
        </Grid>
    </ScrollViewer>
</Grid>

How to keep page header sticky when soft keyboard shows?

1 Answers