在XAML中更改gridview的项目环绕顺序

Question

我有Windows 8 Metro应用程序，它具有gridview，其中有项目&组。

我希望我的gridview的包装顺序是从左到右，而不是自上而下，如截图所示。

是否可能以及如何？

更新：下面是我使用的相关代码;

GridView的XAML

<!-- Horizontal scrolling grid used in most view states --> 
    <local:MyGridView 
     x:Name="itemGridView" 
     AutomationProperties.AutomationId="ItemGridView" 
     AutomationProperties.Name="Grouped Items" 
     Grid.RowSpan="2" 
     Padding="116,137,40,46" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     ItemTemplate="{StaticResource VariableSizedTileItem}" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="ItemView_ItemClick"> 


     <GridView.ItemsPanel> 
      <ItemsPanelTemplate>       
       <VirtualizingStackPanel Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Grid Margin="1,0,0,6"> 
          <Button 
           AutomationProperties.Name="Group Title" 
           Click="Header_Click" 
           Style="{StaticResource TextPrimaryButtonStyle}" > 
           <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> 
            <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> 
           </StackPanel> 
          </Button> 
         </Grid> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </local:MyGridView> 

     <DataTemplate x:Key="VariableSizedTileItem"> 
     <Grid> 
      <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> 
       <Image Source="{Binding Image}" Stretch="UniformToFill"/> 
      </Border> 
      <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"> 
       <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="20" Margin="15,0,15,0"/> 
       <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> 
      </StackPanel> 
     </Grid> 
    </DataTemplate> 

自定义大小可变的GridView

public class MyGridView : GridView 
{ 
    private List<Size> _sequence; 

    public MyGridView() 
    { 
     _sequence = new List<Size> 
      { 
       LayoutSizes.PrimaryItem, 
       LayoutSizes.SecondarySmallItem, 
       LayoutSizes.SecondarySmallItem, 
       LayoutSizes.OtherSmallItem, 
       LayoutSizes.OtherSmallItem, // 5 
       LayoutSizes.OtherSmallItem, 
       LayoutSizes.SecondaryTallItem, // 7 
       LayoutSizes.OtherSmallItem, 
       LayoutSizes.SecondarySmallItem, // 9 
       LayoutSizes.OtherSmallItem, 
       LayoutSizes.SecondarySmallItem, // 11 
       LayoutSizes.SecondarySmallItem, 
       LayoutSizes.OtherSmallItem, 
       LayoutSizes.OtherSmallItem 
      }; 

    } 

    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) 
    { 
      var dataItem = item as SyndicatedDataItem; 
      int index = -1; 

      if(dataItem != null) 
      { 
       index = dataItem.Group.Items.IndexOf(dataItem); 
      } 

      int colVal; 
      int rowVal; 

      if (index >= 0 && index < _sequence.Count) 
      { 
       colVal = (int)_sequence[index].Width; 
       rowVal = (int)_sequence[index].Height; 
      } 
      else 
      { 
       colVal = (int)LayoutSizes.OtherSmallItem.Width; 
       rowVal = (int)LayoutSizes.OtherSmallItem.Height; 
      } 

      VariableSizedWrapGrid.SetRowSpan(element as UIElement, rowVal); 
      VariableSizedWrapGrid.SetColumnSpan(element as UIElement, colVal); 


      base.PrepareContainerForItemOverride(element, item); 
    } 

    /* 14 items style */ 
    public static class LayoutSizes 
    { 
     public static Size PrimaryItem = new Size(6, 2); 
     public static Size SecondarySmallItem = new Size(3, 1); 
     public static Size SecondaryTallItem = new Size(2, 2); 
     public static Size OtherSmallItem = new Size(2, 1); 
    } 
} 

Answer 1

替换您VariableSizedWrapGrid与下面的代码。我认为这可能会对你有所帮助。

<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" 
         Orientation="Vertical" Margin="0,0,80,0" 
         MaximumRowsOrColumns="3"/> 

我希望它能解决您的问题。

谢谢。