How to design GridView to display with scrolling - microsoft-metro

Question

How to design GridView in such a way that it display 3 images per row and can be scrolled up for the other Images behind? it seems this gridView displays images in a row.
Below I have 8 Pic in Gridview:
1) How to setup GridView to displays images with(3 images per row) or without specifying number of images per row and the rest will be viewed by scrolling up?
Thanks
< GridView HorizontalAlignment="Left" Margin="30,200,0,0" Grid.Row="1" VerticalAlignment="Top" Width="800" Height="400" >
//-- pic 1
< GridViewItem>
< Grid HorizontalAlignment="Left" Width="200" Height="200">
< Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
< Image Source="Images/M123.jpg" Tag="name" Tapped="Image_Tapped_1" Stretch="UniformToFill"/>
< /Border>
< StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
< TextBlock FontSize="30" Text="name" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
Style="{StaticResource TitleTextStyle}" Height="40" Margin="15,10,15,0"/>
</StackPanel>
</Grid>
</GridViewItem>
//- pic 2 using GridViewItem
//-- pic 3 using GridViewItem
//--- Pic 3 to Pic 8 GridViewItem
< / GridView>

Answer 1

Put the grid view in a scrollviewer and let the height of the gridview be auto ie it will take the height of the entire content and width of the grid view to a specific one so that t cqn take only 3 items
next step is to just enable the vertical scroll property of the scroll viewer and disable the horizontal scroll property.
i hope this solves the purpose .

Answer 2

try to use jquery plugin
http://gridviewscroll.aspcity.idv.tw/
function gridviewScroll() {
$('#<%=gvMain.ClientID%>').gridviewScroll({
width: 700,
height: 330,
freezesize: 2,
arrowsize: 30,
varrowtopimg: "Images/arrowvt.png",
varrowbottomimg: "Images/arrowvb.png",
harrowleftimg: "Images/arrowhl.png",
harrowrightimg: "Images/arrowhr.png",
headerrowcount: 2
});
}