Not showing items with Visibility=Collapsed in Windows 8.1 GridView

Question

I have a Windows 8.1 application with a GridView bound to a custom (sortable, deduplicated) observable collection. In this collection, I do some heavy filtering

Answer 1

The problem is in the GridView's ItemsPanel.

Both ItemsWrapGrid and WrapGrid are uniform grids. All their child elements will be sharing the same height and width. That's why even if you collapse the ItemTemplate, the space is still reserved.

What you really need here is a WrapPanel. WINRT doesn't have a built-in WrapPanel but Jerry Nixon has built one and you can grab it from here.

After you updated your GridViews ItemsPanel, you still have one more thing to do. You need to also get the GridViewItem that hosts your Itemtemplate and set its Visibility to Collapsed.

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        ds[5].IsHidden = true;
  
        await Task.Delay(1000);
        var gridViewItem =(GridViewItem)this.gv.ContainerFromIndex(5);
        gridViewItem.Visibility = Visibility.Collapsed;
    }

I put a little delay above to make the collapsing more obvious.

Answer 2

It takes me a lot of time to understand the problem, and the solution right in front of my eyes. You trying to hide the item itself but the container still there, When you add an item to an GridView, the item is wrapped in an item container. from msdn :

" When you add an item to an ItemsControl, the item is wrapped in an item container. For example, an item added to a ListView is wrapped in a ListViewItem. Without UI virtualization, the entire data set is kept in memory and an item container is also created for each item in the data set. A ListView that's bound to a collection of 1000 items will also create 1000 ListViewItem containers that are stored in memory."

You need to disable the container and create two DataTemplate and using DataTemplateSelector you can choose which DataTemplate for disable and active items. Check this useful article .

Answer 3

I tried your sample solution and changed it to a ListView instead. It exhibits the same behavior when the grid itself is hidden. I don't have XAML Spy to verify, but it appears that any List based control will allocate a rendered item for each item in the list.

I changed your click handlder to instead ds.RemoveAt(5); instead of hiding the item, and the element is removed from view with a nice animation. This appears to be as expected, and an interesting find.