Performance error with Gesture PivotItem containing ListBox with data binding

I was trying to figure out how to improve the performance of my control that has 4 PivotItems, each with a data-bound list in C #. Load times have been reduced with BackgroundWorker, but the first two clicks are always laggy, even when all background tasks are running. 4 seconds lag is unacceptable. I thought it might have been caused by a list item of list items that looks like this:

<DataTemplate x:Key="MetroList">
  <Grid MinHeight="120">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="190"/>
      <ColumnDefinition Width="32"/>
      <ColumnDefinition Width="230"/>
    </Grid.ColumnDefinitions>
    <ListBox Width="190"  ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding connectingLines}" FlowDirection="RightToLeft" Margin="0,12" VerticalAlignment="Center">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid Margin="6,0,0,6">
            <Rectangle Fill="{Binding LineColor}" RadiusX="3" RadiusY="3"/>
            <TextBlock Text="{Binding LineNumber}" FontWeight="Bold" Padding="8,0" FontSize="24" Margin="0,5,0,3" MinWidth="50" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center"/>
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>

      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <toolkit:WrapPanel/>
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
    </ListBox>
    <Ellipse Width="20"
      Height="20"
      Fill="White"
      StrokeThickness="3"
      Stroke="#FF222378"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Center"
                 Margin="6,0,0,0"
                 Grid.Column="1"/>
    <Rectangle Fill="#FF222378"
      Width="8"
      Height="3"
                   Grid.Column="1"
                   HorizontalAlignment="Right"
      VerticalAlignment="Center" Margin="-1,0,0,0" />
    <TextBlock
            TextWrapping="Wrap"
      Text="{Binding stopName}"
      FontFamily="Segoe WP Semibold"
      FontWeight="Bold"
      Foreground="#1E1B6E"
      x:Name="StationName"
      FontSize="32"
      Width="200"
      VerticalAlignment="Center"
      Margin="12,6,0,10"
      LineHeight="32"
            Tag="{Binding stopId}"
            Tap="StationName_Tap"
            Grid.Column="2"
                        />
  </Grid>
</DataTemplate>

      

I tried to cancel the ListBox as it was added recently before the application ran into a performance issue. But this reduces the delay time by a few milliseconds. I also tried setting VirtualizingStackPanel.VirtualizationMode to be reusable just in case, but that didn't do anything. What can I do to improve the user experience? I've heard about loading PivotItem content when needed, but didn't find anything useful from Google as most articles either use the pivot.loadedpivotitem event or the pivotitem.loaded event and both did not help eliminate the delay.


Edit: I understand, although the background thread is running, the ui thread is affected in one way or another. the page is loading, but you can do nothing like scroll until the data binding is complete. and the gestures still lag behind after that.

+3


source to share


1 answer


The loading issue could be due to the huge ItemsSource. You can try doing incremental scrolling in your app ( ISupportIncrementalLoading ). Load fewer items first and load leftover items upon request.



0


source







All Articles