XAML-Code-Editor

Der XAML-Code-Editor in der Visual Studio-IDE enthält alle Tools, die Sie zum Erstellen von WPF- und UWP-Apps für die Windows-Plattform und für Xamarin.Forms benötigen. In diesem Artikel wird die Rolle des Code-Editors bei der Entwicklung von XAML-basierten Apps beschrieben und es werden die Funktionen des XAML-Code-Editors in Visual Studio 2019 erläutert.

Betrachten wir zunächst einmal die IDE (Integrated Development Environment, integrierte Entwicklungsumgebung) anhand eines geöffneten WPF-Projekts. In der folgenden Abbildung sind zentrale IDE-Tools dargestellt, die im XAML-Code-Editor verwendet werden.

Die zentralen IDE-Tools von unten links im Uhrzeigersinn:

• Das Fenster XAML-Code-Editor – Thema dieses Artikels. Hier wird Code erstellt und bearbeitet.
• Das Fenster XAML-Designer . Hier wird die Benutzeroberfläche entworfen.
• Das andockbare Fenster Toolbox . Hier werden der Benutzeroberfläche Steuerelemente hinzugefügt.
• Die Schaltfläche Debuggen . Damit wird Code ausgeführt und gedebuggt.
  (Code kann beim Debuggen mit XAML Hot Reload auch in Echtzeit bearbeitet werden.)
• Das Fenster Projektmappen-Explorer . Hier werden Dateien, Projekte und Projektmappen verwaltet.
• Das Fenster Eigenschaften . Hier werden die Darstellung der Benutzeroberfläche und die Funktionsweise der Steuerelemente geändert.

Im Folgenden erfahren Sie mehr über den XAML-Code-Editor.

Benutzeroberfläche des XAML-Code-Editors

Das Code-Editor-Fenster für XAML-Apps enthält einige Benutzeroberflächenelemente, die auch in der Standard-IDE angezeigt werden. Darüber hinaus enthält es jedoch auch einige Funktionen, die nur in diesem Fenster zu finden sind und die die Entwicklung von XAML-Apps erleichtern.

Und so sieht das Fenster des XAML-Code-Editors aus.

Sehen wir uns als Nächstes nun die Funktionen der einzelnen Benutzeroberflächenelemente im Code-Editor an.

Erste Leiste

In der ersten Leiste oben im XAML-Code-Fenster sehen Sie links die Registerkarte Entwurf, die Schaltfläche Bereiche austauschen, die Registerkarte XAML und die Schaltfläche XAML aufklappen.

Funktionsweise:

• Über die Registerkarte Entwurf können Sie vom XAML-Code-Editor zum XAML-Designer wechseln.
• Über die Schaltfläche Bereiche austauschen können Sie in der IDE vom XAML-Designer zum XAML-Code-Editor wechseln.
• Über die Registerkarte XAML können Sie wieder zum XAML-Code-Editor wechseln.
• Über die Schaltfläche XAML aufklappen können Sie ein neues XAML-Code-Editor-Fenster außerhalb der IDE erstellen.

Auf der rechten Seite befinden sich die Schaltflächen Vertikale Aufteilung, Horizontale Aufteilung und Bereiche zuklappen.

Funktionsweise:

• Über die Schaltfläche Vertikale Aufteilung können Sie die Ausrichtung des XAML-Designers und des XAML-Code-Editors von horizontal in vertikal ändern.
• Über die Schaltfläche Horizontale Aufteilung können Sie die Ausrichtung des XAML-Designers und des XAML-Code-Editors von vertikal in horizontal ändern.
• Über die Schaltfläche Bereiche zuklappen können Sie den unteren Bereich (Code-Editor oder Designer) zuklappen. (Wenn Sie den unteren Bereich wieder anzeigen möchten, klicken Sie noch mal auf die Schaltfläche, die dann Bereich aufklappen heißt.)

Zweite Leiste

In der zweiten Leiste oben im XAML-Code-Fenster befinden sich zwei Dropdownlisten mit der Bezeichnung „Fenster“. Wenn Sie die QuickInfo für diese Benutzeroberflächenelemente anzeigen, werden sie näher bezeichnet mit „Element: Fenster“ und „Member: Fenster“.

Die Dropdownlisten mit der Bezeichnung „Fenster“ haben unterschiedliche Funktionen:

