Windows Phone items scroll issue while SIP keyboard appear

Question

I'm facing two issues with the code following while I'm making a simple chat app. The code shows a textblock at the top of the page and two textbox stack at the bottom. Plus a listbox which will be auto height to fill the remaining gap.

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle Height="1" Fill="White" VerticalAlignment="Top"/>
        <TextBlock Text="Hello World!" Grid.Row="0" FontSize="36"/>
        <Listbox Grid.Row="1"/>
        <TextBox Grid.Row="2"/>
        <TextBox Grid.Row="3"/>
</Grid>

1. When I click on one of the top textboxes, the SIP keyboard becomes visible and all content in the page is pushed up. The main issue here is that the top textblock disappears and hides over the top. How can I keep it on top and not moving while the SIP keyboard is viewed?

2. When the most bottom textbox has focus, the SIP keyboard appears and pushes all content up. In this case, the keyboard will just fit and be sticky to that textbox. However, when the other textbox has focus, the keyboard will make a gap between them. How can I make the keyboard behave as it does when the most bottom one is focused?

Answer 1

When the keyboard pops and unpops, a TranslateTransform runs on the PhoneApplicationFrame, translating the whole screen up and down.

Based on this article, you should be able to get the value of the translation. As you can observe an animation moves the Y property from zero to a specific negative value (based on the control you took focus on).

Option 1: I have not been able to write a descent way of handling this value but you should be able to resize your controls to fit in what's left of the screen.

Option 2.0 (bad): You can cancel or remove this animation. The keyboard will be on top of the screen without any movement. Your turn now to move/resize your controls to fit the remaining space.

    public MainPage()
    {
        this.InitializeComponent();

        PhoneApplicationFrame frame = (App.Current as App).RootFrame;
        var group = (frame.RenderTransform as TransformGroup);
        group.Children.RemoveAt(0); // remove translate transform
    }

Option 2.1: There's an issue with 2.0: removing the transform will prevent you from being notified about the keyboard. Setting up a reverse animation on your page's child when the Y property changes will "kind of cancel" the original translation.

<Grid x:Name="LayoutRoot" Background="Transparent" VerticalAlignment="Stretch">
    <Grid.RenderTransform>
        <TransformGroup>
            <TranslateTransform />
        </TransformGroup>
    </Grid.RenderTransform>

    static void OnRootFrameTransformChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
    {
        // ... edit from the blog article ...
        MainPage page = source as MainPage;
        page.lb.Items.Add(newvalue);
        var oppositeTransform = (TranslateTransform)((TransformGroup)page.RenderTransform).Children[0];
        if (newvalue < 0.0)
        {
            page.IsSipVisibleGuess.IsChecked = true;
            oppositeTransform.Y = -newvalue;
        }
        else if (newvalue == 0.0)
        {
            page.IsSipVisibleGuess.IsChecked = false;
            oppositeTransform.Y = 0;
        }

I'm sorry none of these options will magically solve the problem but it may help you code what fits best for your app.

If you find a better solution out of this, please post it as an answer.