XAML-Tipp: WPF – Ladevorgang ohne ViewModel-Logik anzeigen

Idealerweise basiert eine WPF-Anwendung auf dem Offline-First-Prinzip, wodurch schnellstmöglich Daten aus dem Cache angezeigt werden und parallel ein Update mit neuen Daten erfolgt. Das ist oft aus unterschiedlichen Gründen gar nicht möglich, und der Anwender muss doch auf seine Datenanzeige warten. Das Anzeigen des Ladevorgangs kann automatisch von WPF übernommen werden, ohne dass dafür zusätzlicher ViewModel-Code notwendig wäre.

WPF: Ladevorgang ohne ViewModel-Logik anzeigen

Dazu müssen die folgenden Steuerelemente vorhanden sein: Ein Loading-TextBlock und ein Inhaltssteuerelement wie die ListView/ListBox oder ein DataGrid. Die Anzeigensteuerung soll nun durch Styles definiert werden. Wann welcher Style aktiv wird, entscheiden ein DataTrigger und ein Standard-Trigger. Sind keine Daten vorhanden, wird der Style für den Loading-TextBlock aktiv, und das Inhaltssteuerelement wird ausgeblendet. Sobald die Daten geladen wurden, muss es natürlich sichtbar bleiben. Damit das funktioniert, wird für das Inhaltssteuerelement eine Datenbindung mit einer IsAsync-Deklaration benötigt. Ansonsten kann kein verzögertes Data Binding folgen. Die beiden Trigger lauschen auf das gebundene Property des ViewModel, um herauszufinden, ob es gleich null ist oder nicht. Der komplette Code dazu steht in Listing 1.

<Window
  x:Class="WpfLoadingSample.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="clr-namespace:WpfLoadingSample"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  Title="MainWindow"
  Width="525"
  Height="350"
  mc:Ignorable="d">
  <Window.Resources>
    <Style TargetType="TextBlock">
      <Setter Property="Foreground" Value="Blue" />
      <Setter Property="Visibility" Value="Collapsed" />
      <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=MyListView, Path=ItemsSource}" Value="{x:Null}">
          <Setter Property="Visibility" Value="Visible" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
    <Style TargetType="ListView">
      <Setter Property="Visibility" Value="Visible" />
      <Style.Triggers>
        <Trigger Property="ItemsSource" Value="{x:Null}">
          <Setter Property="Visibility" Value="Collapsed" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <Grid>
    <Grid.DataContext>
      <local:MainWindowViewModel />
    </Grid.DataContext>
    <TextBlock
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Text="Loading..." />
    <ListView Name="MyListView" ItemsSource="{Binding Data, IsAsync=True}" />
  </Grid>
</Window>

Windows Developer

Dieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. Außerdem ist der Windows Developer weiterhin als Print-Magazin im Abonnement erhältlich.