• Über die Dropdownliste Element: Fenster links können Sie gleichgeordnete oder übergeordnete Elemente anzeigen oder zu ihnen navigieren.

  Vor allem wird hier jedoch eine Gliederung mit der Tagstruktur des Codes angezeigt. Wenn Sie in der Liste ein Element auswählen, wird im Code-Editor die Codezeile mit dem ausgewählten Element angezeigt.

  

• Über die Dropdownliste Member: Fenster rechts können Sie Attributelemente oder untergeordnete Elemente anzeigen und zu ihnen navigieren.

  Vor allem wird hier jedoch eine Liste mit den Eigenschaften im Code angezeigt. Wenn Sie in der Liste eine Eigenschaft auswählen, wird im Code-Editor die Codezeile mit der ausgewählten Eigenschaft angezeigt.

  

Mittlerer Bereich, Code-Editor

Beim mittleren Bereich handelt es sich um den „Code“-Teil des XAML-Code-Editors. Er enthält die meisten Funktionen des IDE-Code-Editors. Hier werden einige allgemeine IDE-Funktionen beschrieben, die Sie bei der Entwicklung von XAML-Code nutzen können. Zudem werden die für XAML spezifischen Funktionen in der IDE beschrieben.

Schnelle Aktionen

Sie können schnellen Aktionen verwenden, um mit einer einzelnen Aktion Code umzugestalten, zu generieren oder anderweitig zu ändern.

Eine nützliche Aufgabe, die Sie mithilfe von schnellen Aktionen durchführen können ist beispielsweise die Aufgabe Nicht benötigte Using-Direktiven entfernen in C#-Code auf der Registerkarte MainWindow.xaml.cs.

Gehen Sie dazu wie folgt vor:

1. Zeigen Sie auf eine Using-Anweisung, wählen Sie das Glühbirnensymbol aus, und wählen Sie in der Dropdownliste den Eintrag Nicht benötigte Using-Direktiven entfernen aus.

   

2. Geben Sie an, ob Sie alle Vorkommen im Dokument, im Projekt oder in der Projektmappe korrigieren möchten.

3. Rufen Sie das Dialogfeld Vorschau an, und wählen Sie Anwenden aus.

Diese Funktion ist auch in der Menüleiste verfügbar. Wählen Sie hierzu Bearbeiten>IntelliSense>Using-Direktiven entfernen und sortieren aus.

Weitere Informationen zu Einstellungen für Using-Direktiven finden Sie auf der Seite Using-Direktiven sortieren. Weitere Informationen zu IntelliSense finden Sie auf der Seite IntelliSense in Visual Studio. Weitere Informationen zu Möglichkeiten der Verwendung von schnellen Aktionen finden Sie auf der Seite Häufige schnelle Aktionen.

Änderungsnachverfolgung

Durch die Farbe am linken Rand können Sie die Änderungen verfolgen, die Sie an einer Datei vorgenommen haben. Im Folgenden wird beschrieben, wie von Ihnen ausgeführte Aktionen mit Farben gekennzeichnet werden:

• Änderungen, die Sie seit dem Öffnen der Datei vorgenommen, jedoch nicht gespeichert haben, werden durch eine gelbe Leiste am linken Rand gekennzeichnet (auch als „Auswahlrand“ bezeichnet).

  

• Nach dem Speichern der Änderungen (jedoch vor dem Schließen der Datei), wird die Statusleiste grün.

  

Um diese Funktion zu aktivieren und zu deaktivieren, ändern Sie die Option Änderungen nachverfolgen in den Text-Editor-Einstellungen (Tools>Optionen>Text-Editor).

Weitere Informationen zur Änderungsnachverfolgung: Informationen zum Einbeziehen der Wellenlinien, die unter Codezeichenfolgen angezeigt werden, finden Sie im Abschnitt Editor-Funktionen der Seite Features des Visual Studio-Code-Editors.

Kontextmenü (Rechtsklick)

Beim Bearbeiten von Code im XAML-Code-Editor haben Sie per Rechtsklick Zugriff auf ein Kontextmenü mit verschiedenen Funktionen. Die meisten dieser Funktionen sind allgemein in der Visual Studio-IDE verfügbar. Einige werden jedoch nur in einem Code-Editor im Fenster „Entwurf“ angezeigt.

Funktionsweise und Verwendung der einzelnen Funktionen:

