Apps für WinUI 3 erstellen

Installieren Sie die aktuelle Version von Visual Studio 2022. Spielen Sie alle Updates zur Entwicklungsumgebung ein. Installieren Sie die folgenden Workloads: .NET-Desktopentwicklung, Desktop development with C++ und Entwicklung für die universelle Windows-Plattform. Ebenso ist es notwendig, dass Sie das Windows-App-SDK installieren. Die aktuelle Version finden Sie unter [1], wenn Sie im Store für die Extensions von Visual Studio nicht fündig werden. Mit der Windows-App-SDK-Extension wandern neue Projektvorlagen für Visual Studio auf Ihren Rechner.

Als Projektvorlage wählen Sie dann Leere App, verpackt (WinUI 3 in Desktop). Ausgangspunkt für unsere Experimente ist die Datei MainWindow.xaml. Hier erfolgt die Deklaration der Benutzerschnittstelle. Starten Sie die App ein erstes Mal, danach sind Sie bereit für Ihre Erkundungstour. Einen Designer gibt es (noch) nicht, vielmehr wird Hot Reload als interaktive Hilfe für das Erstellen des User Interface verwendet.

Fragen des Designs

Bei der Vorstellung der o. g. Controls haben Sie es schon gemerkt: Sie unterscheiden sich in Fragen des Designs, des Layouts und der gesamten User Experience erheblich davon, was man bisher mit klassischen Desktopanwendungen verwendet hat. Mobile und Desktop verschmelzen an dieser Stelle. Wie sollten nun Desktopanwendungen gestaltet werden? Man könnte es nach dem gleichen Muster machen, wie man es bisher auch mit WinForms oder WPF umgesetzt hat. Das wäre jedoch altbacken und man würde das Potenzial der Möglichkeiten nicht nutzen. Mit Blick auf die Designhinweise und die Optionen der Controls ist das Spektrum in Fragen des Designs deutlich breiter. Bereits bei der Erstellung von visuellen Prototypen, d. h. vor der technischen Umsetzung, sind diese erweiterten Möglichkeiten zu berücksichtigen. Mit anderen Worten: Mit dem Wechsel von WinForms bzw. WPF zu WinUI 3 muss ein Umdenken in Bezug auf die gesamte Gestaltung des User Interface einhergehen. Das betrifft die folgenden Aspekte:

• Layout: Wie ist der Aufbau der Seiten zu gestalten? Im Mittelpunkt steht der Content und die Bedienung der App rückt in den Hintergrund. Das gewünschte Layout wird dann mittels der Layoutcontainer (Grid, StackLayout, …) umgesetzt.
• Navigation: Viele Jahre gab es keine Alternative zu einem klassischen Anwendungsmenü mit den typischen Einträgen Datei, Bearbeiten, Ansicht usw. Auch in der WinUI 3 haben wir ein solches Control (MenuBar). Handelt es sich bei der App um eine dokumentenbasierte Applikation, dann kann dieses Navigationskonzept immer noch richtig sein. Für einen Großteil von anderen Situationen in der Praxis wird man sich jedoch für eine andere Art der Navigation entscheiden. Das sind zum Beispiel Registerkarten (Tabnavigation), Hamburgermenü oder die Listen-/Detailnavigation. Viele Szenarien lassen sich mit unterschiedlichen Konzepten realisieren. Bei der Auswahl gilt es, den konkreten Bedienvorgang im Auge zu behalten. Welche Navigation schafft die meiste Übersicht? Wie viele Unterelemente muss ich ansteuern? Ist die Hierarchie der Navigation flach, d. h., befinden sich alle Elemente auf einer Ebene oder sind mehrere Ebenen zu überbrücken? Ebenso ist die Anzahl der Klicks, Touch-Gesten usw. zu berücksichtigen, bis man zum gewünschten Element gekommen ist. Hier gilt es, die Anzahl der notwendigen Aktionen aus Sicht der Nutzerin bzw. des Nutzers zu minimieren.
• Auswahl der Controls: Wählen Sie die passenden Controls aus. Das ist gar nicht so einfach. Viele Szenarien (Use Cases) lassen sich mit mehreren Controls realisieren. Hier ist es hilfreich, in der Dokumentation nachzusehen. Es geht nicht um die technische Umsetzung, sondern um die Wahl des passenden Elements im Sinne der Designrichtlinien. In der Dokumentation findet sich zu jedem Control ein Abschnitt, der genau diese Frage beantworten soll: „Ist dies das richtige Steuerelement?“ (Abb. 5).
• Gestaltung: Die Anpassung der Controls in Bezug auf Farben, Schriftarten, Größen usw. folgt als letzter Schritt bei dieser Vorgehensweise.

