Agrupación de GridView en la aplicación Metro de Windows 8

Question

¿Puede alguien darme algunas pistas sobre cómo realizar la agrupación dentro de un GridView para aplicaciones Metro como se muestra en la siguiente captura de pantalla?

captura de pantalla es de la Developer Resources for Windows Metro Apps, pero por desgracia no hay descripción de cómo lograrlo.

tengo el siguiente fragmento de código:

Xaml:

... 

    <Page.Resources> 
     <CollectionViewSource x:Name="cvs" IsSourceGrouped="true"/> 
    </Page.Resources> 

    <Grid Background="{StaticResource DefaultBackground}"> 

     <GridView x:Name="DefaultGridView" ItemsSource="{Binding Source={StaticResource cvs}}"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
         <Rectangle Fill="{Binding}" Width="100" Height="100" Margin="0 0 5 0"/> 
        </StackPanel> 
       </DataTemplate> 
      </GridView.ItemTemplate> 

      <GridView.GroupStyle> 
       <GroupStyle> 

        <GroupStyle.HeaderTemplate> 
         <DataTemplate> 
          <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" /> 
         </DataTemplate> 
        </GroupStyle.HeaderTemplate> 

        <GroupStyle.Panel> 
         <ItemsPanelTemplate> 
          <VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" /> 
         </ItemsPanelTemplate> 
        </GroupStyle.Panel> 

       </GroupStyle> 
      </GridView.GroupStyle> 


      <GridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Vertical" /> 
       </ItemsPanelTemplate> 
      </GridView.ItemsPanel> 


     </GridView> 

    </Grid> 

... 

C#:

En el código subyacente Yo lo siguiente en el Método OnNavigateTo:

 List<string> strList = new List<string>() { 
     "Red", "Red", "Red", "Red", "Red", "Red", 
     "Green", "Green","Green","Green","Green", 
     "Blue","Blue","Blue","Blue" }; 

    var groupedList = from s in strList 
         group s by s into g 
         orderby g.Key 
         select g; 


    cvs.Source = groupedList; 

No importa lo que haga, no puedo agrupar los elementos en una lista continua como en el Captura de pantalla. El Código da como resultado listas separadas agrupadas una al lado de la otra.

Answer 1

No se puede hacer utilizando los estilos de vista de cuadrícula predeterminados.

Puede que tenga que utilizar una lista de elementos no-agrupados y agregar elementos especiales con diferente plantilla de elementos ...

Lo sentimos

Answer 2

agrego las cabeceras como artículos para el gridview, y utilizar un TemplateSelector para mostrar los elementos de la manera correcta ...

Answer 3

http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

Answer 4

yo pueda tener una solución. En mi proyecto, tuve que crear una lista de contactos en orden alfabético, como la aplicación People.

he usado un GridView (con este sample), un CollectionViewSource y una WrapPanel que encontré en el WinRT XAML Toolkit (se puede obtener con el paquete NuGet o copiar/pegar el código fuente). Te permite poner tus artículos en columnas.

Ejemplo

ViewModel

class ContactListViewModel 
    { 

     public ContactListViewModel() 
     { 
      ContactSource = new CollectionViewSource(); 
      Contacts = new ObservableCollection<Contact>(); 

      Contacts.Add(new Contact("Gates","Bill")); 
      Contacts.Add(new Contact("Bush","Georges")); 
      Contacts.Add(new Contact("Obama","Barack")); 
      Contacts.Add(new Contact("Hollande","François")); 
      Contacts.Add(new Contact("Affleck","Ben")); 
      Contacts.Add(new Contact("Allen","Woody")); 
      Contacts.Add(new Contact("Hendrix","Jimi")); 
      Contacts.Add(new Contact("Harrison", "Georges")); 

      Contacts = new ObservableCollection<Contact>(Contacts.OrderBy(c => c.Name)); 
      ContactSource.Source = GetGroupsByLetter(); 
      ContactSource.IsSourceGrouped = true; 

     } 

     #region Contacts 
     public ObservableCollection<Contact> Contacts 
     { 
      get; 
      protected set; 
     } 

     public CollectionViewSource ContactSource 
     { 
      get; 
      protected set; 
     } 
     #endregion 


     internal List<GroupInfoList<object>> GetGroupsByLetter() 
     { 
      List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>(); 

      var query = from item in Contacts 
         orderby ((Contact)item).Name 
         group item by ((Contact)item).Name[0] into g 
         select new { GroupName = g.Key, Items = g }; 
      foreach (var g in query) 
      { 
       GroupInfoList<object> info = new GroupInfoList<object>(); 
       info.Key = g.GroupName; 
       foreach (var item in g.Items) 
       { 
        info.Add(item); 
       } 
       groups.Add(info); 
      } 

      return groups; 
     } 

     public class GroupInfoList<T> : List<object> 
     { 

      public object Key { get; set; } 


      public new IEnumerator<object> GetEnumerator() 
      { 
       return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator(); 
      } 
     } 
} 

Ver

<DataTemplate x:Key="contactTemplate"> 
    <Grid Width="225" Height="75" Background="#55FFFFFF"> 
     <Grid Margin="10"> 
      <Grid.RowDefinitions> 
       <RowDefinition/> 
       <RowDefinition/> 
      </Grid.RowDefinitions> 
      <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="20"> 
       <Run Text="{Binding FirstName}"/> 
       <Run Text="{Binding Name}"/> 
      </TextBlock> 
      <TextBlock Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Email}" FontSize="13" Foreground="#FFDDDDDD"/> 
     </Grid> 
    </Grid> 
</DataTemplate> 

<DataTemplate x:Key="letterTemplate"> 
    <Grid Margin="5,0,0,5" Width="225"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <TextBlock Text="{Binding Key}" Style="{StaticResource GroupHeaderTextStyle}" VerticalAlignment="Center"/> 
     <Rectangle Grid.Row="1" Fill="#BBEEEEEE" Height="1" Margin="0,7,0,0"/> 
    </Grid> 
</DataTemplate> 
</Page.Resources> 



<!-- 
This grid acts as a root panel for the page that defines two rows: 
* Row 0 contains the back button and page title 
* Row 1 contains the rest of the page layout 
--> 
<Grid Style="{StaticResource LayoutRootStyle}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <!-- Back button and page title --> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Opacity="0"/> 
     <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Manager" Style="{StaticResource PageHeaderTextStyle}"/> 
    </Grid> 

    <GridView Grid.Row="1" 
     ItemsSource="{Binding Path=ContactSource.View}" 
     SelectionMode="Multiple" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     Padding="116,10,40,46" 
     ItemTemplate="{StaticResource contactTemplate}"> 

     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <local:WrapPanel Orientation="Vertical"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 

     <GridView.GroupStyle> 
      <GroupStyle HeaderTemplate="{StaticResource letterTemplate}"> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 
</Grid>