re size screen area when keyboard is open WP8

Question

I am making an application in which I want to resize screen area when keyboard is open. Just like in this calendar application of windows phone.

After opening keyboard look screen should resize and also I should be able to scroll till the end of the page without closing keyboard:

In my application i am not able to do these things. In my page last elements of the page stays behind keyboard if i want to access that elements of the page i have to close keyboard but in calendar application of Nokia does great job by re sizing the page somehow so i can access whole part of page even though keyboard is open.

Can somebody help me out in this problem?

Here is code for my page

<!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Style="{StaticResource HeaderStackPanelStyle}">
        <TextBlock TextAlignment="Center" Style="{StaticResource PhoneTextBlockHeaderStyle}" Text="Add Claim Item" />
      </StackPanel>
    <ScrollViewer Name="MainPageScroller" Grid.Row="1">
        <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"  Margin="12,0,12,12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>
        <StackPanel Name="MainContentPenal" Grid.Row="0">
            <StackPanel  >
                    <TextBlock TextAlignment="Left" Text="Category" Style="{StaticResource PhoneTextFirstItemStyle}" >    
                    </TextBlock>
                    <ToolKit:ListPicker x:Name="CategoryListPicker" 
                                        ItemsSource="{Binding Categories}"  SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" SelectedIndex="{Binding Categories,Converter={StaticResource DefaultSetter}}"
                                         ExpansionMode="FullScreenOnly" SelectionMode="Single"  HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"   SelectionChanged="CategorySelection" ItemTemplate="{StaticResource CategoryTamplate}"  FullModeItemTemplate="{ StaticResource CategoryTamplate}"  >

                    </ToolKit:ListPicker>
             </StackPanel  >
                <StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper}, ConverterParameter=amount}" >
                    <TextBlock TextAlignment="Left" Text="Amount" Style="{StaticResource PhoneTextFirstItemStyle}" />
                    <TextBox x:Name="AmountTextBox"  Style="{StaticResource WebExpensesTextBoxStyle}" Text="{Binding Amount, Mode=TwoWay}"  KeyUp="numericTextBox_keyUp" KeyDown="numericTextBox_keyDown"  InputScope="Number" TextChanged="TextChange_Event" />
                </StackPanel>
                <StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper},ConverterParameter=mileage}"  >

                    <TextBlock TextAlignment="Left" Text="Mileage units" Style="{StaticResource PhoneTextFirstItemStyle}" />
                    <TextBox x:Name="mileageTextBox" Text="{Binding MileageUnit, Mode=TwoWay}"  Style="{StaticResource WebExpensesTextBoxStyle}"  KeyUp="numericTextBox_keyUp" KeyDown="numericTextBox_keyDown" TextWrapping="Wrap" InputScope="Number"  TextChanged="TextChange_Event"/>
                </StackPanel>
                <StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper}, ConverterParameter=trip}" >
                    <TextBlock TextAlignment="Left" Text="Mileage" Style="{StaticResource PhoneTextFirstItemStyle}" />
                    <Button Content="Add mileage" Click="AddMileage"/>
                </StackPanel>
                <StackPanel  Visibility="{Binding SelectedCategory,Converter={StaticResource TravelMileageHelper}, ConverterParameter=trip}"  >
                    <StackPanel Visibility="{Binding TripMasterModel, Mode=TwoWay, Converter={StaticResource VisibiltyHelper}}">
                        <Grid  DataContext="{Binding TripMasterModel}">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Grid.Row="0" Grid.Column="0">
                                <TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5 0 0 0" VerticalAlignment="Center" Text="{Binding Start}"></TextBlock>
                            </StackPanel>
                            <StackPanel Grid.Row="0" Grid.Column="1">
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="&#xE111;" FontFamily="Segoe UI Symbol" Style="{StaticResource PhoneTextNormalStyle}"/>
                            </StackPanel>
                            <StackPanel Grid.Row="0" Grid.Column="2">
                                <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding End}"></TextBlock>
                            </StackPanel>
                            <StackPanel Grid.Row="0" Grid.Column="3">
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Distance}"/>
                            </StackPanel>
                            <StackPanel Visibility="{Binding subTrips,Converter={StaticResource VisibiltyHelper}}" Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="4" >
                                <TextBlock HorizontalAlignment="Left" Text="via"/>
                                <ItemsControl  ItemsSource="{Binding subTrips}" ItemTemplate="{StaticResource SubTripTemplate}" HorizontalAlignment="Left">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal"/>

                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                </ItemsControl>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </StackPanel>
                <StackPanel   >
                    <TextBlock TextAlignment="Left" Text="Description" Style="{StaticResource PhoneTextFirstItemStyle}" />
                    <TextBox x:Name="DescriptionTextBox"  Style="{StaticResource WebExpensesTextBoxStyle}" Text="{Binding Description, Mode=TwoWay}" Height="120" TextWrapping="Wrap"  TextChanged="TextChange_Event" KeyDown="DescriptionTextBox_KeyDown"/>
                </StackPanel>

                <StackPanel  >
                    <ToolKit:DatePicker  HeaderTemplate="{StaticResource DatePickerHeader}"   Value="{Binding SelectedDate,Mode=TwoWay}" ValueStringFormat="{Binding DateFormat}"  HorizontalAlignment="Left"  x:Name="DatePicker" VerticalAlignment="Top"  Width="200"    />
                </StackPanel>
                <StackPanel Visibility="{Binding Currencies, Converter={StaticResource VisibiltyHelper}}" >
                    <TextBlock TextAlignment="Left" Text="Currency" Style="{StaticResource PhoneTextFirstItemStyle}" />
                    <ToolKit:ListPicker x:Name="CurrencyListPicker"
               ItemsSource="{Binding Currencies}" SelectedItem="{Binding SelectedCurrency, Mode=TwoWay}"
               DisplayMemberPath="Name" SelectedIndex="{Binding Currencies,Converter={StaticResource DefaultSetter}}"  FullModeItemTemplate="{ StaticResource CurrencyTamplate}"  >
                    </ToolKit:ListPicker>
                </StackPanel>
                <StackPanel Visibility="{Binding Clients, Converter={StaticResource VisibiltyHelper}}" >
                    <TextBlock TextAlignment="Left" Text="Client" Style="{StaticResource PhoneTextFirstItemStyle}"/>
                    <ToolKit:ListPicker x:Name="ClientListPicker"
               ItemsSource="{Binding Clients}" SelectedItem="{Binding SelectedClient, Mode=TwoWay}"
               ItemTemplate="{StaticResource ShowMember}" SelectedIndex="{Binding Clients,Converter={StaticResource DefaultSetter}}" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
                    </ToolKit:ListPicker>
                </StackPanel>
                <StackPanel Visibility="{Binding SubClients, Converter={StaticResource VisibiltyHelper}}" >
                    <TextBlock TextAlignment="Left" Text="Subclient" Style="{StaticResource PhoneTextFirstItemStyle}"/>
                    <ToolKit:ListPicker x:Name="SubClientListPicker"
               ItemsSource="{Binding SubClients,Mode=TwoWay}"
               DisplayMemberPath="Name" SelectedItem="{Binding SelectedSubclient, Mode=TwoWay}" SelectedIndex="{Binding SubClients,Converter={StaticResource DefaultSetter},Mode=TwoWay}" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
                    </ToolKit:ListPicker>
                </StackPanel>
                <StackPanel  Visibility="{Binding Vendors, Converter={StaticResource VisibiltyHelper}}"  >
                    <TextBlock TextAlignment="Left" Text="Vendor" Style="{StaticResource PhoneTextFirstItemStyle}"/>
                    <ToolKit:ListPicker x:Name="VendorListPicker"
               ItemsSource="{Binding Vendors}" SelectedItem="{Binding SelectedVendor, Mode=TwoWay}"
               DisplayMemberPath="Name" SelectedIndex="{Binding Vendors,Converter={StaticResource DefaultSetter}}"  SelectionChanged="vendorSelection"  FullModeItemTemplate="{ StaticResource ClientTemplate}" >
                    </ToolKit:ListPicker>
                </StackPanel>
                <StackPanel >
                    <TextBlock TextAlignment="Left" Text="Receipt" Style="{StaticResource PhoneTextFirstItemStyle}"/>
                    <Button Click="AddReceipt_Btn_Click" Content="Add receipt"/>
                </StackPanel>
                <StackPanel x:Name="ImagePenal">
                    <ItemsControl Width="Auto" HorizontalAlignment="Stretch" ItemsSource="{Binding ReceiptList}" ItemTemplate="{StaticResource ImageListTemplate}" >
                    </ItemsControl>
                </StackPanel>
            </StackPanel>

        </Grid>

    </ScrollViewer>

Answer 1

Give your content in between ListBox or ScrollViewer .

<ListBox>
//your textbox and everything
</ListBox>

or

<ScrollViewer>
//your textbox and everything
</ScrollViewer>