Grid Row Is Getting Scrolled on click of Text Box in another Row

[WPCentral Question]

Hi,

I need to implement the XAML page in which there is TextBox at the bottom of the page. I have implemented the desired functionality,
have created one grid with two rows. In the first row I have mentioned the Heading Text and in the Second row I have Created the Text Box alligned it Veritically at bottom. The problem is that When I am clicking the text box the entire page is getting scrolled upwards beyond screen and the header is getting hide. I need that only the 2nd Row having the text box should get scrolled and not the first Row. The row having the Header should remain intact and visible even when the user clcik the TextBox.

Followning is my code snippett:

<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Style="{StaticResource StackPanelHeaderStyle}" Height="100">
<TextBlock Style="{StaticResource StackPanelHeaderStyleTextBlock}" Text="Comments" />
</StackPanel>
<!--<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkithoneTextBox VerticalScrollBarVisibility="Auto" x:Name="txtusername" MaxHeight="300" BorderThickness="1" BorderBrush="Black" Foreground="Black" TextWrapping="Wrap" Height ="Auto" Width="432" AcceptsReturn="True" Background="Red" VerticalAlignment="Bottom"/>
</Grid>-->
<ScrollViewer Grid.Row="1">
<toolkithoneTextBox VerticalScrollBarVisibility="Auto" x:Name="txtusername" MaxHeight="300" BorderThickness="1" BorderBrush="Black" Foreground="Black" TextWrapping="Wrap" Height ="Auto" Width="432" AcceptsReturn="True" Background="Red" VerticalAlignment="Bottom"/>
</ScrollViewer>
</Grid>