Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer

  • Artikel

Der 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

Tipp

Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

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

  • Visual Studio 2010.

Erstellen des Projekts

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

So erstellen Sie das Projekt

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

  1. Öffnen Sie im WPF-Designer die Datei MainWindow.xaml.

  2. Fügen Sie in der XAML-Ansicht nach dem Starttag für MainWindow 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 das folgende Markup.

    <Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>

    Elemente, Eigenschaften und Eigenschaftswerte haben jeweils eine eigene Farbe.

    Syntaxhervorhebung in der XAML-Ansicht

    Die Markuperweiterung ist an die Background-Eigenschaft gebunden. Ebenfalls der Rasterhintergrund in Aktualisierungen der Entwurfsansicht.

    Hintergrundressource in der Entwurfsansicht

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

Tag-Navigation

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

  1. Klicken Sie in der XAML-Ansicht auf das Starttag für das <Grid>-Element.

  2. Suchen Sie den Tag-Navigator im unteren Bereich des WPF-Designer. Es wird Grid (grid1) Window/Grid angezeigt.

  3. Bewegen Sie im Tag-Navigator den Mauszeiger über das Element Window.

    Eine gerenderte Miniaturansicht von MainWindow wird angezeigt.

    Tag-Navigator mit Miniaturansicht in der XAML-Ansicht

  4. Klicken Sie im Tag-Navigator auf den Link Window.

    Das Starttag für MainWindow wird in der XAML-Ansicht hervorgehoben.

  5. 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.

  6. Klicken Sie im Tag-Navigator auf den Pfeil von "Untergeordnetes Element auswählen" rechts neben Ressourcen.

    Das untergeordnete Element wird in einem Popup angezeigt.

  7. Klicken Sie auf LinearGradientBrush (backgroundBrush1).

    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

  1. Führen Sie in der XAML-Ansicht einen Bildlauf zum <Window.Resources>-Element aus.

  2. Klicken Sie links neben dem Starttag auf die Schaltfläche zum Reduzieren.

    Das <Window.Resources>-Element wird zu einer einzelnen Zeile reduziert.

    Reduzierte Gliederung in der XAML-Ansicht

  3. 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

  1. Geben Sie im grid1-Element < Gr ein.

    Die IntelliSense-Liste wird mit der ausgewählten Grid-Klasse angezeigt.

    XAML IntelliSense

  2. Drücken Sie TAB, um das Starttag zu vervollständigen.

  3. Geben Sie .c ein. (Stellen Sie sicher, dass der Punkt enthalten ist.)

    Die IntelliSense-Liste wird angezeigt. Dabei ist die erste Eigenschaft, die mit dem Buchstaben C beginnt, ausgewählt.

  4. Verwenden Sie die NACH-UNTEN-Taste, um einen Bildlauf zur ColumnDefinitions-Eigenschaft auszuführen.

  5. 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

  1. Klicken Sie in der XAML-Ansicht in das <LinearGradientBrush>-Starttag.

  2. Drücken Sie STRG+].

    Der Cursor wird an das Ende des Starttags verschoben.

  3. Drücken Sie erneut STRG+].

    Der Cursor wird an den Anfang des Endtags verschoben.

  4. Löschen Sie die schließende spitze Klammer '>' aus dem Endtag des <LinearGradientBrush>-Elements.

  5. Geben Sie '>' ein, um das Endtag zu vervollständigen.

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

    Zuordnung von Klammern in der XAML-Ansicht

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 finden Sie unter Gewusst wie: Ändern von XAML-Ansichtseinstellungen.

So verwenden Sie die Automatische Formatierung

  1. Wählen Sie in der XAML-Ansicht die vier <GradientStop>-Elemente aus.

  2. Drücken Sie UMSCHALT+TAB.

    Die vier Elementdeklarationen werden nach links verschoben.

  3. Drücken Sie STRG+KD.

    Die vier Elementdeklarationen werden eingerückt. Möglicherweise kommt es zu weiteren Änderungen im XAML-Code.

  4. Klicken Sie im ersten <GradientStop>-Tag in den Bereich vor dem Farbattribut.

  5. Drücken Sie die EINGABETASTE, um eine neue Zeile zu beginnen.

  6. Klicken Sie in den Bereich vor dem Offset-Attribut, und drücken Sie die EINGABETASTE, um eine neue Zeile zu beginnen.

  7. Drücken Sie STRG+KD.

    Die Attribute verbleiben in den neuen Zeilen.

  8. Fügen Sie vor dem Farbattribut vier Leerzeichen ein, und drücken Sie STRG+KD.

    Das Farbattribut ändert die Position nicht.

Siehe auch

Aufgaben

Gewusst wie: Importieren eines Namespace in XAML

Gewusst wie: Ändern von XAML-Ansichtseinstellungen

Konzepte

Navigieren in der Elementhierarchie eines WPF-Dokuments

Weitere Ressourcen

WPF-Designer

Exemplarische Vorgehensweisen zu XAML und Code