Hide GridViewItem and reposition items in GridView

Question

As you can see above, I need it to reshuffle itself into alignment. Obviously the items still exist, is there a way to completely ignore them?

I have an ObservableCollection:

 public static volatile ObservableCollection<MyVideo> MyVideoModels = new ObservableCollection<MyVideo>();

This gets filled with the MyVideo objects.

Binding it to my GridView like so:

public VideosFoundView()
        {
            this.InitializeComponent();
            this.AddVideoFolderGridView.ItemsSource = VideosFoundView.MyVideoModels;
        }

The DataTemplate I am using for the GridView.

<GridView Grid.Row="2" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="AddVideoFolderGridView">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="5">
                        <Image Source="{Binding FullImageLocationOnDisk}"  MaxHeight="300" MaxWidth="200" DoubleTapped="gridViewItem_DoubleTapped" Loaded="gridViewItem_Loaded" Loading="gridViewItem_Loading">
                        </Image>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

And I have a static ToggleSwitch above this GridView like so:

 <Grid Grid.Row="1">
                <Grid>
                    <TextBlock Text="Ingore Image Not Found"/>
                    <ToggleSwitch x:Name="ToggleSwitchIgnoreImages" Toggled="ignoreImages_Toggled"/>
                </Grid>
            </Grid>

Which does:

 private void ignoreImages_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch tSwitch = (ToggleSwitch)(sender as ToggleSwitch);
            if (tSwitch.IsOn)
            {
                for(int i = 0; i < VideosFoundView.MyVideoModels.Count; i++)
                {
                    if(VideosFoundView.MyVideoModels[i].FullImageLocationOnDisk == "ms-appx:///Assets/image-not-found.gif")
                    {
                        var gridViewItem = (GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);
                        gridViewItem.Visibility = Visibility.Collapsed;
                    }
                }
            }
            else
            {
                for (int i = 0; i < VideosFoundView.MyVideoModels.Count; i++)
                {
                    //VideosFoundView.MyVideoModels[i].Visibility = "Auto";         
                    var gridViewItem = (GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);
                    gridViewItem.Visibility = Visibility.Visible;
                }
            }
        }

However the problem is that the items are still taking up space on my GridView, and the other items do not re-position themselves accordingly.

score 1 · Accepted Answer · answered Feb 16 '16 at 09:44

The items are still taking up space on the GridView, when the GridViewItem is collapsed. It might because the ItemTemplate has not be refreshed, the space is still reserved.

As a workaround, there is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.

You can get it from NuGet.

Then in your Page add this prefix:

xmlns:toolkit="using:WinRTXamlToolkit.Controls"

Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.

For example:

<GridView x:Name="AddVideoFolderGridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Horizontal"  >
            </toolkit:WrapPanel>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="5">
                <Image Source="{Binding FullImageLocationOnDisk}"  MaxHeight="300" MaxWidth="200" DoubleTapped="gridViewItem_DoubleTapped" Loaded="gridViewItem_Loaded" Loading="gridViewItem_Loading">
                </Image>
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

Solution from here: Not showing items with Visibility=Collapsed in Windows 8.1 GridView

tldr: Edit the template of your GridView and replace the ItemsWrapGrid in the ItemsPanelTemplate with the WrapPanel you can find here http://codepaste.net/8gr5go

edited May 23 '17 at 12:13

Community

1
1

answered Feb 16 '16 at 14:28

Warpenguin

11
1

Hide GridViewItem and reposition items in GridView

2 Answers2

Linked