Sind die genannten Punkte geklärt, geht es um die technische Umsetzung des User Interface. Dieses wird deklarativ mittels XAML-Code erstellt.

Abb. 5: Der Abschnitt „Ist dies das richtige Steuerelement?“ gibt wichtige Hinweise

Fragen der (XAML-)Codierung

WinForms-Anwender müssen sich am meisten umstellen. In WinForms wurde der gesamte Aufbau mittels Drag and Drop und der Zuweisung von Eigenschaftswerten erledigt. WPF und UWP verwendeten beide bereits XAML-Code. Beide Systeme hatten jedoch auch einen grafischen Designer. Der XAML-Dialekt von WPF unterscheidet sich gegenüber dem von WinUI. WinUI 3 ist eine direkte Weiterentwicklung von WinUI 2, daher brauchen sich Entwickler von Apps der UWP nicht umgewöhnen. Nur dass es jetzt keinen Designer mehr gibt, mag etwas „schmerzen“. Mit dem Wegfall des grafischen Designers kann auch das Designtool Blend nicht für WinUI 3 genutzt werden. Wer mit diesem Tool, dessen Bedienung sich eher an Designer als an Entwickler richtet, zum Beispiel Animationen erstellt hat und den daraus resultierenden Quellcode in XAML direkt übernommen hat, wird sich ggf. etwas ärgern. XAML-Vorschau und Designer soll nun eine leistungsfähigere Version von Hot Reload ersetzen.

In der Praxis heißt das, den XAML-Editor (Visual Studio) links auf dem Bildschirm (oder Bildschirm 1) und die gestartete App rechts auf dem Bildschirm (oder Bildschirm 2) anzuordnen. Änderungen am Quellcode werden dann unmittelbar in die gestartete App übernommen, ohne diese neu kompilieren zu müssen. Die Praxis zeigt, dass es hier Fortschritte gibt, dennoch erfordern einige größere Änderungen – zum Beispiel am Layout in einem Grid – weiterhin einen Neustart der Anwendung.

Das PersonPicture Control

In diesem Abschnitt zeigen wir die Arbeit mit interessanten Controls aus der WinUI 3. Wir haben dazu das PersonPicture Control ausgewählt. Die Verwendung des Control ist unter [8] und die zugehörige API-Dokumentation unter [9] zu finden. Ein simpler Einsatz erfolgt z. B. so:

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
  <PersonPicture
    DisplayName="Maria Musterfrau"
    ProfilePicture="Assets\meinAvatar.png"
    Initials="MM" />
</StackPanel> 

Ist ein Bild vorhanden, wird dieses angezeigt. Gibt es keins, werden die Initialen eingeblendet (Abb. 6).

Abb. 6: Das PersonPicture Control

Man muss die Datenfelder des Control nicht manuell setzen. Für die Datenhaltung der Kontaktdaten bietet sich hier die spezialisierte Klasse Contact an. Ein Objekt dieser Klasse enthält bereits Properties für alle wesentlichen Merkmale eines Kontakts wie Adressen (mehrere), Vorname, Nachname, Telefonnummern (mehrere), E-Mail-Adressen (mehrere), Jobinfo, ID, Nickname, Notizen usw. Die Verwendung dieser Klasse scheint in diesem Fall angezeigt, da man auf eine vollständig definierte Datenstruktur zurückgreifen kann. Im XAML-Code binden wir in diesem Fall lediglich die Eigenschaft Contact des PersonPicture Control, also:

<PersonPicture
  Contact="{x:Bind CurrentContact, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

Im C#-Quellcode benötigen wir eine Property und eine Implementierung des INotifyPropertyChanged Events, welches bei einer Änderung der Daten die View benachrichtig und die Anzeige daraufhin automatisch aktualisiert wird. Ein Objekt der Klasse Contact wird daher wie in Listing 1 definiert.

public Contact CurrentContact{…};
var contact = new Contact();
contact.FirstName = "Maria";
contact.LastName = "Musterfrau";
...
CurrentContact = contact;

Wir definieren ein Property mit der Bezeichnung CurrentContact des Typs Contact. Setter- und Getter sind hier nur angedeutet. Danach erstellen wir ein konkretes Objekt der Klasse Contact und weisen es dieser Property zu. Über die Datenbindung wird die Anzeige aktualisiert. Anhand des Control PersonPicture und der Klasse Contact zeigt sich die gute Abstimmung zwischen visuellen Controls für das User Interface und vorbereiteten Klassenstrukturen für die Datenhaltung. Die Features sind nun nicht mehr für Verwendung in der UWP begrenzt, sondern können auch über WinUI 3 in Anwendungen für den Desktop eingesetzt werden.

