![\"Einstellungen](\"..\/fileadmin\/_temp_\/2020_04\/pic_230_002.png\")
<\/p>\nVisual Studio 2019 und höher<\/b><\/p>\n
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.<\/b><\/p>\n
Logical Tree vs. Visual Tree<\/b><\/p>\n
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<\/b>, Grid<\/b>, StackPanel<\/b>, TextBox<\/b>, Button <\/b>und so weiter.<\/p>\n
Der Logical Tree definiert dabei nicht nur, welche Elemente in der XAML-Definition enthalten sind, sondern auch deren hierarchische Anordnung.<\/p>\n
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<\/b>-Steuerelement etwa besteht aus Rändern, Bildlaufleisten, Spaltenköpfen, Zeilen, Spalten und weiteren Elementen.<\/p>\n
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.<\/p>\n
Debugging-Funktionen aktivieren<\/b><\/p>\n
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<\/b>. Im Optionen-Dialog wechseln Sie dann zum Bereich Debugging|Allgemein<\/b>. Hier finden Sie die Option UI-Debugtools für XAML aktivieren <\/b>(siehe Bild 1).<\/p>\n
<\/p>\n
Bild 1: Einstellungen für das Debuggen von XAML-Code<\/span><\/b><\/p>\n Die einzelnen Einstellungen haben die folgende Bedeutung:<\/p>\n Bild 2: Steuerelemente für das Debuggen von XAML-Eigenschaften<\/span><\/b><\/p>\n Visuellen Livebaum und Eigenschaften-Explorer aktivieren<\/b><\/p>\n 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 <\/b>und Debuggen|Fenster|Live-Eigenschaften-Explorer <\/b>(siehe Bild 3).<\/p>\n Bild 3: Visuellen Livebaum und Live-Eigenschaften-Explorer per Menü aktivieren<\/span><\/b><\/p>\n Den visuellen Livebaum nutzen<\/b><\/p>\n 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<\/b> oder, wenn das Laufzeittools-Menü im Anwendungsfenster aktiviert ist, über die Schaltfläche Zur visuellen Echtzeitstruktur wechseln <\/b>(linke Schaltfläche). Wir haben ein einfaches Fenster mit einer Schaltfläche erstellt, deren Code im logischen Baum vereinfacht wie folgt aussieht:<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>\n
![\"Steuerelemente](\"..\/fileadmin\/_temp_\/2020_04\/pic_230_001.png\")
<\/p>\n![\"Visuellen](\"..\/fileadmin\/_temp_\/2020_04\/pic_230_003.png\")
<\/p>\n<Window x:Class=\"MainWindow\" ... Title=\"MainWindow\" Height=\"450\" Width=\"800\">\r\n <Window.Resources>\r\n <Style TargetType=\"Button\">\r\n <Setter Property=\"Margin\" Value=\"5\"><\/Setter>\r\n <\/Style>\r\n <\/Window.Resources>\r\n <Grid>\r\n <Grid.ColumnDefinitions>\r\n <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n <\/Grid.ColumnDefinitions>\r\n <Grid.RowDefinitions>\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n <RowDefinition Height=\"*\"><\/RowDefinition>\r\n <\/Grid.RowDefinitions>\r\n <Button x:Name=\"btnTest\">Beispielschaltfläche<\/Button>\r\n <\/Grid>\r\n<\/Window><\/pre>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t