ScrollViewer scrolls down but snaps back to top

Question

Hi I am trying to use a ScrollViewer but it is not working properly it keeps snapping back to the top when I drag down to view rest of the view.

I've tried setting the height statically to the design height of the page but that does not work either and tried wrapping it in a grid.

here is my xaml

<ScrollViewer Height="768">
    <!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0"  Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="myApp" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="Menu" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223"  HorizontalAlignment="Left" Margin="0,15,0,0" Name="rectangle1"  VerticalAlignment="Top" Click="rectangle1_Click">
            <Image Name="image1" Source="/Images/1.png" />

        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,15,0,0"  HorizontalAlignment="Left" Name="rectangle2"  VerticalAlignment="Top" Click="rectangle2_Click">
            <Image Name="image2" Source="/Images/2.png" />

        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,138"  HorizontalAlignment="Left" Name="rectangle3"  VerticalAlignment="Bottom" Click="rectangle3_Click">
            <Image Name="image3" Source="/Images/3.png" />

        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,0,0,138"  HorizontalAlignment="Left" Name="rectangle4"  VerticalAlignment="Bottom">
            <Image Name="image4" Source="/Images/4.png" />

        </Button>
        <Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,-89" HorizontalAlignment="Left" Name="rectangle" VerticalAlignment="Bottom" IsTabStop="True">
            <Image Name="image5" Source="/Images/5.png" />
        </Button>
        <TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="79,183,0,0" Name="textBlock1" Text="Stop Gap" VerticalAlignment="Top" Width="133" />
            <TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="285,183,0,0" Name="textBlock2" Text="Time Lapse" VerticalAlignment="Top" Width="150" />
            <TextBlock Foreground="White" Height="40" FontSize="30" HorizontalAlignment="Left" Margin="96,413,0,0" Name="textBlock3" Text="Projects" VerticalAlignment="Top" Width="116" />
            <TextBlock Foreground="White" Height="50" HorizontalAlignment="Left" FontSize="30" Margin="321,413,0,0" Name="textBlock4" Text="Settings" VerticalAlignment="Top" Width="114" />


        </Grid>
    <ScrollViewer>
    </ScrollViewer>

</Grid>
</ScrollViewer>

I would appreciate if you could help me thanks.

Answer 1

The reason why your current implementation does not work is because your definition essentially tells Silverlight to place all of the Image controls and TextBlock controls into a single grid cell. This means that all of the objects using the grid as a basis of their positioning and scaling, rather than stacking against each other as you seem to expect in your code.

The result of this is the controls overlapping each other, making it look like there is only 1 control visible (you may be seeing 2 controls as you are forcing "bottom" alignment to some items in the grid, which means these will be aligned to the bottom of the cell and won't overlap the other controls that are aligned to the top. This is probably why it looks like only part of the list is being shown by the ScrollViewer).

Josemiguel's answer does explain one suitable solution. Another (and I think) simpler choice would be to use one or more StackPanel controls, which will force the controls to stack against each other in a specified orientation (Vertical is default). It is also possible to stack and nest StackPanels against eachother also.

MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel(v=vs.95).aspx - T - Scroll to the bottom of the MSDN page to see a nice example of a stackpanel using several coloured rectangles.

Answer 2

The best way to achive it is by using some kind of control like WrapPanel and create an empty DataTemplate to dynamically add all the items you want. Here and here you'll find an example.