Vertical scrolling gridview XAML window storage application

Question

how to edit GRIDVIEW in the Windows Store app xaml so that we can scroll it vertically, not horizontally. I use XAML if we manually create a new custom item using scrolling, or is there any simple way to achieve this using the store store application.

<GridView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding imagelist}"> <GridView.Resources> <DataTemplate x:Key="DataTemplate1"> <Grid Width="250" Height="250" Tapped="Grid_Tapped"> <Image Source="{Binding imsourceurl}"/> </Grid> </DataTemplate> </GridView.Resources> <GridView.ItemTemplate> <StaticResource ResourceKey="DataTemplate1"/> </GridView.ItemTemplate> </GridView> 

Answer 1

decided to create a custom mesh template

  public class AdaptableGridView : GridView { // default itemWidth private const double itemWidth = 100.00; public double ItemWidth { get { return (double)GetValue(ItemWidthProperty); } set { SetValue(ItemWidthProperty, value); } } public static readonly DependencyProperty ItemWidthProperty = DependencyProperty.Register("ItemWidth", typeof(double), typeof(AdaptableGridView), new PropertyMetadata(itemWidth)); // default max number of rows or columns private const int maxRowsOrColumns = 3; public int MaxRowsOrColumns { get { return (int)GetValue(MaxRowColProperty); } set { SetValue(MaxRowColProperty, value); } } public static readonly DependencyProperty MaxRowColProperty = DependencyProperty.Register("MaxRowsOrColumns", typeof(int), typeof(AdaptableGridView), new PropertyMetadata(maxRowsOrColumns)); public AdaptableGridView() { this.SizeChanged += MyGridViewSizeChanged; } private void MyGridViewSizeChanged(object sender, SizeChangedEventArgs e) { // Calculate the proper max rows or columns based on new size this.MaxRowsOrColumns = this.ItemWidth > 0 ? Convert.ToInt32(Math.Floor(e.NewSize.Width / this.ItemWidth)) : maxRowsOrColumns; } } 

XAML:

  <local:AdaptableGridView ItemWidth="250" x:Name="tumbview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ItemsSource="{Binding imagelist}" SelectionChanged="GridView_SelectionChanged" Margin="50,0,0,0" > <GridView.ItemsPanel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Horizontal" ItemWidth="{Binding ElementName=tumbview, Path=ItemWidth}" MaximumRowsOrColumns="{Binding ElementName=tumbview, Path=MaxRowsOrColumns}"/> </ItemsPanelTemplate> </GridView.ItemsPanel> 

nice tutorial at: customizable meshing tutorial

Answer 2

I found that the easiest way is to simply use a ListView and set the elements in a wrappedgrid.

It works for me

  <ListView Width="1300" Height="1000" Margin="20,0,20,0"> <ListView.ItemsPanel> <ItemsPanelTemplate> <WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" /> </ItemsPanelTemplate> </ListView.ItemsPanel> </ListView> 

Check out http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx