垂直滚动gridview XAML windows store应用

Question

如何在windows store app xaml中编辑GRIDVIEW，以便我们可以使其垂直滚动而不是水平。 使用XAML应该我们手动使用滚动视图做一个新的用户元素，或者有什么简单的方法来实现这个与Windows应用商店。

<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

解决创建自定义网格视图模板

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> 

很好的教程在：custom grid view tutorial

Answer 2

我发现最简单的方法是只使用一个ListView并将项目设置为包裹网格。

这对我的作品

 <ListView 
        Width="1300" 
        Height="1000" 
        Margin="20,0,20,0"> 

      <ListView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ListView.ItemsPanel> 
     </ListView> 

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