Kolumne: XAML Expertise

XAML-Tipp: UWP – Mehr Performance durch Deferred Loading
1 Kommentar

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „UWP: Mehr Performance durch Deferred Loading“

Ein großes Problem sind Listen mit komplexem Inhalt. Zahlreiche Grafiken, ValueConverter und das Laden von Daten verzögerten die Darstellung enorm. Mit dem x:Phase Attached Attribute kann man nun einzelnen DataTemple-Elementen eine Renderpriorisierung mitgeben, sodass der Benutzer bereits die ersten wichtigen Informationen sieht und weitere Daten nachträglich geladen werden.

Das hat den gleichen Effekt, den Webbrowser wie beispielsweise Google Chrome schon lange bieten. Für den Benutzer erscheint die App somit deutlich schneller, obwohl diese noch nicht mit ihrer Arbeit fertig ist. Das Rendern wird hierbei in Phasen aufgeteilt. Die erste Phase beginnt mit 0, das ist auch der Standardwert für alle Steuerelemente. Jede weitere definierte Phase kommt dann an die Reihe. In Listing 1 wird ein Data-Template gezeigt, das erst den Produktnamen und anschließend den Preis anzeigt. Je nach Leistung des Geräts bemerkt der Benutzer eine verzögerte Darstellung des Preises. In den meisten Fällen handelt es sich dabei um Smartphones. Um x:Phase auch außerhalb von Data-Templates nutzen zu können, gibt es das IncrementalUpdateBehavior in Expression Blend.

<DataTemplate x:DataType="local:Product">
  <Grid Height="100" Width="200">
    <TextBlock Text="{x:Bind Name}" />
    <TextBlock Text="{x:Bind Price}" x:Phase="1" />
  </Grid>
</DataTemplate>

Oft existieren Steuerelemente, die zu Beginn ausgeblendet werden und nur zu speziellen Fällen erscheinen sollen. Dennoch wird ein Rendern ausgelöst, das die Startzeit und Bedienbarkeit verzögern kann. Das neue x:Defer Attached Attribute bietet hierbei eine Lazy-Loading-Funktionalität. Das bedeutet, dass der Entwickler manuell im Code festlegen muss, ab wann das Steuerelement wirklich instanziiert werden soll, wann er es also wirklich benötigt.

Die Bedingung dafür ist, dass das gewünschte Steuerelement einen Namen tragen muss. Der wird dazu benötigt, die Instanz kontrolliert anstoßen zu können. Zusätzlich muss das Steuerelement das Attribut x:DeferLoadStrategy=“Lazy“ erhalten. Für die kontrollierte Instanziierung wird in der Code-Behind-Datei die FindName-Methode aufgerufen, die dann den Namen des Steuerelements benötigt. Sie sorgt für eine sofortige Instanziierung und die Oberfläche beginnt mit dem Rendervorgang. In den Listings 2 und 3 wird das Beispiel veranschaulicht.

<Grid x:Name="Details" x:DeferLoadStrategy="Lazy">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <TextBlock Text="{x:Bind Description}" />
  <TextBlock Grid.Column="1" Text="{x:Bind Price}" />
  <TextBlock Grid.Row="1" Text="{x:Bind Company}" />
  <TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind Support}" />
</Grid>
<Button Content="Zeige Details" Click="OnButtonClick"/>
private void OnButtonClick(object sender, RoutedEventArgs e)
{
  this.FindName("Details");
}
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

1 Kommentar auf "XAML-Tipp: UWP – Mehr Performance durch Deferred Loading"

avatar
400
  Subscribe  
Benachrichtige mich zu:
Greogor Biswanger
Gast

Juhu wieder Kommentare

X
- Gib Deinen Standort ein -
- or -