Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer

Artikel
09/03/2008

Aktualisiert: November 2007

Der Windows Presentation Foundation (WPF)-Designer für Visual Studio stellt einen XAML-Editor mit vielen Features zur Verfügung, die auch in Visual Studio-Editoren für andere Sprachen vorhanden sind. In diesem Thema wird gezeigt, wie Features wie z. B. IntelliSense und Gliederung verwendet werden.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

Erstellen eines WPF-Projekts
Erstellen von Ressourcen
Anzeigen von Syntaxhervorhebung
Verwenden der Tag-Navigation
Verwenden der Gliederung
Verwenden von IntelliSense
Verwenden der Zuordnung von Klammern
Verwenden der Autoformatierung

Hinweis:
Je nach aktivierten Einstellungen oder verwendeten Version können sich die angezeigten Dialogfelder und Menübefehle von den in der Hilfe beschriebenen unterscheiden. Klicken Sie zum Ändern der Einstellungen im Menü Extras auf Einstellungen importieren und exportieren. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

Visual Studio 2008.

Erstellen des Projekts

Der erste Schritt besteht darin, das Projekt für die Hostanwendung zu erstellen.

So erstellen Sie das Projekt

Erstellen Sie ein neues WPF-Anwendungsprojekt in Visual Basic oder Visual C# mit dem Namen XamlEditing. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts.

In WPF-Designer wird die Datei Window1.xaml geöffnet.

Erstellen von Ressourcen

Sie verwenden häufig Ressourcen in den WPF-Anwendungen. Der WPF-Designer stellt im Fenster Dokumentgliederung die reduzierbare Gliederung für Ressourcenabschnitte und die Navigation zu Ressourcenabschnitten zur Verfügung.

So erstellen Sie Ressourcen

Öffnen Sie im WPF-Designer die Datei Window1.xaml.

Fügen Sie in der XAML-Ansicht nach dem Starttag für Window1 den folgenden XAML-Code ein.

Dieser XAML-Code erstellt einen Pinsel mit linearem Farbverlauf, der über ein Farbspektrum verfügt.

<Window.Resources>
    <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
</Window.Resources>

Syntaxhervorhebung

Mithilfe des WPF-Designer ist der XAML-Code durch das Einfärben des Texts je nach Syntax besser lesbar.

So zeigen Sie die Syntaxhervorhebung an

Ersetzen Sie in der XAML-Ansicht das standardmäßige <Grid>-Element durch den folgenden Text.
```
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>
```
Elemente, Eigenschaften und Eigenschaftenwerte haben jeweils eine eigene Farbe. Zusätzlich wird die Markuperweiterung an die Background-Eigenschaft gebunden. Ebenfalls der Rasterhintergrund in Aktualisierungen der Entwurfsansicht.

Sie können die Farben für XAML-Elemente und -Attribute ändern. Weitere Informationen hierzu finden Sie unter Gewusst wie: Ändern von XAML-Ansichtseinstellungen.

Sie können mithilfe des Tag-Navigators von Tag zu Tag wechseln. Sie können auch mithilfe der Dokumentgliederungsansicht navigieren. Weitere Informationen finden Sie unter Navigieren in der Elementhierarchie eines WPF-Dokuments.

So verwenden Sie den Tag-Navigator

Klicken Sie in der XAML-Ansicht auf das Starttag für das <Grid>-Element.
Suchen Sie den Tag-Navigator im unteren Bereich des WPF-Designer. Es wird Grid (grid1) Window/Grid angezeigt.
Bewegen Sie im Tag-Navigator den Mauszeiger über das Element Window.

Eine gerenderte Miniaturansicht von Window1 wird angezeigt.
Klicken Sie im Tag-Navigator auf den Link Window.

Das Starttag für Window1 wird in der XAML-Ansicht hervorgehoben.
Klicken Sie in der XAML-Ansicht auf das <Window.Resources>-Tag.

