Wrap / float elements in the GridView (XAML) group "float: left" on the topmost element

Question

How to write code that transfers elements in a GridView group (XAML-Win8), as shown in the illustration below?

I currently have a custom TemplateSelector that selects a different (larger) template for the first element, but a stream, as indicated here:

 <GroupStyle.Panel> <ItemsPanelTemplate> <q42:WrapPanel Orientation="Horizontal" Width="440" Margin="0,0,80,0"/> <!-- also tried VariableSizedWrapGrid --> </ItemsPanelTemplate> </GroupStyle.Panel> 

Wraps items 1 through 3 in the same way, but then puts item 4 at position 6 of the position without filling items 4 and 5.

The question becomes; how to write code that acts like css:

 .item { display: inline-block; } .item1 { float: left; } 

which will make the elements flow as I want?

Answer 1

Andreas Hammar connected me with a working solution:

 using System.Collections.Generic; using Application1.Data; using Windows.Foundation; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Application1 { public class MyGridView : GridView { int _rowVal; int _colVal; readonly 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(DependencyObject element, object item) { base.PrepareContainerForItemOverride(element, item); var dataItem = item as SampleDataItem; var index = -1; if (dataItem != null) { index = dataItem.Group.Items.IndexOf(dataItem); } 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); } } 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); } } 

  <local:MyGridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </local:MyGridView.ItemsPanel> <local:MyGridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <Button AutomationProperties.Name="Group Title" Content="{Binding Title}" Click="Header_Click" Style="{StaticResource TextButtonStyle}"/> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid ItemWidth="80" ItemHeight="160" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </local:MyGridView.GroupStyle> </local:MyGridView> 

Answer 2

I think this can be done using VSWG. I got halfway, but did not have time to finish it ...

First you need to set the attached parameter VariableSizedWrapGrid.RowSpan and ColSpan - and you need to set it in the element container, inheriting VSWG: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid -in-Windows-8-Metro.aspx

And in your case 2x2 for the first element, 1x1 for the rest.

Cell size measurement is performed on the first item unless you explicitly specify ItemHeight, etc. So you should do it somehow :) http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/569e048a-9f5e-4fb3-870a-380de5906e80 WG supports individual elements and all items shown in the same size. VSWG allows the use of elements with a variable size, but the allowed element sizes are integer multiples of the size of the base cell. WG and VSWG work in layout cells. The size of the layout cell is determined by the ItemHeight and ItemWidth properties. If these properties are not set, the size of the first element is used as the cell size, and subsequent elements are measured in this size for WG; for VSWG, an element is measured by integral multiplication of the cell size based on the RowSpan and ColumnSpan properties. It seems that you should set the height and width of the VSWG to fit the size of the largest element if you do not want the element to be the first in the list. -> This is the part that I did not go around with.

Finally, horizontal orientation.

Good luck