ScrollViewer - scroll does not work with images inside ScrollViewer - silverlight

Question

I have a ScrollViewer, inside of which is some content. The problem is that the scroll doesn't work properly. When you scroll the content with your finger and then release, the scrollable area always snaps back to the top. It just bounces like elastic, and won't stay at the bottom where you scrolled it to.
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<StackPanel>
<Grid VerticalAlignment="Top">
<Button Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<StackPanel>
<TextBlock Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I've actually had a similar problem before, which I managed to solve with help from Stack Overflow... and yet, here I am again, asking for help on the same topic...
thanks heaps!
UPDATE:
Based on suggestions, I removed the StackPanels and replaced them with Grids. The formatting is perfect, but I still have the same scroll problem! The content still snaps back to the beginning!
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="0" Padding="0" Click="CloseDetailPanel" HorizontalAlignment="Right" >
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
</Grid>
<Grid Grid.Row="1">
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>

Answer 1

Its because of the stackPanel, try replacing it with something else like Grid.
Try this, I removed a redundant grid and added stretched alignment for the scroll viewer:
<Grid Name="DetailPane" Margin="0,0,0,65" VerticalAlignment="Bottom" Visibility="Collapsed" Background="White" Opacity="0.85">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Click="CloseDetailPanel" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Content>
<Image Source="images\appbar.close.rest.small.png" Width="20" Height="20"></Image>
</Button.Content>
</Button>
<ScrollViewer x:Name="contentScrollViewer" VerticalAlignment="Stretch" Grid.Row="1"HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Padding="10,0,10,0" HorizontalAlignment="Left" Name="titleTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" FontWeight="Bold" />
<Image x:Name="contentThumbnail" Grid.Row="1" Source="bild.jpg" Visibility="Visible" Width="400" Height="300" Margin="10" />
<TextBlock Grid.Row="2" Padding="10" HorizontalAlignment="Left" Name="statusTextBlock" TextWrapping="Wrap" Foreground="#FF2B2929" />
<HyperlinkButton Grid.Row="3" Padding="0,5,0,10" x:Name="WikipeadiaLink" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="More on Wikipedia" TargetName="_blank" NavigateUri="" Foreground="Blue" FontSize="18" />
</Grid>
</ScrollViewer>
</Grid>

Answer 2

What solved this, in the end, was adding a static height to the ScrollViewer. I realise noone could have seen this as I omitted the part of the code that shows that this is inside a PivotItem.
According to this discussion: http://forums.create.msdn.com/forums/t/84933.aspx a ScrollViewer stops working properly when it is inside a Pivot, unless it has a static height defined.
Infuriating!