WP virtual keyboard hides bottom UI element

Question

I have a layout in my Windows Phone 8 app with a TextBox near the top and an important element at the bottom of the layout. The issue I am having is that when the text box gets focus, the virtual keyboard will popup and hide the element at the bottom. The user needs to leave the text box for the element in bottom to be visible again.

Here is a simplified version of the page code, my important element is represented by a red rectangle.

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" />
    <Rectangle Grid.Row="1" Fill="Gray"/>
    <Rectangle Grid.Row="2" Fill="Red" Height="100"/>
</Grid>

Preferably I would like the layout to change so the red rectangle is moved to above (North of) the virtual keyboard. Is it possible?

Answer 1

On Windows Phone 8 there is no way to know that part of your screen is obscured by the SIP (software input panel, aka keyboard). One brute-force solution is to collapse the middle grid row to Height = 0 when the textbox gets focus (assuming you don't care about that content), or animate the important UI directly below the textbox when it gets focus; you could use a visual state for either suggestion. If the screen actually scrolls and the textbox is sometimes at the bottom and not the top, it gets more complicated.

Answer 2

you should to try something like this: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/99652e87-113c-47fa-a8e7-60f11fc9f160/virtual-keyboard-covering-textbox