Changing gridview's item wrapping order in XAML - xaml

Question

I've Windows 8 Metro app that has gridview that has items & groups within.
I want my gridview's wrap order to be left to right instead of top-down as seen in the screenshot.
Is it possible and how?
Update: Here's the related code I'm using;
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>
Custom variable sized 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

Replace your VariableSizedWrapGrid with following code. I think it might help you.
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150"
Orientation="Vertical" Margin="0,0,80,0"
MaximumRowsOrColumns="3"/>
I hope it will solve your issue.
Thank You.