1

FlipViewシームレスな選択エクスペリエンスのために、アセットを使用してコントロールを仮想化する際に問題が発生しました。VariableGridで利用可能なテンプレートを使用してUIを最初から更新Nugetし、ギフトカタログを表示しながらアプリをWindowsストアのように見せました。

コントロールは、FlipViewユーザーが製品のさまざまなオプションを見ることができるように、大きな画像と小さなサムネイルのストリップを表示することになっています。最初のいくつかのアイテムでは正常に機能しますが、サムネイルアイテムはしばらくすると混同され始めます-アイテムがフリップビューコントロール内でどのように配置およびバインドされるかについて少し混乱していますが、この問題に光を当てることができるでしょうか。コントロール内のデータテンプレートを使用して、フリップビューの元のアイテム画像の横にあるラップパネルに画像を追加しました。ラップパネルの管理方法がわからないので、それを使用するセクションのコードを添付しました。

    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>
4

2 に答える 2

0

FlipView.ItemsPanel を VirtualizingStackPanel の代わりに StackPanel を使用するように変更するとうまくいくようですが、大量のメモリを占有するため、これは多数の項目ではうまくいきません。サンプルテンプレートは以下です

FlipView.ItemsPanel="{StaticResource ItemsPanelStyleTemplate}"


    <ItemsPanelTemplate x:Key="ItemsPanelStyleTemplate">
        <StackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
    </ItemsPanelTemplate>
于 2013-01-16T10:48:43.270 に答える
0

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;
} 
}
于 2013-01-16T16:57:35.357 に答える