更新分组的列表视图

Question

I am working on an app which is displaying alot of items in ListViews and GridViews and i am grouping those items and using SemanticZoom control to make navigation easier. The items represent songs. My problem is when the user deletes on of the items in a list (by holding down on the item and then selecting delete from the context menu) the item is deleted from the database but not from the listview or gridview so i have to listen to the CollectionChanged event and then re-load the grouping and assign it to the CollectionViewSource again which doesn't feel right.

I would like to know if there is a way to achieve this effect in WinRT and how. Mainly i want the interaction to be just like the WP contacts app, when the user deletes a contact it gets removed without the app re-loading the list.

Thank you.

Answer 1

I have been learning a lot about SemanticZoom the CollectionViewSource, and most important how to keep updating (usually forgotten in examples) the view without making weird things:

1.- Create a class in the Model that is like a view called GroupedSongs with a category class property (string, class, enum) and

2.- An ObservableCollection< Song> property with INotifyPropertyChanged

3.- Create an ObservableCollection in your ViewModel called Groups for instance. (Never reset always clear after first instance)

4.- Read the contents and fill the Groups ObservableCollection

5.- In XAML add the following resource:

<CollectionViewSource x:Name="CVS" ItemsPath="Songs"  IsSourceGrouped="True" Source="{Binding Groups}"/>

6.- In the Semantic Zoom In View:

<ListView x:Name="ZoomedInView" ItemsSource="{Binding Source={StaticResource CVS}}"

7.- In the Semantic Zoom Out View

<GridView  ItemsSource="{Binding Groups}"

That's the best option I achieved and if you add or delete songs from Groups you will see the UI refreshed.

I have tested in Windows 10 for the app I am preparing

Answer 2

So I solved the issue, by creating an ObservableCollection of ObservableCollections like: ObservableCollection<ObservableCollection<ItemClass>> and when I update the items (adding or removing an item) I just find the inner collection that has the item and make the changes. The UI will reflect the changes nicely.

Edit: Just to clarify, To enable the listview or gridview to display headers I've inherited from ObservableCollection to create this class:

public class KeyedList<T> : ObservableCollection<T>
{
    public object Key
    { get; set; }

    public KeyedList()
    { }

    public KeyedList(IGrouping<object, T> group)
    {
        Key = group.Key;
        foreach (var member in group)
            Add(member);
    }
}

When I initialize the class, T will be of type ObservableCollection:

KeyedList<ObservableCollection<Song>> MySongs = new .....

Hope this will help someone.