envasado/objetos flotando en GridView (XAML) grupo 'float: left' sobre el punto más elevado

Question

¿Cómo se escribe el código que fluye artículos en un grupo GridView (XAML-Win8), de acuerdo con el siguiente ilustración?

Actualmente tengo una costumbre TemplateSelector que selecciona una plantilla diferente (más grande) para el primer artículo, pero el flujo como se especifica aquí:

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

Wraps los numerales 1 a 3 de manera similar, pero luego coloca el tema 4 en posición de una pieza de 6, sin necesidad de rellenar los apartados 4 ni 5.

pregunta es; ¿Cómo se escribe el código que actúa de manera similar a CSS:

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

, lo que haría que las partidas de flujo como yo quiero?

Answer 1

Andreas Hammar me unía a una solución de trabajo:

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

creo que se podría hacer con un VSWG. He llegado a la mitad, pero no he tenido tiempo de terminarlo ...

Primero debe configurar los accesorios adjuntos VariableSizedWrapGrid.RowSpan y ColSpan, y eso tiene que establecerse en el contenedor de elementos, heredando el VSWG: http://blogs.u2u.be/diederik/post/2012/03/07/Databinding-to-the-VariableSizedWrapGrid-in-Windows-8-Metro.aspx

Y en su caso 2x2 para el primer elemento, 1x1 en el resto.

La medición del tamaño de las células se realiza en el primer elemento, a menos que especifique el ItemHeight etc explícitamente. Así que hay que lograr esto de alguna manera :) http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/569e048a-9f5e-4fb3-870a-380de5906e80 GT soporta elementos individuales de tamaño y todos los elementos que se muestran en el mismo tamaño. VSWG permite elementos de tamaño variable pero los tamaños de los artículos permitidos están en múltiplos enteros del tamaño de celda base. WG y VSWG trabajan en celdas de diseño. El tamaño de la celda de disposición está determinado por las propiedades ItemHeight y ItemWidth. Si estas propiedades no están establecidas, entonces el tamaño del primer artículo se usa como el tamaño de la celda y los artículos subsiguientes se miden en ese tamaño para WG; para VSWG, el ítem se mide en una multiplicación integral del tamaño de celda en función de las propiedades RowSpan y ColumnSpan. Parece que usted tiene que fijar la altura y la anchura de la VSWG con el fin de acomodar el tamaño del elemento más grande si usted no quiere el artículo para ser el primero en la lista. -> esta es la parte que no pude conocer.

Por último, la orientación horizontal.

Buena suerte!