• Code anzeigen: Mit dieser Funktion wird das Fenster für den Code in der Programmiersprache meist mit mehreren Registerkarte neben der Standardansicht angezeigt, die das Fenster „Entwurf“ und den XAML-Code-Editor enthält.
• Designer anzeigen: Mit dieser Funktion wird die Standardansicht angezeigt, die das Fenster „Entwurf“ und den XAML-Code-Editor enthält. (Wenn Sie sich bereits in der Standardansicht befinden, hat diese Funktion keine Auswirkungen.)
• Schnellaktionen und Refactorings: Mit dieser Funktion wird Code mit nur einer Aktion umgestaltet, generiert oder anderweitig geändert. Wenn Sie auf den Code zeigen und eine schnelle Aktion oder ein Refactoring vorhanden ist, wird ein Glühbirnensymbol angezeigt.
  Siehe auch: Schnelle Aktionen und Refactoring von Code.
• Umbenennen... : Mit dieser Funktion werden nur Namespaces umbenannt. Wenn Sie keinen Namespace umbenennen, wird eine Fehlermeldung angezeigt, die besagt, dass nur Namespacepräfixe umbenannt werden können.
• Namespaces entfernen und sortieren: Mit dieser Funktion werden nicht verwendete Namespaces entfernt und die verbleibenden Namespaces sortiert.
• Definition einsehen: Mit dieser Funktion wird die Definition eines Typs angezeigt, ohne dass Sie Ihre Position im Editor verlassen müssen.
  Siehe auch: Definition einsehen und Anzeigen und Bearbeiten von Code mithilfe von „Definition einsehen“.
• Gehe zu Definition: Mit dieser Funktion können Sie zur Quelle eines Typs oder Members navigieren und die Ergebnisse in einer neuen Registerkarte öffnen.
  Siehe auch: Gehe zu Definition.
• Umschließen mit... : Damit werden „Umschließen mit“-Codeausschnitte verwendet, die um einen ausgewählten Codeblock eingefügt werden.
  Siehe auch: Erweiterungsausschnitte und umschließende Ausschnitte.
• Codeausschnitt einfügen: Mit dieser Funktion wird an der Cursorposition ein Codeausschnitt eingefügt.
• Ausschneiden: selbsterklärend
• Kopieren: selbsterklärend
• Einfügen: selbsterklärend
• Gliedern: Damit werden Codeabschnitte ein- und ausgeblendet.
  Siehe auch: Gliedern.
• Quellcodeverwaltung: Mit dieser Funktion wird der Verlauf von Codebeiträgen zu einem Open-Source-Repository angezeigt.

Mittlerer Bereich, Scrollleiste

Mit der Scrollleiste können Sie nicht nur durch Ihren Code scrollen. Sie können damit auch einen weiteren Code-Editor-Bereich öffnen. Darüber hinaus können Sie mit der Scrollleiste Code effizienter schreiben, indem Sie Anmerkungen hinzufügen oder verschiedene Anzeigemodi verwenden.

Teilen des Codefensters

Oben in der Scrollleiste des Code-Editors befindet sich die Schaltfläche Teilen. Wenn Sie diese Option auswählen, können Sie einen weiteren Code-Editor-Bereich anzeigen. Das ist nützlich, weil die Bereiche unabhängig voneinander verwendet werden können. Somit können Sie Code an verschiedenen Stellen bearbeiten.

Weitere Informationen zum Teilen eines Editorfensters finden Sie auf der Seite Verwalten von Editorfenstern.

Verwenden von Anmerkungen oder des Zuordnungsmodus

Sie können die Darstellung der Scrollleiste ändern und festlegen, welche Funktionen sie enthält. Viele Benutzer möchten beispielsweise Anmerkungen in der Scrollleiste verwenden. Diese zeigen visuelle Hinweise wie Codeänderungen, Haltepunkte, Textmarken, Fehler und Position der Einfügemarke an.

Andere verwenden gerne den Zuordnungsmodus. In diesem Modus werden Codezeilen als Miniaturansicht in der Scrollleiste angezeigt. Entwickler, die mit einer Datei mit viel Code arbeiten, werden möglicherweise feststellen, dass sie im Zuordnungsmodus Codezeilen effektiver nachverfolgen können als mit der Standardscrollleiste.

Weitere Informationen zum Ändern der Standardeinstellungen der Scrollleiste finden Sie auf der Seite Anpassen der Scrollleiste.

XAML-spezifische Funktionen

Die meisten der folgenden Funktionen sind in der Visual Studio-IDE allgemein verfügbar. Einige weisen jedoch zusätzliche Aspekte auf, die XAML-Entwicklern die Programmierung erleichtern.

XAML-Codeausschnitte

