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

Kolumne XAML Expertise: WPF und Windows-Apps

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger nun schon seit fünf Jahren Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „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. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.