WP8.1弹出窗口-渲染速度较慢

Question

我做了一个popup控件，它可以接受任何FrameworkElement类型的视图。此外，您还可以提供一个视图模型，该模型将绑定到所提供的子视图的DataContext。一切正常，但渲染数据需要几秒钟的时间。视图模型有一个包含大约300个项目的ObservableCollection。所以老实说，300个项目应该不会引起任何问题。

如果我将xaml从弹出窗口提取到常规页面，就不会有任何延迟。

那么，当Popup控件的Child内容属性被设置时，会不会有什么事情发生，从而导致这样的延迟呢？因为现在这让我大吃一惊。

提前感谢！

根据要求更新构成工具窗口的子内容的XAML：

<UserControl
    x:Class="App.Controls.ContactSelector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    mc:Ignorable="d" x:Name="contactSelector"
    DataContext="{Binding ContactSelectorViewModel,Source={StaticResource Locator}}">

    <Grid HorizontalAlignment="Stretch" Style="{StaticResource BaseGridStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ListView Grid.Row="0" ItemsSource="{Binding ContactCollection}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="12">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>
                        <!--<Image Margin="0,0,10,0" Grid.Row="0" Grid.Column="0"
                               Source="{Binding Thumbnail}" MaxHeight="35"
                               Visibility="{Binding Thumbnail, Converter={StaticResource ObjectNullToVisibilityConverter}}" />-->
                        <!--<Image Margin="0,5,5,5" Grid.Row="0" Grid.Column="0" MaxHeight="35"
                               Source="ms-appx:///Assets/Images/Contact.png"
                               Visibility="{Binding Thumbnail, Converter={StaticResource InverseObjectNullToVisibilityConverter}}" />-->

                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding FullName}"
                                   VerticalAlignment="Center"
                                   Style="{StaticResource TextBlockMedium}" />

                        <!--<Grid Grid.Row="1" Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <ItemsControl Grid.Row="0" ItemsSource="{Binding MobileNumbers}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Margin="10,5">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="1*" />
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Grid.Column="0" Margin="0"
                                                       Text="{Binding Number}"
                                                       HorizontalAlignment="Stretch"
                                                       Style="{StaticResource TextBlockMedium}">
                                                <interactivity:Interaction.Behaviors>
                                                    <core:EventTriggerBehavior EventName="Tapped">
                                                        <core:InvokeCommandAction
                                                            Command="{Binding DataContext.SelectContact, ElementName=contactSelector}"
                                                            CommandParameter="{Binding}" />
                                                    </core:EventTriggerBehavior>
                                                </interactivity:Interaction.Behaviors>
                                            </TextBlock>
                                        </Grid>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </Grid>-->
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <!--<ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Border>
                                <TextBlock Text="{Binding Key}"
                                           VerticalAlignment="Center" HorizontalAlignment="Center"
                                           Style="{StaticResource TextBlockMedium}"
                                           Padding="5" Margin="5" FontWeight="SemiBold" />
                            </Border>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>-->
        </ListView>

    </Grid>
</UserControl>

所以我注释掉了ItemsControl的整个部分，但这并没有解决问题。当Popup打开时，仍然需要相当长的时间才能显示包含的项。

它在滚动时并不慢，但在呈现初始项目时却很慢。

Answer 1

问题出在显示MobileNumbers集合的ItemsControl中。您不应该将ItemsControl作为另一个ItemsControl (在您的示例中是ListView)的ItemTemplate。只有当您显示少量项目时，才能执行此操作。

因此，您的MobileNumbers项没有虚拟化，这就是性能问题所在，因为需要显示所有项才能呈现项模板。

您可以尝试创建对象的平面列表，然后使用ItemTemplateSelector为不同类型显示不同的项模板。例如，您可以使用以下ObservableCollection作为ItemsSource

Header
Contact info
Mobile number1
Mobile number2
Header
Contact info
Mobile number
etc.