I am trying to create, in my application, the same effect used by the software MusicBee in its music selection interface (screenshot below).
There is a lower panel with a DataGrid, and an upper panel with some ListViews displaying grouped rows. When I click, say, "Rock" on the "Genre" list in the upper panel, the other lists are updated and the DataGrid is filtered accordingly. If I go on clicking on the other lists in the upper panel, the DataGrid filtering becomes more and more restrictive and goes on being updated accordingly (displaying only the rows matching the filters above).
Also, there are extra rows: All (N items)
and [Empty]
, which I imagine have to be added to the view source somehow.
I started to read about ListCollectionView
class, since its documentation says:
"When you bind to a data collection, you may want to sort, filter, or group the data. To do that, you use collection views."
It seems to me that grouping and filtering is all about what I want to accomplish here, but I found a lack of examples and don't know even where to start with this, either ViewModel-side or XAML-side.
This is a very broad question, so I will just show you one way you could go about implementing something like what you are looking for. There are of course multiple ways to achieve the same result. This way just happens to follow along with the stuff you were already trying to use. I also have no idea if it covers all of the features you are looking for.
Let's say you have a viewmodel for a track that looks something like this:
You will want to make a viewmodel for your overall view which contains an observable collection of these tracks, a collection view for that collection, and additional collections for the filters (the top part of your screenshot). I threw something together locally that ended up looking like this (needs some cleanup):
The view I used for this has a list box for each filter and a datagrid at the bottom displaying the tracks.
And this is the code-behind for the view. I had to only update the filter selections in the view model when selection changed in the view. Otherwise, it would end up setting it to null for some reason. I didn't spend time investigating what was causing that issue. I just worked around it by explicitly updating the source only when selection changed.
Here is a screenshot of the test app:
I have no idea if this meets the feature requirements of what you are looking for, but it will hopefully at least be a good reference for how to do the sorts of things you are trying to do.