CODEWITHSUNDEEP
c#asp.netxamlgridviewwin-universal-app
Illuminati
Illuminati

Reputation: 548

Hide GridViewItem and reposition items in GridView

enter image description here

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.

Upvotes: 0

Views: 803

Answers (2)

Warpenguin
Warpenguin

Reputation: 11

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

Upvotes: 1

Jayden
Jayden

Reputation: 3286

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>

Upvotes: 1

Related Questions