Scrolling page with keyboard shown - xaml

Question

I have an issue:
I have a fixed height page in a scroll view:
Here is the page
When i popup the keyboard:
Now the keyboard has 50% of the screen, i want the visible part of the page to scroll - how to make it. Because if the user wont tape on the page - keyboard wont close, some user will try to scroll till they get to the Send button.
Here is my xaml:
<ScrollViewer HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0">
<Grid Margin="0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
<RowDefinition Height="80"/>
<RowDefinition Height="60"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="#FFE3E2E2" Margin="0"></Rectangle>
<TextBlock x:Name="Comment" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="Black" FontSize="22"/>
<TextBlock Grid.Row="2" Margin="10" x:Name="FeedbackTitleLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgwrgggggg" VerticalAlignment="Center" Foreground="Black" FontSize="24"/>
<TextBox x:Name="FeedbackTitle" HorizontalAlignment="Stretch" Margin="0,0,0,0" Grid.Row="3" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
<TextBlock Margin="10" x:Name="FeedbackContentLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
<TextBox x:Name="FeedbackContent" HorizontalAlignment="Stretch" Margin="0" Grid.Row="5" TextWrapping="Wrap" Text="" VerticalAlignment="Stretch" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
<StackPanel Grid.Row="6" Orientation="Horizontal">
<TextBlock Margin="10,0,10,0" x:Name="AdditionalItemsLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgsgsegsrg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
<local:Button2 Height="80" x:Name="Photo" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Stretch" Width="177" Tap="Photo_Tap"/>
</StackPanel>
<local:Button3 x:Name="Send" HorizontalAlignment="Stretch" Margin="10" Height="80" Grid.Row="8" VerticalAlignment="Stretch" Tap="Send_Tap"/>
<Grid Margin="10" Name="AttachmentGrid" Grid.Row="7" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="0,10,10,10" Grid.ColumnSpan="2" x:Name="AttachedFilesLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="0" Foreground="Black" FontSize="24"/>
<StackPanel Grid.Row="2" x:Name="ImageThumbs" Orientation="Horizontal">
</StackPanel>
<Rectangle VerticalAlignment="Center" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Height="40" Width="40" Grid.Column="1" Fill="#FFC2C2C2" Stroke="Black" RadiusX="5" RadiusY="5" Tap="DeleteAttach_Tap"/>
<Image Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" Grid.Column="1" Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" Source="../*/delete.png"/>
</Grid>
<Grid Name="MessageGrid" Margin="10" Visibility="Collapsed" Grid.Row="1">
<Rectangle Fill="#00A7D1" Margin="0,0,0,0" Height="80" RadiusX="5" RadiusY="5"/>
<TextBlock x:Name="Message" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="White" FontSize="22"/>
</Grid>
</Grid>
</ScrollViewer>
Example of what i want it to look like, go to the contact adding in WP, add name:
The hightlighted area can be scrolled, i want it in my app...

Answer 1

I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.