XAML-Eigenschaften beim Debuggen testen

Visual Studio 2019 und höher

XAML bietet sehr viele Möglichkeiten, das Design von Steuerelementen in einer Anwendung anzupassen. Viele der Eigenschaften sind von den Standardsteuerelementen vorgegeben, andere passen Sie selbst durch Definition des XAML-Codes an. Wenn dann beim Testen der Anwendung Elemente nicht wie erwartet aussehen, stellt sich die Frage, woran das liegt. Dann lautet die Aufgabe, herauszufinden, woher die jeweilige Einstellung stammt und diese so anzupassen, dass das Design wie gewünscht erscheint. Für solche Zwecke gibt es in Visual Studio eingebaute Tools, die wir uns in diesem Artikel ansehen. Mit Visual Studio 2019 gibt es viele Verbesserungen, die ein Update lohnenswert machen.

Logical Tree vs. Visual Tree

Es gibt zwei verschiedene Hierarchien bei der Darstellung von XAML-Benutzeroberflächen. Die erste kennen Sie sehr gut – dabei handelt es sich um den Logical Tree. Der Logical Tree besteht aus den Elementen, die Sie im XAML-Editor definieren – also Elemente wie Window, Grid, StackPanel, TextBox, Button und so weiter.

Der Logical Tree definiert dabei nicht nur, welche Elemente in der XAML-Definition enthalten sind, sondern auch deren hierarchische Anordnung.

Die zweite Hierarchie ist der Visual Tree. Warum benötigen wir eine zweite Hierarchie Weil die Elemente des Logical Tree auf Vorlagen basieren, die nicht nur aus einem einzigen Element bestehen, sondern aus mehreren. Der Logical Tree ist also eine vereinfachte Form des Visual Tree. Wenn der Logical Tree gerendert wird, also wenn die Darstellung der Benutzeroberfläche daraus generiert wird, entstehen daraus meist sehr viel mehr Elemente. Ein ListView-Steuerelement etwa besteht aus Rändern, Bildlaufleisten, Spaltenköpfen, Zeilen, Spalten und weiteren Elementen.

Warum müssen wir das an dieser Stelle wissen Weil wir zur Laufzeit nicht auf die Eigenschaften der Elemente des Logical Trees zugreifen können, aber auf die Eigenschaften des Visual Trees. Wie das gelingt, zeigen wir in den folgenden Abschnitten.

Debugging-Funktionen aktivieren

Damit wir die nachfolgend vorgestellten Funktionen nutzen können, müssen wir diese zunächst in den Optionen von Visual Studio aktivieren. Dazu öffnen Sie den Optionen-Dialog mit dem Menübefehl Extras|Optionen. Im Optionen-Dialog wechseln Sie dann zum Bereich Debugging|Allgemein. Hier finden Sie die Option UI-Debugtools für XAML aktivieren (siehe Bild 1).

Bild 1: Einstellungen für das Debuggen von XAML-Code

Die einzelnen Einstellungen haben die folgende Bedeutung:

• UI-Debugtools für XAML aktivieren: Mit dieser Option legen Sie fest, ob die Debugtools überhaupt aktiviert sein sollen. Die untergeordneten Optionen steuern dann, wie die Debug-Tools bereitgestellt werden.
• Voransicht für ausgewählte Elemente in der Live-Baumansicht anzeigen: Das aktuell ausgewählte XAML-Element wird im Bereich Visueller Livebaum angezeigt.
• Laufzeittools in Anwendung anzeigen: Blendet eine Menüleiste oben im Fenster der zu testenden Anwendung ein, über welche die Debugging-Funktionen schnell aufgerufen werden können (siehe Bild 2). Die Laufzeittools können Sie übrigens auch zur Laufzeit durch Aktivieren der Option einblenden.



Bild 2: Steuerelemente für das Debuggen von XAML-Eigenschaften

• XAML Hot Reload aktivieren: Aktiviert die Funktion XAML Hot Reload, die dazu dient, zur Laufzeit Änderungen am XAML-Code vorzunehmen und diese direkt in Echtzeit zu testen.
• Nur meine XAML aktivieren: Der visuelle Livebaum zeigt ab Visual Studio 2019 (Version 16.4) nur benutzerdefinierte Elemente an, wenn diese Option aktiviert ist. Wenn Sie alle Elemente sehen wollen, deaktivieren Sie diese Option.
• Bei Auswahl eines Elements Auswahlmodus deaktivieren: Wenn Sie bei aktivierter Option in der Menüleiste für die Debugging-Tools in der Anwendung auf die Schaltfläche Element auswählen klicken und dann über die Elemente der Anwendung fahren, wird das jeweils überfahrene Element mit einem gestrichelten, roten Rahmen versehen. Klicken Sie es an, wird das jeweilige Element im visuellen Livebaum hervorgehoben. Danach wird die Schaltfläche Element auswählen wieder deaktiviert und Sie müssen diese für die erneute Auswahl eines Elements erneut anklicken. Ist die Option deaktiviert, können Sie nach dem Anklicken der Schaltfläche Element auswählen immer wieder neue Elemente im visuellen Livebaum anzeigen lassen. Die Schaltfläche Element auswählen bleibt dann aktiviert.
• Bei Dokumentspeicherung XML Hot Reload anwenden: XML Hot Reload wird angewendet, wenn Sie das Dokument speichern.

Visuellen Livebaum und Eigenschaften-Explorer aktivieren

Wenn Sie die Symbole zum Aufrufen der Debugging-Funktionen im Anwendungsfenster nicht sehen wollen, können Sie die wichtigsten Funktionen auch über das Menü von Visual Studio aufrufen. Dort finden Sie die Einträge Debuggen|Fenster|Visueller Livebaum und Debuggen|Fenster|Live-Eigenschaften-Explorer (siehe Bild 3).

Bild 3: Visuellen Livebaum und Live-Eigenschaften-Explorer per Menü aktivieren

Den visuellen Livebaum nutzen

Den visuellen Livebaum haben wir nun schon mehrfach erwähnt, aber wir haben ihn uns noch nicht angesehen. Den logischen Baum kennen wir, also schauen wir uns nun den visuellen Livebaum an. Diesen aktivieren Sie beispielsweise über den oben genannten Menübfehl Debuggen|Fenster|Visueller Livebaum oder, wenn das Laufzeittools-Menü im Anwendungsfenster aktiviert ist, über die Schaltfläche Zur visuellen Echtzeitstruktur wechseln (linke Schaltfläche). Wir haben ein einfaches Fenster mit einer Schaltfläche erstellt, deren Code im logischen Baum vereinfacht wie folgt aussieht:

<Window x:Class="MainWindow" ... Title="MainWindow" Height="450" Width="800">
     <Window.Resources>
         <Style TargetType="Button">
             <Setter Property="Margin" Value="5"></Setter>
         </Style>
     </Window.Resources>
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"></ColumnDefinition>
             <ColumnDefinition Width="*"></ColumnDefinition>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"></RowDefinition>
             <RowDefinition Height="*"></RowDefinition>
         </Grid.RowDefinitions>
         <Button x:Name="btnTest">Beispielschaltfläche</Button>
     </Grid>
</Window>

Username or Email

Passwort

Angemeldet bleiben