FlipView数据模板在WinRT / XAML中的特性
本文关键字:XAML WinRT 数据 FlipView | 更新日期: 2023-09-27 17:52:45
我一直面临着用我们的资产虚拟化FlipView
控件以获得无缝选择体验的问题。我们使用Nuget
上可用的VariableGrid
模板从头开始更新我们的UI,以使应用程序看起来像windows商店,同时展示我们的礼品目录。
FlipView
控件应该展示我们更大的图像以及一个较小的缩略图条带,以便用户可以查看产品的不同选项,它适用于前几个项目,但缩略图项目开始混在一起一段时间后-我有点困惑的项目是如何安排和一个翻转视图控件内绑定,我想知道你是否可以在这件事上的一些光?我在控件内使用了一个数据模板,将图像添加到flipview中原始项目图像旁边的wrappanel。我不确定如何管理wrappanel,我已经附上了使用它的部分的代码。
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>
改变FlipView。ItemsPanel使用StackPanel而不是VirtualizingStackPanel似乎工作-但这将不适用于大量的项目,因为它们会占用大量的内存。示例模板在
下面FlipView.ItemsPanel="{StaticResource ItemsPanelStyleTemplate}"
<ItemsPanelTemplate x:Key="ItemsPanelStyleTemplate">
<StackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
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;
}
}