Grouping GridView in Windows 8 Metro App

前端 未结 4 713
萌比男神i
萌比男神i 2021-02-06 11:27

Can someone give me some hints how to accomplish the grouping within a GridView for Metro Apps as shown in the Screenshot below.

4条回答
  •  天涯浪人
    2021-02-06 11:54

    I may have a solution. In my projet, I had to create a list of contacts in alphabetic order, like the People app.

    I used a GridView (with this sample), a CollectionViewSource and a wrappanel I found in the WinRT XAML Toolkit (you can get with NuGet package or copy/paste the source code). It allow you to put your items in columns.

    Example

    enter image description here

    ViewModel

    class ContactListViewModel
        {
    
            public ContactListViewModel()
            {
                ContactSource = new CollectionViewSource();
                Contacts = new ObservableCollection();
    
                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(Contacts.OrderBy(c => c.Name));
                ContactSource.Source = GetGroupsByLetter();
                ContactSource.IsSourceGrouped = true;
    
            }
    
            #region Contacts
            public ObservableCollection Contacts
            {
                get;
                protected set;
            }
    
            public CollectionViewSource ContactSource
            {
                get;
                protected set;
            }
            #endregion
    
    
            internal List> GetGroupsByLetter()
            {
                List> groups = new List>();
    
                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 info = new GroupInfoList();
                    info.Key = g.GroupName;
                    foreach (var item in g.Items)
                    {
                        info.Add(item);
                    }
                    groups.Add(info);
                }
    
                return groups;
            }
    
            public class GroupInfoList : List
            {
    
                public object Key { get; set; }
    
    
                public new IEnumerator GetEnumerator()
                {
                    return (System.Collections.Generic.IEnumerator)base.GetEnumerator();
                }
            }
    }
    
    
    

    View

     
        
            
                
                    
                    
                
                
                    
                    
                
                
            
        
    
    
    
        
            
                
                
            
            
            
        
    
    
    
    
    
    
    
        
            
            
        
    
        
        
            
                
                
            
            

    提交回复
    热议问题