UWP: how to log the display events of a PivotItem

147 Views Asked by At

I encounter a "latency" problem on a screen that contains a Pivot and 5 PivotItems. These problem only occurs the first time than the 3rd and the 4th PivotItems are displayed. When I come back to these PivotItems, or if I select others PivotItems I don't meet the same "latency"...

enter image description here

I tried to understand where come this problem, so I've added some events on the PivotItems: Loaded, Loading and GotFocus. In my logs, I see that Loaded and Loading are well called after the page is displayed, but GotFocus is only called if an item in the PivotItem is focused.

I also use the SelectedIndex on the Pivot, but this doesn't help me to understand why I meet latencies with 2 PivotItems...

All the datas of the displayed form are loaded from a SQLite database through the LoadDatas() method: so when I browse the PivotItems, the datas are already loaded. In my logs, I see that Loading or Loaded are well called after the loading of the datas in the Constructor:

11.07.18.615885 : HomeViewModel - OpenForm()
11.07.18.662764 : DetailsViewModel - Ctor() - start
11.07.18.662764 : DetailsViewModel - LoadDatas() - start
11.07.18.803396 : DetailsViewModel - LoadDatas() - end
11.07.18.803396 : DetailsViewModel - Ctor() - end
11.07.19.053413 : DetailsPage - PivotItem_Loading() - DetailsGeneralPivotItem
11.07.19.053413 : DetailsPage - PivotItem_Loading() - DetailsMachinePivotItem
11.07.19.069042 : DetailsPage - PivotItem_Loading() - DetailsComponentPivotItem
11.07.19.069042 : DetailsPage - PivotItem_Loading() - DetailsFormPartsPivotItem
11.07.19.069042 : DetailsPage - PivotItem_Loading() - DetailsFeedbacksPivotItem
11.07.19.287811 : DetailsPage - PivotItem_Loaded() - DetailsGeneralPivotItem
11.07.19.287811 : DetailsPage - PivotItem_Loaded() - DetailsMachinePivotItem
11.07.19.287811 : DetailsPage - PivotItem_Loaded() - DetailsComponentPivotItem
11.07.19.303432 : DetailsPage - PivotItem_Loaded() - DetailsFormPartsPivotItem
11.07.19.303432 : DetailsPage - PivotItem_Loaded() - DetailsFeedbacksPivotItem

The XAML of the 3rd PivotItem, which is concerned by the latency problem, looks like this:

<Pivot x:Name="Pivot"
       SelectedIndex="{Binding SelectedIndexPivot, Mode=TwoWay}"
       Opacity="{Binding IsBusy, Converter={StaticResource ActivityToOpacityConverter}}"
       IsEnabled="{Binding IsBusy, Converter={StaticResource InvertedBoolConverter}}">

    <!-- 1. General / 2. Machine -->
    ...
    <!-- 3. Component -->
    <PivotItem x:Uid="DetailsComponentPivotItem"
               x:Name="DetailsComponentPivotItem"
               Loaded="PivotItem_Loaded"
               Loading="PivotItem_Loading">
        <ScrollViewer VerticalScrollBarVisibility="Hidden"
                      VerticalScrollMode="Auto">
            <StackPanel>
                ...
                <Grid Grid.Row="0">
                    ...
                    <!-- Component Order -->
                    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0" Margin="4,8,20,0" >
                        <TextBlock x:Uid="DetailsComponentTextBlockComponentOrder" />
                        <AutoSuggestBox x:Uid="DetailsComponentAsbComponentOrder"
                                    Name="DetailsComponentAsbComponentOrder"
                                    ItemsSource="{x:Bind ViewModel.VComponentOrders}"
                                    DisplayMemberPath="component_order"
                                    TextMemberPath="component_order"
                                    QueryIcon="Find"
                                    Text="{Binding CarForm.component_order, Mode=TwoWay, Converter={StaticResource StringToNullableIntConverter}}"
                                    TextChanged="asbTextChanged"
                                    QuerySubmitted="asbQuerySubmitted"
                                    SuggestionChosen="asbSuggestionChosen" />
                    </StackPanel>
                    <!-- Component Order Type -->
                    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1" Margin="4,8,20,0" >
                        <TextBlock x:Uid="DetailsComponentTextBlockComponentOrderType" />
                        <ComboBox ItemsSource="{x:Bind ViewModel.ComponentOrderType}"
                                  SelectedItem="{Binding SelectedComponentOrderType, Mode=TwoWay}"
                                  HorizontalAlignment="Stretch" />
                    </StackPanel>
                    ...                         
                    <!-- Hours -->
                    <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="2" Margin="4,8,20,0" >
                        <TextBlock x:Uid="DetailsComponentTextBlockComponentHours" />
                        <input:SfNumericTextBox FormatString="N0"
                                                Value="{Binding CarForm.component_hour, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                                MaximumNumberDecimalDigits="0"
                                                Style="{StaticResource NumericTextBoxStyle}" />
                    </StackPanel>
                </Grid>
                ...                     
                <Grid Margin="4,8,20,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBlock x:Uid="DetailsComponentTextBlockComponentPhotos" Grid.Row="0"/>
                    <GridView ItemsSource="{x:Bind ViewModel.CarForm.images}"
                              IsItemClickEnabled="True"
                              SelectionMode="Single"
                              Grid.Row="1">
                        <i:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="ItemClick">
                                <core:InvokeCommandAction Command="{Binding PhotoItemClickedCommand}" />
                            </core:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                        <GridView.FooterTemplate>
                            <DataTemplate>
                                <CommandBar Background="White">
                                    <CommandBar.Content>
                                        <AppBarButton x:Uid="DetailsComponentButtonAddPhoto"
                                                      Icon="Add"
                                                      Command="{Binding AddPhotoCommand}" />
                                    </CommandBar.Content>
                                </CommandBar>
                            </DataTemplate>
                        </GridView.FooterTemplate>
                    </GridView>
                </Grid>
            </StackPanel>
        </ScrollViewer>
    </PivotItem>
    <!-- 4. Parts / 5. Feedbacks -->
    ...            
</Pivot>

This PivotItem contains a lot of fields:

  • AutoSuggestBox
  • TextBox
  • ComboBox
  • Syncfusion NumericTextBox
  • GridView with photos list

I've already tried to migrate from "{Binding ...}" to "{x:Bind ...}" but I encounter problems with some components: ComboBox, Syncfusion NumericTextBox. So I currently mix these 2 bindings in my page.

I've also tried to remove the GridView block, but the latency is always present.

=> Would you have any explanation? Which events are called at the show of a PivotItem? Is there a way to fix this through XAML? (with "x:DeferLoadStrategy" or another way)

0

There are 0 best solutions below