Der Tag-Navigator zeigt die XAML-Strukturhierarchie für das <Window.Resources>-Element an.
Klicken Sie im Tag-Navigator auf den Nächste Auswahl-Pfeil nach Links von Ressourcen.

Das <LinearGradientBrush>-Element wird in der XAML-Ansicht ausgewählt.

Gliederung

Der WPF-Designer unterstützt die reduzierbare Gliederung vollständig.

So verwenden Sie die Gliederung

Führen Sie in der XAML-Ansicht einen Bildlauf zum <Window.Resources>-Element aus.
Klicken Sie links neben dem Starttag auf die Schaltfläche zum Reduzieren.

Das <Window.Resources>-Element wird zu einer einzelnen Zeile reduziert.
Klicken Sie links neben dem Starttag auf die Schaltfläche zum Erweitern.

Das <Window.Resources>-Element wird auf den ursprünglichen Zustand erweitert.

IntelliSense

Der WPF-Designer unterstützt IntelliSense vollständig.

So verwenden Sie IntelliSense

Geben Sie im grid1-Element < Gr ein.

Die IntelliSense-Liste wird mit der ausgewählten Grid-Klasse angezeigt.
Drücken Sie TAB, um das Starttag zu vervollständigen.
Geben Sie .c ein. (Stellen Sie sicher, dass der Punkt enthalten ist.)

Die IntelliSense-Liste wird mit der ausgewählten Children-Eigenschaft angezeigt.
Verwenden Sie die NACH-UNTEN-Taste, um einen Bildlauf zur ColumnDefinitions-Eigenschaft auszuführen.
Drücken Sie TAB, um das Tag zu vervollständigen.

Weitere Informationen zum Verwenden von IntelliSense für benutzerdefinierte Typen finden Sie unter Gewusst wie: Importieren eines Namespace in XAML.

Zuordnen von Klammern

Sie können mithilfe des Features zum Zuordnen von Klammern innerhalb eines Elements navigieren.

So verwenden Sie die Zuordnung von Klammern

Klicken Sie in der XAML-Ansicht in das <LinearGradientBrush>-Starttag.
Drücken Sie STRG+].

Der Cursor wird an das Ende des Starttags verschoben.
Drücken Sie erneut STRG+].

Der Cursor wird an den Anfang des Endtags verschoben.
Löschen Sie die schließende spitze Klammer '>' aus dem Endtag des <LinearGradientBrush>-Elements. Geben Sie '>' ein, um das Endtag zu vervollständigen.

Die XAML-Ansicht hebt die Start- und Endtags hervor.

Automatische Formatierung

Sie können den XAML-Code formatieren, indem Sie STRG+KD drücken, und Sie können die Einstellungen für die Automatische Formatierung angeben. Weitere Informationen hierzu finden Sie unter Gewusst wie: Ändern von XAML-Ansichtseinstellungen.

So verwenden Sie die Automatische Formatierung

Wählen Sie in der XAML-Ansicht die vier <GradientStop>-Elemente aus.
Drücken Sie UMSCHALT+TAB.

Die vier Elementdeklarationen werden nach links verschoben.
Drücken Sie STRG+KD.

Die vier Elementdeklarationen werden eingerückt. Möglicherweise kommt es zu weiteren Änderungen im XAML-Code.
Klicken Sie im ersten <GradientStop>-Tag in den Bereich vor dem Farbattribut. Drücken Sie die EINGABETASTE, um eine neue Zeile zu beginnen.
Klicken Sie in den Bereich vor dem Offset-Attribut, und drücken Sie die EINGABETASTE, um eine neue Zeile zu beginnen.
Drücken Sie STRG+KD.

Die Attribute verbleiben in den neuen Zeilen.
Fügen Sie vor dem Farbattribut vier Leerzeichen ein, und drücken Sie STRG+KD.

Das Farbattribut ändert die Position nicht.

Siehe auch

Share via