FlipView datatemplate peculiarities in WinRT / XAML

Question

I've been facing a problem virtualizing the FlipView control with our assets for a seamless selection experience. We updated our UI from scratch using the VariableGrid template available on Nuget , to get the app to look like the windows store while showcasing our gift catalogue.

The FlipView control is supposed to showcase our larger image along with a strip of smaller thumbnails so that the user can look at the different options of the product, it works fine for the first few items but the thumbnail items start getting mixed up after a while - I'm a little confused about how the items are arranged and bound inside a flipview control, and I wonder if you could shed some light on the matter? I've used a data template inside the control to add images to wrappanel beside the original item image in the flipview. I'm unsure how to manage the wrappanel, and I've attached the code of the section that uses it.

    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

Changing the FlipView.ItemsPanel to use StackPanel instead of VirtualizingStackPanel seems to work - but this will not work for a large number of items as they'll occupy a lot of memory. the sample template is below

FlipView.ItemsPanel="{StaticResource ItemsPanelStyleTemplate}"


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

Answer 2

Another workaround from MikeOrmond@MSFT

class MikesFlipView : FlipView
{

protected override void PrepareContainerForItemOverride
    (Windows.UI.Xaml.DependencyObject element, object item)
{
  base.PrepareContainerForItemOverride(element, item);

  UserControl userControl = GetFirstChildOfType<UserControl>(element);

  if (userControl != null)
  {
    userControl.DataContext = item;

    var panel = GetFirstChildOfType<WrapPanel>(userControl);
    panel.Children.Clear();

    foreach (var img in ((ItemViewModel)item).Photo)
      AddChildren(img, panel);
  }
}

// this method is used to add children to the controls inside FlipView
private void AddChildren(KeyValuePair<string, ItemPhoto> img, WrapPanel panel)
{
  ...
}

private static T GetFirstChildOfType<T>(DependencyObject dobj)
 where T : DependencyObject
{
  T retVal = null;
  int numKids = VisualTreeHelper.GetChildrenCount(dobj);
  for (int i = 0; i < numKids; ++i)
  {
    DependencyObject child = VisualTreeHelper.GetChild(dobj, i);
    if (child is T)
    { 
      retVal = (T)child;
    }
    else
    {
      retVal = GetFirstChildOfType<T>(child);
    }

    if (retVal != null)
    {
      break;
    }
  }

  return retVal;
} 
}