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 and setting an IsHidden flag for every item.

In the data template for the item, there is a condition making the item collapsed if IsHidden flag is set to true.

<Grid Width="160" Height="280" Visibility="{Binding IsHidden, Converter={StaticResource InvertedBooleanToVisibilityConverter}}">

This approach works in Windows Phone 8.1 XAML, making the items disappear from the ListView but it does not work in Windows 8.1 GridView. The problem with Windows 8.1 is that when I set an item in the collection to hidden, id disappears from the GridView but leaves an empty place, so there is a gap in the GridView.

Any ideas on how to solve it? Maybe same XAML style editing?

Here is a minimal solution to reproduce the problem: https://dl.dropboxusercontent.com/u/73642/gv.zip

I tried binding width and height of the items to the hidden flag and setting it to 0 when the item is hidden, but it did not help, still a gap in the GridView.

Update: One workaround would be filtering the actual bound collection, but this is not possible, because of some business requirements.

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.