隐藏GridViewItem并在GridView中重新放置项目 [英] Hide GridViewItem and reposition items in GridView

问题描述

如您在上面看到的，我需要它重新调整自身以使其对齐.显然这些项目仍然存在，有没有办法完全忽略它们?

我有一个ObservableCollection:

 公共静态易失性ObservableCollection< MyVideo>MyVideoModels = new ObservableCollection< MyVideo>(); 

这充满了MyVideo对象.

像这样将其绑定到我的GridView:

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

我用于GridView的DataTemplate.

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

在此GridView上方有一个静态ToggleSwitch，如下所示:

 < Grid Grid.Row ="1"><网格>< TextBlock Text =未找到Ingore图片"/>< ToggleSwitch x:Name ="ToggleSwitchIgnoreImages" Toggled ="ignoreImages_Toggled"/></Grid></Grid> 

哪个:

 私有无效的ignoreImages_Toggled(对象发送者，RoutedEventArgs e){ToggleSwitch tSwitch =(ToggleSwitch)(发送为ToggleSwitch);如果(tSwitch.IsOn){for(int i = 0; i< VideosFoundFound.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;}}}别的{对于(int i = 0; i< VideosFoundView.MyVideoModels.Count; i ++){//VideosFoundView.MyVideoModels[i].Visibility ="Auto";var gridViewItem =(GridViewItem)this.AddVideoFolderGridView.ContainerFromIndex(i);gridViewItem.Visibility = Visibility.Visible;}}} 

但是问题是这些项目仍在我的GridView上占用空间，而其他项目没有相应地重新放置自己.

解决方案

当 GridViewItem 折叠时，这些项目仍在 GridView 上占用空间.可能是因为 ItemTemplate 尚未刷新，所以仍保留了该空间.

作为一种解决方法，项目 WinRTXamlToolkit 中有用于UWP的Toolkit WrapPanel的端口./p>

您可以从 NuGet 中获取它.

然后在页面中添加以下前缀:

  xmlns:toolkit ="using:WinRTXamlToolkit.Controls" 

现在，您可以像以前一样使用< toolkit:WrapPanel Orientation ="Horizo​​ntal"></toolkit:WrapPanel> .

例如:

 < GridView x:Name ="AddVideoFolderGridView">< GridView.ItemsPanel>< ItemsPanelTemplate>< toolkit:WrapPanel Orientation ="Horizo​​ntal"></toolkit:WrapPanel></ItemsPanelTemplate></GridView.ItemsPanel>< GridView.ItemTemplate>< DataTemplate>< Border BorderThickness ="5"><图片来源="{Binding FullImageLocationOnDisk}" MaxHeight ="300" MaxWidth ="200" DoubleTapped ="gridViewItem_DoubleTapped" Loaded ="gridViewItem_Loaded" Loading ="gridViewItem_Loading"></图片></Border></DataTemplate></GridView.ItemTemplate></GridView> 

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.

解决方案

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>

这篇关于隐藏GridViewItem并在GridView中重新放置项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！