विंडोज 8 में ग्रुपविंग ग्रुप व्यू 0 मेट्रो ऐप

Question

क्या कोई मुझे नीचे दिए गए स्क्रीनशॉट में दिखाए गए मेट्रो ऐप्स के लिए ग्रिड व्यू के भीतर समूह को पूरा करने के लिए कुछ संकेत दे सकता है।

यह स्क्रीनशॉट Developer Resources for Windows Metro Apps, से है लेकिन दुर्भाग्य से वहाँ कोई विवरण नहीं है कि यह कैसे पूरा करने के लिए है।

मैं निम्नलिखित कोड का टुकड़ा है:

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> 

... 

सी #:

कोड-पीछे मैं 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; 

कोई फर्क नहीं पड़ता कि मैं क्या करता हूं, मैंकी तरह जारी सूची में आइटम को समूहित करने में सक्षम नहीं हूंस्क्रीनशॉट। कोड अलग-अलग सूचियों में समूहबद्ध तरफ से परिणाम देता है।

Answer 1

यह डिफ़ॉल्ट ग्रिड दृश्य शैलियों का उपयोग करके नहीं किया जा सकता है।

आप एक कोई-वर्गीकृत किया आइटम सूची का उपयोग करें और विभिन्न आइटम टेम्पलेट के साथ विशेष आइटम जोड़ने के लिए हो सकता है ...

क्षमा

Answer 2

मैं gridview करने के लिए आइटम के रूप में हेडर जोड़ना होगा, और एक TemplateSelector का उपयोग तत्वों सही तरीके से प्रदर्शित करने के लिए ...

Answer 3

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

Answer 4

मैं एक समाधान हो सकता है। मेरे प्रोजेक्ट में, मुझे लोग ऐप की तरह वर्णमाला क्रम में संपर्कों की एक सूची बनाना पड़ा।

मैं एक GridView (इस sample के साथ), एक CollectionViewSource और एक wrappanel मैं WinRT XAML Toolkit में पाया इस्तेमाल किया (आप NuGet पैकेज या प्रति के साथ प्राप्त कर सकते हैं/स्रोत कोड पेस्ट करें)। यह आपको अपने आइटम कॉलम में रखने की अनुमति देता है।

उदाहरण

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

देखें

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