Wrapping items horizontally in a VariableSizedWrapGrid - xaml

Question

I have a GridView containing VariableSizedWrapGrid, like this...
<local:MyGridview
Padding="116,0,0,0"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.Column="1"
Grid.Row="1"
SelectionMode="None"
ItemTemplateSelector="{StaticResource templateSelector}"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
IsItemClickEnabled="True"
ItemClick="itemGridView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Key}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" ItemWidth="1" ItemHeight="1" Margin="0,3,40,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</local:MyGridview>
Which displays items like this...
I want to make it stack items horizontally rather than vertically so that the orange tile sits next to the blue one rather than below it
I've tried changing the Orientation of the VariableSizedWrapGrid to Horizontal but this happens....
Am I doing something really silly?

Answer 1

Why did you set ItemWidth and ItemHeight to 1? Do you set proper ColumnSpan and RowSpan values from code? I suggest you to set ItemWidth and ItemHeight to something more big, maybe to the size of the smallest item. VariableSizedWrapGrid layout algorithm is not perfect, in my samples sometimes it places small items horizontally as you want and sometimes - not (I don't set VariableSizedWrapGrid Orientation at all).