使用 ExpanderView 和绑定时页面加载缓慢（Windows Phone 7）答案

【问题标题】：Slow Page loading when using ExpanderView & Binding (Windows Phone 7)使用 ExpanderView 和绑定时页面加载缓慢（Windows Phone 7）
【发布时间】：2012-05-07 13:37:13
【问题描述】：

我有一个全景控件，它有一个 ExpanderView 项（来自 Silverlight 工具包）。我的客户希望这个页面是可定制的。这就是为什么我创建了 3 级绑定： PanoramaItems、ExpanderView 标头和 ExpanderView 内容。设置全景控件的 itemssource 时的问题。显示项目大约需要 5 秒。

知道如何解决这个问题吗？

C#代码：

private void panorama_Loaded(object sender, RoutedEventArgs e)
{
        this.DataContext = App.Products; 
}

XAML 代码：

<controls:Panorama Loaded="panorama_Loaded" x:Name="panorama" ItemsSource="{Binding}">
        <controls:Panorama.ItemTemplate>
            <DataTemplate>
                <ListBox  ItemsSource="{Binding Sub_Products}" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <toolkit:ExpanderView  Header="{Binding}" Expander="{Binding}" ItemsSource="{Binding Sub_Sub_Products}">
                                <toolkit:ExpanderView.ExpanderTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <Image VerticalAlignment="Center" Source="Images/List.png" Width="25" />
                                            <TextBlock Text="{Binding Title}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </toolkit:ExpanderView.ExpanderTemplate>
                                <toolkit:ExpanderView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Margin="-30,0,0,0" Background="White"  Width="450" Tap="Grid_Tap" >
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Image Grid.Row="0"  Source="{Binding ImageSource}" />
                                            <StackPanel  VerticalAlignment="Top" Grid.Column="1">
                                                <TextBlock Text="{Binding Title}"  />
                                                <TextBlock Text="{Binding Description}"  />
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>
                                                    </Grid>
                                                <TextBlock Margin="0,12,32,0" Grid.Row="1" Text="Learn more" />
                                            </StackPanel>
                                        </Grid>
                                    </DataTemplate>
                                </toolkit:ExpanderView.ItemTemplate>
                            </toolkit:ExpanderView>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </DataTemplate>
        </controls:Panorama.ItemTemplate>
    </controls:Panorama>

【问题讨论】：

显示一些代码。此外，您正在加载多少数据（多少全景项目、多少标题和多少内容）？准则规定，出于性能原因，您的全景项目应少于 5 个。
我有 4 个全景项目，大约 3-6 个扩展视图标题，每个都有 3 个扩展视图内容。代码很长，我尽量减少行数并在这里分享。谢谢

标签： windows-phone-7 xaml binding silverlight-toolkit

【解决方案1】：

您可以尝试折叠不在屏幕上的全景项目，并仅将可见性设置为按需可见。这至少应该减少可见树的大小。

找到慢速部分的一个好方法是使用 Visual Studio 中的分析器。您会发现一帧非常慢（在您的情况下，它的渲染时间为 5 秒）。然后深入研究该帧的可视化树，查看哪些元素需要很长时间才能渲染并尝试优化这些元素。

【讨论】：

您好，我没有忽略您的回答。我只是没有时间尝试，参与了另一个项目。如果有效，会给你积分:)

【解决方案2】：

移除 xaml 中的 ExpanderView ItemsSource 绑定，并在代码中对 Expander 进行操作时对其进行绑定。只需将其保留为ItemsSource="{Binding}"。这样，您将在用户点击扩展器时动态构建可视化树。

事件处理程序如下所示。 我假设 Product 是您的 App.Products 列表中的类型。还要确保为扩展器连接 xaml 中的事件。

 private void ExpanderView_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
        {
            var expander = sender as ExpanderView;
            expander.ItemsSource = (expander.DataContext as Product).Sub_Sub_Products;
        }

希望这可以解决您加载缓慢的问题，此时还为时不晚。

【讨论】：