Eine App für WinUI 3

An dieser Stelle wollen wir die Vorgehensweise in der Praxis anhand eines konkreten Beispiels demonstrieren. Dafür wählen wir die Gestaltung einer Seite zur Anzeige von Wetterinformationen auf einem Info-Display oder einem Smarthome-Bildschirm. Dabei können wir beispielsweise davon ausgehen, dass wir einen visuellen Entwurf zum späteren Aussehen der Oberfläche vorliegen haben. Ein solcher Prototyp wird idealerweise von einem Designer angefertigt und gibt uns folgende Hinweise: grundsätzliches Aussehen des betreffenden Screens, Navigationsstruktur, darzustellende Inhalte, Schriftgrößen, Farben, Schriftarten usw. Dieser visuelle Prototyp ist Ausgangspunkt für unsere Arbeiten. Wir empfehlen an dieser Stelle, noch nicht direkt mit der Umsetzung in XAML zu starten. Ein konzeptioneller Zwischenschritt kann die Arbeit erleichtern. Das Ziel ist es, sich über das Layout und die Verwendung der Control genauer im Klaren zu werden. Dazu können wir eine Skizze zum geplanten Layout anfertigen. Es genügt eine Handskizze mit Papier und Bleistift. Hieran können wir den Einsatz der Layoutcontainer planen und damit die Aufteilung des Screens vornehmen. Ebenso können wir die Controls den Layoutcontainern zuordnen. Den Entwurf zu unserem Beispiel sehen Sie in Abbildung 7.

Abb. 7: Layoutskizze (Entwurf) der Wetterdarstellung

Anhand dieser Skizze können wir in Bezug auf das Beispiel folgende Festlegungen treffen:

• Root-Element: Wir wollen zwischen unterschiedlichen Orten durch eine Wischbewegung oder mittels Tastatur bzw. einem Klick auf einen Pfeil wechseln. Für jeden Ort wird die Darstellung der Wetterdaten vollständig aufgebaut. Wir verwenden zur Navigation auf oberster Ebene ein Control des Typs .
• Basislayout: Die Seite wird mit Hilfe einer Gitterstruktur, d. h. einem -Element eingeteilt. Dabei definieren wir nur eine Zeilenstruktur mit vier Elementen. Eine Einteilung in mehrere Spalten nehmen wir nicht vor, denn wir erkennen, dass die Zeilen eine sehr unterschiedliche Anzahl von Spalten aufweisen. Hierbei ist es nicht immer sinnvoll, die größte Anzahl von Spalten als Einteilungsmaßstab zu verwenden. Daher haben wir uns für ein Grid mit vier Zeilen und null Spalten entschieden. Für die einzelnen Zeilen werden unterschiedliche Layouts definiert. Die Höhendefinition erfolgt relativ. Die erste und die letzte Zeile haben eine Höhe von 0,7* und die beiden mittleren Zeilen eine relative Höhe von *.
• Sublayout: Für jede Zeile wird das untergeordnete Layout definiert. Es werden für die wöchentliche Vorschau (Zeile 2) fünf Spalten und eine Zeile für die Überschrift („Täglich“) benötigt. Hier platzieren wir ein -Element mit fünf Spalten und gleicher Breite und einer fixen Höhe für die Überschrift. Ähnlich verfahren wir in der nächsten Zeile. Die Wetterdaten werden im Dreistundenrhythmus für den gewählten Tag vorhergesagt. Daher verwenden wir für das Sublayout (Zeile 3) ein -Control mit acht Spalten und zwei Zeilen. Die Sublayouts für Zeile 1 und 4 sind noch nicht fertiggestellt.
• User-Controls: Wiederkehrende Elemente werden in ein eigenes User-Control ausgelagert. Dieses ist im Beispiel der Fall für die Tagesvorhersage. Dieses User-Control enthält dann die Struktur für die Anzeige der Wetterdaten für den betreffenden Tag. Wir haben es als User-Control Day bezeichnet. Analog ist es für die Anzeige der täglichen Vorhersage. Hierzu definieren wir ein User-Control namens Hourly. Die Eigenschaften eines User-Control werden in Form einer Dependency Property ausgeführt und können damit von außen definiert werden.

Die relevanten Ausschnitte aus dem Quellcode zur Definition des User Interface sind in Listing 2 dargestellt.

