Grupowanie GridView w Windows 8 Metro App

Question

Czy ktoś może mi dać wskazówki, jak wykonać grupowanie w GridView dla aplikacji Metro, jak pokazano na zrzucie poniżej.

Ten zrzut ekranu jest z Developer Resources for Windows Metro Apps, ale niestety nie ma opisu jak ją osiągnąć.

Mam następujący fragment kodu:

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#:

W Code-Behind I wykonaj następujące czynności w metodzie 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; 

Bez względu na to, co robię, nie jestem w stanie pogrupować elementów na liście kontynuowanej, tak jak w Screenshot. Kod ten tworzy osobne listy zgrupowane obok siebie.

Answer 1

Nie można tego zrobić przy użyciu domyślnych stylów widoku siatki.

Być może trzeba będzie użyć jednego elementu listy none zgrupowane i dodać specjalne przedmioty z innego szablonu poz ...

Niestety

Answer 2

Dodam nagłówki jako przedmioty do GridView i użyć TemplateSelector aby wyświetlić elementy właściwą drogę ...

Answer 3

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

Answer 4

może mam rozwiązanie. W moim projekcie musiałem utworzyć listę kontaktów w porządku alfabetycznym, na przykład w aplikacji Osoby.

użyłem GridView (z tego sample), A CollectionViewSource i wrappanel znalazłem w WinRT XAML Toolkit (można dostać z pakietem Nuget lub kopiuj/wklej kod źródłowy). Umożliwia umieszczanie przedmiotów w kolumnach.

Przykład

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(); 
      } 
     } 
} 

widok

<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>