Flipview UI 快速滑动时冻结

Question

我正在开发一个 UWP 应用程序，它在 FlipView 控件中显示图像和视频。 Flipview 控件是 UWP 社区工具包中的一个 AdaptiveGridView，它显示了 FlipView 的所有可用 Images/Videos。 FlipView 和 AdaptiveGridView 共享相同的 ItemsSource 和 SelectedItem。因此，当我 select AdaptiveGridView 中的一张照片时，FlipView 会显示该项目，反之亦然。 photo/video collection 可以非常大（>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="&#xE784;"
                       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 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 可视化 Photo/Video 和更多信息。当我从 CommentLists 中删除 ItemTemplate 时，我可以毫无问题地滑动 Flipview 或浏览 AdaptiveGridView 中的项目，并且 UI 响应没有滞后。但是，当我为 CommentsList 设置 ItemTemplate 时，UI 在我快速滑动时冻结。

CommentsList 的数据模板如下

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

有人知道为什么 UI 在我为 CommentsList 设置 DataTemplate 时冻结吗？

提前致谢。

Answer 1

当您使用 VirtualizingStackPanel 时，项目不会被虚拟化，因为内容被放置在 ScrollViewer 中。就 VirtualizingStackPanel 而言，它有足够的空间来呈现每个项目。

我建议您将评论放在与 FlipView 不同的面板中。也许把它放在你的 FlipView 的旁边，并根据 window.

的大小调整布局

Flipview UI 快速滑动时冻结

Flipview UI freeze while fast swiping

flipview

uwp

uwp-xaml

windows-community-toolkit