Windows Phone 7如何在枢轴项之间切换时删除"口吃"

Question

当切换到加载数据的枢轴项时,我在从一个项切换到另一个项时遇到了断断续续的问题.我已经将数据加载分离到一个单独的线程,这有帮助,但我仍然遇到一些不好的表现....想知道你们是否有任何想法....

这是枢轴项目

<Grid x:Name="LayoutRoot" Background="Transparent">

    <!--Pivot control-->
    <controls:Pivot Name="panCorals" Title="Corals" Foreground="#01487e" 
        SelectionChanged="panCorals_SelectionChanged">

        <controls:Pivot.Background>
            <ImageBrush ImageSource="PivotBackground.png"/>
        </controls:Pivot.Background>

        <!--Search Corals-->
        <controls:PivotItem Header="Search" Foreground="#01487e">

            <Grid>

                <toolkit:PerformanceProgressBar Name="SearchCoralsProgressBar" HorizontalAlignment="Left" 
                        VerticalAlignment="Top" Width="466" 
                        IsEnabled="{Binding IsSearchLoading}" IsIndeterminate="{Binding IsSearchLoading}" />

                <StackPanel>
                    <TextBox Name="txtSearchTerm" KeyDown="txtSearchTerm_KeyDown" />
                    <ListBox Name="lbSearchCorals" Margin="0,0,-12,0" ItemsSource="{Binding SearchCorals}" 
                         SelectionChanged="lbSearchCorals_SelectionChanged">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                    <Image Source="{Binding MainImageURI}" Height="100" Width="100" Margin="12,0,9,0" />
                                    <StackPanel Width="311">
                                        <TextBlock Text="{Binding CommonName}" Foreground="#112d42"  TextWrapping="NoWrap"  Style="{StaticResource PhoneTextTitle2Style}"/>
                                        <TextBlock Text="{Binding ScientificName}" Foreground="#112d42" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </Grid>

        </controls:PivotItem>


        <!--Top Corals-->
        <controls:PivotItem Header="Top" Foreground="#01487e" VerticalAlignment="Top" >

            <Grid>

                <toolkit:PerformanceProgressBar Name="TopCoralsProgressBar" HorizontalAlignment="Left" 
                        VerticalAlignment="Top" Width="466" 
                        IsEnabled="{Binding IsTopLoading}" IsIndeterminate="{Binding IsTopLoading}" />


                <ListBox Name="lbTopCorals" Margin="0,0,-12,0" ItemsSource="{Binding TopCorals}" SelectionChanged="lbTopCorals_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                <Image Source="{Binding MainImageURI}" Height="100" Width="100" Margin="12,0,9,0" />
                                <StackPanel Width="311">
                                    <TextBlock Text="{Binding CommonName}" Foreground="#112d42"  TextWrapping="NoWrap"  Style="{StaticResource PhoneTextTitle2Style}"/>
                                    <TextBlock Text="{Binding ScientificName}" Foreground="#112d42" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

                <StackPanel Margin="10,50,0,0" Orientation="Horizontal">
                    <TextBlock x:Name="tbProgress"/>
                </StackPanel>

            </Grid>

        </controls:PivotItem>

        <!--New Corals-->
        <controls:PivotItem Header="New">
            <Grid>

                <toolkit:PerformanceProgressBar Name="NewCoralsProgressBar" HorizontalAlignment="Left" 
                            VerticalAlignment="Top" Width="466" 
                            IsEnabled="{Binding IsNewLoading}" IsIndeterminate="{Binding IsNewLoading}" />

                <ListBox Name="lbNewCorals" Margin="0,0,-12,0" ItemsSource="{Binding NewCorals}" SelectionChanged="lbNewCorals_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                <Image Source="{Binding MainImageURI}" Height="100" Width="100" Margin="12,0,9,0" />
                                <StackPanel Width="311">
                                    <TextBlock Text="{Binding CommonName}" Foreground="#112d42"  TextWrapping="NoWrap"  Style="{StaticResource PhoneTextTitle2Style}"/>
                                    <TextBlock Text="{Binding ScientificName}" Foreground="#112d42" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

            </Grid>
        </controls:PivotItem>


    </controls:Pivot>
</Grid>

而代码背后......

private void panCorals_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        switch (panCorals.SelectedIndex)
        {
            case 0:     //search corals

                break;
            case 1:         //top corals
                if (!App.vmCoral.IsTopDataLoaded)
                {
                    App.vmCoral.IsTopLoading = true;
                    if (App.HasConnectivity)
                    {
                        //get corals from web
                        bw.DoWork += new DoWorkEventHandler(bw_DoWorkTopCoralsWeb);

                        if (bw.IsBusy != true)
                        {
                            bw.RunWorkerAsync();
                        }

                    }
                    else
                    {
                        //get saved corals from device
                        bw.DoWork += new DoWorkEventHandler(bw_DoWorkTopCoralsSaved);

                        if (bw.IsBusy != true)
                        {
                            bw.RunWorkerAsync();
                        }
                    }
                }
                break;
            case 2:         //new corals

                if (!App.vmCoral.IsNewDataLoaded)
                {
                    App.vmCoral.IsNewLoading = true;
                    if (App.HasConnectivity)
                    {
                        //get corals from web
                        bw.DoWork += new DoWorkEventHandler(bw_DoWorkNewCoralsWeb);

                        if (bw.IsBusy != true)
                        {
                            bw.RunWorkerAsync();
                        }

                    }
                    else
                    {
                        //get saved corals from device
                        bw.DoWork += new DoWorkEventHandler(bw_DoWorkNewCoralsSaved);

                        if (bw.IsBusy != true)
                        {
                            bw.RunWorkerAsync();
                        }
                    }
                }

                break;
            default:

                break;
        }

    }

Answer 1

您发布的代码本身并没有什么特别的错误.最有可能发生的事情是你的后台工作者线程正在完成,而你在枢轴项之间切换,这反过来更新列表绑定到的可观察集合.此外,您的列表还包含图像,如果您绑定到Web上需要下载图像的URL,也会导致性能问题.

有几件事需要检查:

1. 如果列表很长,请确保使用虚拟化堆栈面板(这是默认设置,但请确保您没有在任何地方更改过).
2. 考虑使用SL工具包中的LongListSelector控件,它比默认的ListBox具有更好的UI和数据虚拟化支持
3. 如果您将图像绑定到网址,请查看低调的图像加载程序(http://blogs.msdn.com/b/delay/archive/2010/09/02/keep-a-low-profile-lowprofileimageloader-helps -the-windows-phone-7-ui-thread-stay-responsive-loading-images-in-the-background.aspx).
4. 在App.xaml.cs中启用"EnableRedrawRegions"调试指示器.当您切换枢轴项目时,检查没有任何东西导致重绘区域(由屏幕的一部分指示非常快速地闪烁不同的颜色).如果是的话,请考虑使用BitMapCache.
5. 如果您的异步进程正在下载一个长列表,请考虑在后台线程中打破列表,并仅将它们分配到小块的UI线程中,每个块之间有一个小延迟.