<Window
  ...">
  <FlipView>
    <!--Ort -->
    <Grid>
      ...
      <Grid.RowDefinitions>
        <RowDefinition Height="0.7*"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition Height="0.7*"/>
      </Grid.RowDefinitions>
      <!-- Kopfzeile-->
      <StackPanel HorizontalAlignment="Center">
        <TextBlock FontSize="50" FontWeight="Bold" FontFamily="Consolas" Text="Weimar"/>
        <TextBlock HorizontalAlignment="Center" FontSize="36" FontWeight="Bold" Text="21°"/>
      </StackPanel>
      <!-- Täglich-->
      <Grid Margin="20,0" Grid.Row="1">
        <Grid.RowDefinitions>
          <RowDefinition Height="30"/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock FontFamily="Consolas" Text="Täglich" FontSize="20"/>
        <local:Day DayName="Montag" Grid.Row="1"/>
        <local:Day DayName="Dienstag" Grid.Row="1" Grid.Column="1"/>
        <local:Day DayName="Mittwoch" Grid.Row="1" Grid.Column="2"/>
        <local:Day DayName="Donnerstag" Grid.Row="1" Grid.Column="3"/>
        <local:Day DayName="Freitag" Grid.Row="1" Grid.Column="4"/>
      <!-- Stündlich -->
      ...
      <!--Tagesinformationen-->
                ...
      </Grid>
    </Grid>
    <!--Ort 2-->
    <Grid>
      ...
    </Grid>
  </FlipView>
</Window>

Zu beachten ist auf oberster Ebene das <FlipView\>-Element, um zwischen kompletten Ansichten zu wechseln – in diesem Fall zwischen mehreren Orten bei der Wetteranzeige. Es folgt die Definition des <Grid\>-Elements zur Festlegung des Basislayouts (Zeilenstruktur). Dann kommen die Sublayouts für Kopfzeile, für die stündliche Vorhersage und die Tagesinformationen. Für sich wiederholende Anzeigen werden eigene User-Controls definiert.

<UserControl
  x:Class="Weather.Day"
  ...>
  <StackPanel HorizontalAlignment="Center">
    <TextBlock Margin="0,20" Text="{x:Bind DayName}"/>
    <Image HorizontalAlignment="Left" Margin="0,10" Width="50" Source="Assets/weather/day_clear.png"/>
    <StackPanel Orientation="Horizontal">
      <TextBlock FontSize="22" VerticalAlignment="Center" FontWeight="SemiBold" Text="23°"/>
      <TextBlock Margin="10,0" FontSize="16" VerticalAlignment="Center" Text="8°"/>
    </StackPanel>
    <TextBlock Text="Sonnig"/>
  </StackPanel>
</UserControl>
 
public sealed partial class Day : UserControl
{
  public Day()
  {
   this.InitializeComponent();
  }
 
  public string DayName
  {
   get { return (string)GetValue(DayNameProperty); }
   set { SetValue(DayNameProperty, value); }
  }
 
  public static readonly DependencyProperty DayNameProperty = DependencyProperty.Register("DayName", typeof(string), typeof(Day), new PropertyMetadata(null));
 
}

In Listing 3 sieht man beispielhaft den Quellcode für das User Control Day. Die Oberfläche wird in XAML erstellt. Wie man eine Dependency Property deklariert, ist im unteren Abschnitt des Quellcodes zu sehen. Hier ist das beispielhaft für die Eigenschaft DayName ausgeführt. DayName kann dann im User-Control selbst in der Datenbindung verwendet werden, zum Beispiel um ein Textfeld an diese Eigenschaft zu binden:

<TextBlock Margin="0,20" Text="{x:Bind DayName}"/>

Ebenso können wir bei der Verwendung des User-Control die Eigenschaft von außen definieren:

<local:Day DayName="Montag"/>

[1] https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/set-up-your-development-environment?tabs=vs-2022

[2] https://docs.microsoft.com/en-us/windows/apps/design/controls/buttons

[3] https://docs.microsoft.com/en-us/windows/apps/design/controls/

[4] https://docs.microsoft.com/de-de/windows/communitytoolkit/animations/lottie

[5] https://airbnb.io/lottie/#/

[6] https://docs.microsoft.com/de-de/windows/apps/design/motion/parallax

[7] https://docs.microsoft.com/en-us/windows/apps/design/controls/pipspager

[8] https://docs.microsoft.com/de-de/dual-screen/introduction

[9] https://docs.microsoft.com/de-de/windows/apps/design/controls/person-picture