c# - WinRT/XAML 中的 FlipView 数据模板特性

Question

我在虚拟化 FlipView 时遇到了问题控制我们的 Assets 以获得无缝的选择体验。我们使用 VariableGrid 从头开始​​更新了我们的 UI模板可用 Nuget ，在展示我们的礼品目录时让应用看起来像 windows 商店。
FlipView控件应该展示我们更大的图像以及一条较小的缩略图，以便用户可以查看产品的不同选项，它对于前几个项目工作正常，但缩略图项目在一段时间后开始混淆 - 我我对这些项目在翻转 View 控件中的排列和绑定(bind)方式有些困惑，我想知道您是否可以对此事有所了解？我在控件内使用了一个数据模板，将图像添加到翻转 View 中原始项目图像旁边的包装面板。我不确定如何管理包装面板，我附上了使用它的部分的代码。

    private async Task PopulateThumbnails()
    {
        var thumbnailWrapGrid = RecurseChildren<WrapPanel>(flipView).ElementAt(flipView.SelectedIndex);
        if (thumbnailWrapGrid == null) return;

        thumbnailWrapGrid.Width = Window.Current.Bounds.Width - (420 + Window.Current.Bounds.Height); // 420 is experiencepanel + backmargin. images are square scaled to height
        var thisItem = (this.flipView.SelectedItem as PGItemViewModel);
        thumbnailWrapGrid.Children.Clear();
        foreach (var img in thisItem.ItemPhoto)
            await AddChildren(img, thumbnailWrapGrid);
    }

    private async Task AddChildren(KeyValuePair<string, ItemPhoto> img, WrapPanel panel)
    {
        var imgbitmap = new Image() { Source = new BitmapImage(new Uri(img.Value.LocalOrRemoteLocation)) };
        imgbitmap.Tapped += imgbitmap_Tapped;
        panel.Children.Add(imgbitmap);
    }

    void imgbitmap_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var zoomImage = RecurseChildren<Image>(flipView).ElementAt(flipView.SelectedIndex);
        zoomImage.Source = (sender as Image).Source;
    }

   public static IEnumerable<T> RecurseChildren<T>(DependencyObject root) where T : UIElement
    {
        if (root is T)
        {
            yield return root as T;
        }

        if (root != null)
        {
            var count = VisualTreeHelper.GetChildrenCount(root);


            for (var idx = 0; idx < count; idx++)
            {
                foreach (var child in RecurseChildren<T>(VisualTreeHelper.GetChild(root, idx)))
                {
                    yield return child;
                }
            }
        }
    }

//XAML

<StackPanel x:Name="ImageHost" Margin="0" Orientation="Horizontal" Loaded="PopulateThumbnails" GotFocus="InFocus">
<Image x:Name="image" Source="{Binding BigPhoto}" Margin="0" HorizontalAlignment="Left"/>
<ScrollViewer Margin="0,135,0,0">
<Controls:WrapPanel x:Name="thumbnailWrap" Margin="0">
<Controls:WrapPanel.Transitions>
<TransitionCollection/>
</Controls:WrapPanel.Transitions>
</Controls:WrapPanel>
</ScrollViewer>
</StackPanel>

Answer 1

将 FlipView.ItemsPanel 更改为使用 StackPanel 而不是 VirtualizingStackPanel 似乎可行 - 但这不适用于大量项目，因为它们会占用大量内存。示例模板如下

FlipView.ItemsPanel="{StaticResource ItemsPanelStyleTemplate}"


    <ItemsPanelTemplate x:Key="ItemsPanelStyleTemplate">
        <StackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
    </ItemsPanelTemplate>