我正在开发一个在 FlipView 控件中显示图像和视频的 UWP 应用程序。Flipview 控件从 UWP 社区工具包中放置了一个 AdaptiveGridView,它显示了 FlipView 的所有可用图像/视频。FlipView 和 AdaptiveGridView 共享相同的 ItemsSource 和 SelectedItem。因此,当我在 AdaptiveGridView 中选择一张照片时,FlipView 会显示该项目,反之亦然。照片/视频收藏可能非常大(>500 张图像)。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="165" Width="0.3*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0.7*" MinWidth="400" />
</Grid.ColumnDefinitions>
<controls:AdaptiveGridView x:Name="FeedItemGridView" Grid.Column="0"
ItemsSource="{x:Bind FeedItems}"
SelectedItem="{x:Bind SelectedFeedItem, Mode=TwoWay}"
OneRowModeEnabled="False"
ItemHeight="150"
DesiredWidth="150"
SelectionMode="Single"
ItemTemplate="{StaticResource ThumbImageTemplate}" />
<controls:GridSplitter Grid.Column="1" Width="14" ResizeBehavior="BasedOnAlignment"
ResizeDirection="Auto"
FontSize="13" Background="{ThemeResource ApplicationForegroundThemeBrush}">
<controls:GridSplitter.Element>
<TextBlock HorizontalAlignment="Center"
IsHitTestVisible="False"
VerticalAlignment="Center"
Text=""
Foreground="{ThemeResource SystemControlBackgroundAccentBrush}"
FontFamily="Segoe MDL2 Assets" />
</controls:GridSplitter.Element>
</controls:GridSplitter>
<FlipView Grid.Column="2" ItemsSource="{x:Bind FeedItems}" x:Name="FlipView" ItemTemplate="{StaticResource FeedViewerFlipViewTemplate}"
SelectedItem="{x:Bind SelectedFeedItem, Mode=TwoWay}"
>
</FlipView>
</Grid>
这工作得非常好和顺利。
FlipView 的 DataTemplate 如下。
<DataTemplate x:Key="FeedViewerFlipViewTemplate">
<ScrollViewer HorizontalScrollMode="Disabled">
<StackPanel>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" HorizontalScrollMode="Enabled"
VerticalScrollMode="Enabled">
<Border BorderThickness="2" BorderBrush="{ThemeResource AppBarBorderThemeBrush}">
<Grid x:Name="MediaGrid">
<Image
Stretch="Uniform"
Source="{Binding FeedItem.ImageSource}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Visibility="{Binding FeedItem.IsVideo, Converter={StaticResource BooleanToVisibilityConverterInverse}}" />
<MediaPlayerElement
Visibility="{Binding ElementName=FeedItemGridView, Path=SelectedItem.FeedItem.IsVideo, Converter={StaticResource BoolToVisConverter}}"
AreTransportControlsEnabled="True"
Source="{Binding ElementName=FeedItemGridView, Path=SelectedItem.FeedItem.ImageSource, Converter={StaticResource MediaSourceFromUriConverter}, UpdateSourceTrigger=Explicit}"
PosterSource="{Binding ElementName=FeedItemGridView, Path=SelectedItem.FeedItem.ThumbSource}"
Stretch="Uniform">
<MediaPlayerElement.TransportControls>
<MediaTransportControls IsCompact="False"
IsVolumeButtonVisible="{Binding ElementName=FeedItemGridView, Path=SelectedItem.FeedItem.Audio}" />
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
</Grid>
</Border>
</ScrollViewer>
<ItemsControl x:Name="TagsList" ItemsSource="{Binding Tags}"
Margin="{StaticResource SmallLeftRightMargin}"
ItemTemplate="{StaticResource TagTemplate}" HorizontalContentAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controls1:CustomWrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
<StackPanel Orientation="Horizontal" Margin="{StaticResource MediumAllMargin}"
x:Name="CommentCountPanel">
<SymbolIcon Margin="{StaticResource MediumLeftMargin}" Symbol="Comment" />
<TextBlock Margin="{StaticResource MediumLeftMargin}" Text="{Binding CommentViewModels.Count}" />
<TextBlock Margin="{StaticResource MediumLeftMargin}" x:Uid="Comments" />
</StackPanel>
<ItemsControl x:Name="CommentsList"
ItemsSource="{Binding CommentViewModels}" ItemTemplate="{StaticResource CommentTemplate}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</DataTemplate>
FlipView 的 DataTemplate 可视化照片/视频和一些更多信息。当我从 CommentLists 中删除 ItemTemplate 时,我可以毫无问题地通过 Flipview 滑动或浏览 AdaptiveGridView 中的项目,并且 UI 响应没有滞后。但是当我为 CommentsList 设置 ItemTemplate 时,当我快速滑动时 UI 会冻结。
CommentsList 的 DataTemplate 如下
<DataTemplate x:Key="CommentTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0" ItemsSource="{Binding ParentDepthList}" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
VerticalAlignment="Stretch" Opacity="0.2" Width="1" StrokeThickness="1"
StrokeDashArray="1,2" StrokeDashCap="Round" Margin="{StaticResource BigRightMargin}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Border BorderThickness="0 0 0 1 " Grid.Column="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
Margin="{StaticResource MediumLeftMargin}">
<StackPanel>
<controls:MarkdownTextBlock Text="{Binding Comment.Content}" VerticalContentAlignment="Center"
HorizontalContentAlignment="Center" VerticalAlignment="Center"
micro:Message.Attach="[Event LinkClicked] = [Action OpenLink($eventArgs)]"
Margin="{StaticResource SmallLeftMargin}"
LinkForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<StackPanel Orientation="Horizontal" Margin="{StaticResource MediumAllMargin}">
<HyperlinkButton
micro:Message.Attach="[Event LinkClicked] = [Action OpenLink($eventArgs)]"
NavigateUri="{Binding Comment.Name, Converter={StaticResource UserTextConverter}}"
Content="{Binding Comment.Name}" />
<TextBlock Margin="10 0 0 0" VerticalAlignment="Center">-</TextBlock>
<TextBlock VerticalAlignment="Center" Text="{Binding Comment.Created}"
Margin="{StaticResource MediumLeftMargin}" />
</StackPanel>
</StackPanel>
</Border>
</Grid>
当我为 CommentsList 设置 DataTemplate 时,有人知道为什么 UI 会冻结吗?
提前致谢。