Question

我正在开发一个UWP应用程序，它在FlipView控件中显示图像和视频。 Flipview控件放在UWP社区工具包中的AdaptiveGridView旁边，该工具包显示FlipView的所有可用图像/视频。 FlipView和AdaptiveGridView共享相同的ItemsSource和SelectedItem。因此，当我在AdaptiveGridView中选择一张照片时，FlipView会显示该项目，反之亦然。照片/视频集合可能非常大（> 500张图像）。

chart-legend

这非常好，非常顺畅。

FlipView的DataTemplate如下。

 <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可视化照片/视频以及更多信息。当我从CommentLists中删除ItemTemplate时，我可以通过Flipview轻松滑动或者从AdaptiveGridView中查看项目，并且UI响应没有滞后。但是当我为CommentsList设置ItemTemplate时，当我快速滑动时，UI会冻结。

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

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

提前致谢。

Answer 1

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

我建议您将评论放在FlipView的单独面板中。也许把它放在FlipView的侧面，根据窗口的大小调整布局。

Flipview UI在快速滑动时冻结

1 个答案: