How to design GridView to display with scrolling

1
votes

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>
2
microsoft-metrowinrt-xaml

2 Answers

1
votes

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 .

0
votes

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 
    }); 
}