Codeausschnitte sind kleine Blöcke mit wiederverwendbarem Code, die Sie in einer Codedatei per Rechtsklick über den Befehl Ausschnitt einfügen im Kontextmenü oder eine Tastenkombination (STRG+K, STRG+X) einfügen können. Wir haben IntelliSense erweitert, sodass nun die Anzeige von XAML-Ausschnitten unterstützt wird. Dies funktioniert sowohl für integrierte Ausschnitte als auch für alle benutzerdefinierten Ausschnitte, die Sie manuell hinzufügen. #region, Column definition, Row definition, Setter und Tag sind Beispiele für sofort verwendbare XAML-Codeausschnitte.

Weitere Informationen finden Sie auf den Seiten Codeausschnitte und C#-Codeausschnitte.

XAML-Unterstützung für #region

In Visual Studio ist die Unterstützung für #region für XAML-Entwickler in WPF, UWP und Xamarin.Forms verfügbar. In Visual Studio 2019 haben wir weitere Verbesserungen an der Unterstützung für #region-Anweisungen vorgenommen. So werden beispielsweise in Version 16.4 und höher #region-Optionen angezeigt, wenn Sie mit der Eingabe von <! beginnen.

Mithilfe von Regionen können Sie Abschnitte im Code gruppieren, die ein- oder ausgeblendet werden sollen.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Weitere Informationen zu Regionen finden Sie auf der Seite #region (C#-Referenz). Informationen zum Ein- und Ausblenden von Codeabschnitten finden Sie auf der Seite Gliedern.

XAML-Kommentare

Entwickler dokumentieren ihren Code gerne mit Kommentaren. Dabei gibt es folgende Möglichkeiten, dem XAML-Code auf der Registerkarte MainWindow.xaml Kommentare hinzuzufügen:

• Geben Sie vor einem Kommentar <!-- ein, und fügen Sie nach dem Kommentar --> hinzu.

• Geben Sie <! ein, und wählen Sie in der Liste mit Optionen !-- aus.

  

• Wählen Sie zunächst den Code aus, den Sie in einen Kommentar einschließen möchten, und klicken Sie anschließend in der Symbolleiste der IDE auf die Schaltfläche Kommentar. Wenn Sie die Aktion rückgängig machen möchten, klicken Sie auf die Schaltfläche Auskommentierung aufheben.

  

• Wählen Sie zunächst den Code aus, den Sie in einen Kommentar einschließen möchten, und drücken Sie anschließend die Tasten STRG+K, STRG+C. Wenn Sie die Auskommentierung des ausgewählten Codes aufheben möchten, klicken Sie auf STRG+K, STRG+U.

Weitere Informationen zur Verwendung von Kommentaren im C#-Code auf der Registerkarte MainWindow.xaml.cs finden Sie auf der Seite Dokumentationskommentare.

XAML-Fehlerbehebungsmenüs

Glühbirnensymbole, die im XAML-Code angezeigt werden, sind Teil der schnellen Aktionen, die Sie zum Umgestalten, Generieren oder anderweitigen Ändern von Code verwenden können.

Im Folgenden werden einige Beispiele beschrieben, wie Sie beim Schreiben von XAML-Code davon profitieren können:

• Unnötige Namespaces entfernen. Im XAML-Code-Editor werden unnötige Namespaces als abgeblendeter Text angezeigt. Wenn Sie mit dem Cursor auf eine nicht erforderliche using-Direktive zeigen, wird eine Glühbirne angezeigt. Wenn Sie in der Dropdownliste die Option Unnötige Namespaces entfernen auswählen, wird eine Vorschau der Namespaces angezeigt, die Sie entfernen können.

  

• Namespace umbenennen. Diese Funktion ist per Rechtsklick im Kontextmenü verfügbar, nachdem Sie einen Namespace markiert haben. Damit können Sie mehrere Instanzen einer Einstellung gleichzeitig ändern. Diese Funktion ist auch in der Menüleiste über Bearbeiten>Umgestalten>Umbenennen oder über die Tastenkombination STRG+R und erneutes Drücken der Tastenkombination STRG+R verfügbar.

  

  Weitere Informationen finden Sie auf der Seite Refactoring des Umbenennens eines Codesymbols.

Bedingtes XAML für UWP

Bedingtes XAML bietet eine Möglichkeit, die Methode ApiInformation.IsApiContractPresent in XAML-Markup zu verwenden. Sie sind damit in der Lage, im Markup nur dann Eigenschaften festzulegen und Objekte zu initialisieren, wenn die entsprechende API vorhanden ist, ohne CodeBehind zu verwenden.

