How to force keyboard not overlap the stack panel

Question

I am new to WP development and trying to get hands-on.

If you look at wallet pin screen, focus is automatically set to textbox so that user can start typing and also the keyboard does not hides/overlaps done & cancel button.

Also, If you hit back key, those buttons remain at bottom as shown below.

I am also trying to have same kind of UI. However, In my case

1. I am not able to set focus to textbox as soon as page is loaded. I can't get .Focus() method of textbox in OnNavigatedTo event. Where should i do this ?

2. When i manually tap textbox to enter a value, the keyboard overlaps my stackpanel containing 'save' & 'cancel' button as shown below. I don't want this to happen. Instead the screen should look like as shown in 2nd image.

Below is the XAML code i tried.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <TextBlock Name="txtLimit" TextWrapping="Wrap" Text="Enter the value" Style="{StaticResource PhoneTextSubtleStyle}"/> 
        <TextBox AcceptsReturn="True" InputScope="Number"  />
    </StackPanel>

    <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal" >
        <Button Content="save" Width="200" />
        <Button Content="cancel" Width="200"/>
    </StackPanel>
</Grid>

Answer 1

For setting the focus for first time navigation you apparently have to set this in the Loaded event handler.

For back navigation (from when you application is switched away), the one in OnNavigatedTo will fire as you'd expect.

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += (sender, args) => this.textBox.Focus();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        this.textBox.Focus();
    }

However you will need to add your buttons to the ApplicationBar to show below the on-screen keyboard.

However the SDK doesn't allow use of rectangular buttons in the application bar, only icon buttons.

Answer 2

In the OnNavigatedTo method, can you try to use the Dispatcher like this :

Dispatcher.BeginInvoke(()=>{
    this.textBox.Focus();
  });

And, as pointed out, you can NOT have rectangular buttons in the appBar but you can use standard one (like the linked in button for example).