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

Нет ничего особенно плохого в коде, который вы выложили как таковой. Скорее всего, происходит то, что ваш фоновый рабочий поток завершается, когда вы переключаетесь между сводными элементами, что, в свою очередь, обновляет наблюдаемые коллекции, к которым привязаны ваши списки. Также ваши списки содержат изображения, которые, если вы привязываете к URL-адресу в Интернете, который требует загрузки изображения, также вызовут проблемы с перфорированием.

Есть пара вещей, которые нужно проверить:

1. убедитесь, что вы используете панель виртуализированного стека, если ваши списки длинные (это значение по умолчанию, но убедитесь, что вы нигде не меняли его).
2. рассмотрите возможность использования элемента управления LongListSelector из инструментария SL, он имеет лучшую поддержку пользовательского интерфейса и виртуализации данных, чем стандартный ListBox
3. проверьте загрузчик низкопрофильных изображений, если вы привязываете свои изображения к веб-URL (http://blogs.msdn.com/b/delay/archive/2010/09/02/keep-a-low-profile-lowprofileimageloader-helps-the-windows-phone-7-ui-thread-stay-responsive-by-loading-images-in-the-background.aspx).
4. Включите индикатор отладки «EnableRedrawRegions» в вашем App.xaml.cs. Убедитесь, что ничто не вызывает перерисовывание областей, пока вы переключаете элементы поворота (на это указывает участок экрана, который очень быстро мигает разными цветами). Рассмотрите возможность использования BitMapCache, если они есть.
5. Если ваш асинхронный процесс загружает длинный список, рассмотрите возможность разбиения списка на фоновый поток и отправки его только в поток пользовательского интерфейса небольшими порциями с небольшой задержкой между ними.

Answer 2

Одна из распространенных ситуаций, которая возникает, заключается в том, что, хотя вы полностью загружаете данные в отдельном потоке, после завершения загрузки существует много работы с пользовательским интерфейсом для привязки элементов к ListBox.

Одно решение, которое я нашел несколько раз назад в сети (я фактически потерял трек ссылки), заключается в добавлении элементов в вашу ObservableCollection (в вашем случае SearchCorals) по одному и с небольшой задержкой (скажем, 50 мс) , (вместо того, чтобы добавлять их навалом).

Для этого вы можете сохранить свой источник данных в памяти и использовать DispatcherTimer для запуска каждые 50 мс и добавлять элементы в SearchCorals по одному.

Это решило мою проблему. Надеюсь, это поможет вам.