Weitere Informationen finden Sie auf den Seiten Bedingtes XAML und Hosten von UWP XAML-Steuerelementen in Desktop-Apps (XAML Islands).

XAML-Strukturschnellansicht

Die Funktion „Strukturschnellansicht“ im Code-Editor zeigt Strukturführungslinien an. Hierbei handelt es sich um vertikal gestrichelte Linien, die im Code zusammengehörende öffnende und schließende Tagelemente kennzeichnen. Mithilfe dieser vertikalen Linien können Sie leichter erkennen, wo logische Blöcke anfangen und aufhören.

Weitere Informationen finden Sie auf der Seite Navigieren durch den Code.

IntelliCode für XAML

Beim Hinzufügen eines XAML-Tags zu Code beginnen Sie in der Regel mit einer linken spitzen Klammer <. Beim Eingeben dieser spitzen Klammer wird ein IntelliCode-Menü mit verschiedenen häufig verwendeten XAML-Tags angezeigt. Wählen Sie das gewünschte Tag aus, um es dem Code schnell hinzuzufügen.

Die IntelliCode-Optionen können Sie daran erkennen, dass sie in der Liste ganz oben mit einem Stern angezeigt werden.

Weitere Informationen finden Sie auf der Seite Übersicht über IntelliCode.

Einstellungen

Weitere Informationen zu allen Einstellungen in der Visual Studio-IDE finden Sie auf der Seite Funktionen des Code-Editors.

Optionale XAML-Einstellungen

Mithilfe des Dialogfelds Optionen können Sie die Standardeinstellungen für den XAML-Code-Editor ändern. Zeigen Sie die Einstellungen an, indem Sie auf Extras>Optionen>Text-Editor>XAML klicken.

Hinweis

Sie können auch Tastenkombinationen verwenden, um das Dialogfeld „Optionen“ aufzurufen. Gehen Sie dabei folgendermaßen vor: Drücken Sie STRG+Q, um die IDE zu suchen. Geben Sie Optionen ein, und drücken Sie die EINGABETASTE. Drücken Sie als Nächstes STRG+E, um das Dialogfeld „Optionen“ zu suchen. Geben Sie Text-Editor ein, drücken Sie die EINGABETASTE, geben Sie XAML ein, und drücken Sie die EINGABETASTE.

Weitere Informationen zu Tastenkombinationen finden Sie auf der Seite Tipps zu Tastenkombinationen in Visual Studio.

Allgemeine Text-Editor-Optionen

Im Dialogfeld Optionen für XAML werden die folgenden drei Elemente in allen von der Visual Studio-IDE unterstützten Programmiersprachen gleich verwendet. Weitere Informationen zu diesen Optionen und ihrer Verwendung finden Sie in den verknüpften Informationen in der folgenden Tabelle.

Name	Weitere Informationen
Allgemein	Dialogfeld „Optionen“: Text-Editor > Alle Sprachen
Bildlaufleisten	Optionen, Text-Editor, Alle Sprachen, Scrollleisten
Registerkarten	Optionen, Text-Editor, Alle Sprachen, Registerkarten

XAML-spezifische Text-Editor-Optionen

In der folgenden Tabelle sind die Einstellungen im Dialogfeld Optionen aufgeführt, mit denen Sie Code bei der Entwicklung von XAML-basierten Apps besser bearbeiten können. Weitere Informationen zu diesen Optionen und ihrer Verwendung finden Sie in den verknüpften Informationen.

Name	Weitere Informationen
Formatierung	Optionen, Text-Editor, XAML, Formatierung
Verschiedenes	Optionen, Text-Editor, XAML, Sonstiges

Tipp

Die Einstellung Große Anfangsbuchstaben für Ereignishandler-Methodennamen im Abschnitt Sonstiges ist für XAML-Entwickler besonders nützlich. Diese Einstellung ist standardmäßig deaktiviert, da es eine neue Einstellung ist. Es wird jedoch empfohlen, diese Einstellung zu aktivieren, um die ordnungsgemäße Groß-/Kleinschreibung im Code zu unterstützen.

Nächste Schritte

Weitere Informationen zum Bearbeiten von Code in Echtzeit beim Ausführen der App im Debugmodus finden Sie auf der Seite XAML Hot Reload.

Siehe auch

• Funktionen des Code-Editors
• XAML in UWP-Apps
• XAML in Xamarin.Forms-Apps