Übersicht über den WPF- und Silverlight-Designer

[Dieses Dokument dient lediglich Vorschauzwecken und kann in späteren Versionen geändert werden. Leere Themen sind als Platzhalter enthalten.]

Der WPF- und Silverlight-Designer bietet visuelle Entwurfsunterstützung zum Erstellen von WPF- und Silverlight-Anwendungen. Sie können Benutzeroberflächen für Ihre Anwendungen erstellen, indem Sie Steuerelemente aus der Toolbox ziehen und Eigenschaften im Eigenschaftenfenster festlegen. Sie können XAML-Code auch direkt im XAML-Editor bearbeiten. Die folgende Abbildung zeigt den WPF- und Silverlight-Designer sowie einige der unterstützenden Fenster.

Wenn Sie den WPF- und Silverlight-Designer zum ersten Mal starten, werden das Datenquellenfenster und das Dokumentgliederungsfenster auf der linken Seite von Visual Studio reduziert. Wenn Sie Registerkarten auf der linken Seite anzeigen und anheften, wird die vorherige Ansicht angezeigt. Dies ist eine nützliche Anordnung für die Verwendung der Entwurfsoberfläche.

Dieses Thema enthält folgende Abschnitte:

• Entwurfsansicht

• XAML-Ansicht

• Eigenschaftenfenster

• Datenquellenfenster

• Fenster "Dokumentgliederung"

• Erstellen von interaktiven Benutzeroberflächen mit anspruchsvollen Grafiken

• Zusammenarbeit mit Expression Blend

Entwurfsansicht

Die Entwurfsansicht stellt eine visuelle Entwurfsoberfläche für das Erstellen von WPF- und Silverlight-Steuerelementen und WPF-und Silverlight-Anwendungen bereit. In ihr wird ein Rendering des aktuell in der XAML-Ansicht angezeigten XAML-Codes angezeigt. Wenn Sie Steuerelemente auf der Entwurfsoberfläche ändern, wird die XAML-Ansicht aktualisiert, und Ihre Änderungen werden angezeigt. Die Entwurfsansicht bietet zahlreiche Features zum Anordnen von Steuerelementen im Fenster oder in der Seite der WPF-Anwendung. Einige der Features der Entwurfsansicht werden in der folgenden Abbildung gezeigt.

Zoom

Mit dem Zoomsteuerelement können Sie die Größe der Entwurfsoberfläche festlegen. Es stehen Zoomstufen von 10 % bis zu 20 x zur Verfügung. Die Zoomeinstellung wird in der SUO-Datei der Projektmappe gespeichert.

Schwenken

Wenn die Entwurfsoberfläche vergrößert wird und horizontale oder vertikale Bildlaufleisten angezeigt werden, können Sie schwenken, um Teile der Entwurfsoberfläche anzuzeigen, die außerhalb des Bildschirms liegen. Halten Sie die LEERTASTE gedrückt, und ziehen Sie dann die Entwurfsoberfläche, um zu schwenken.

An Ansicht anpassen

Mit der Schaltfläche zum Anpassen an die Ansicht können Sie die Größe der Entwurfsoberfläche so festlegen, dass sie in den verfügbaren Bildschirm in der Entwurfsansicht passt. Dies ist nützlich, wenn Sie stark vergrößert oder verkleinert haben.

Rasterschienen

Rasterschienen werden verwendet, um Zeilen und Spalten in einem Grid-Steuerelement zu verwalten. Sie können Zeilen und Spalten erstellen und löschen, und Sie können jeweils ihre relative Breite und Höhe anpassen. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

Rasterlinien

Rasterlinien werden verwendet, um die Höhe und Breite der Zeilen und Spalten in einem Grid zu steuern. Sie können eine neue Zeile oder Spalte hinzufügen, indem Sie in den Schienen über dem und links von dem Grid klicken. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

Rasterlinienindikatoren

Ein Rasterlinienindikator wird als Dreieck in der Rasterschiene angezeigt. Wenn Sie einen Rasterlinienindikator oder die Rasterlinie selbst ziehen, wird die Höhe oder Breite der Zeilen oder Spalten daneben aktualisiert, wenn Sie die Maus bewegen. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster.

Verschiebepunkt

Ein Verschiebepunkt wird oben links in einem ausgewählten Bereichssteuerelement angezeigt und ermöglicht das Verschieben des Bereichs. Klicken Sie auf den Verschiebepunkt, und ziehen Sie das Steuerelement an die gewünschte Position auf der Entwurfsoberfläche. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.

Ziehpunkte zur Größenänderung

Ziehpunkte zur Größenänderung werden auf ausgewählten Steuerelementen angezeigt und ermöglichen das Ändern der Größe des Steuerelements. Wenn Sie die Größe eines Steuerelements ändern, werden normalerweise die Werte für die Höhe und Breite angezeigt, damit Sie die Größe exakt festlegen können.

Randlinien

Der Begriff "Rand" bezeichnet den fest definierten Abstand zwischen der Kante eines Steuerelements und der Kante seines Containers. Legen Sie die Ränder eines Steuerelements fest, indem Sie auf die Randlinien des Steuerelements klicken. Weitere Informationen finden Sie unter Gewusst wie: Festlegen von Rändern für ein Steuerelement im WPF-Designer.

Randstubs

Ein Randstub wird auf einem ausgewählten Steuerelement angezeigt, wenn der Rand auf 0 festgelegt ist. Klicken Sie auf den Randstub, um eine Randentfernung auf den entsprechenden Rand des Containers festzulegen. Weitere Informationen finden Sie unter Gewusst wie: Festlegen von Rändern für ein Steuerelement im WPF-Designer.

Ausrichtungslinien

Mit Ausrichtungslinien können Sie Steuerelemente relativ zu anderen Steuerelementen ausrichten. Wenn Ausrichtungslinien aktiviert sind, werden beim Ziehen eines Steuerelements relativ zu anderen Steuerelementen Ausrichtungslinien angezeigt, wenn die Ränder und der Text mancher Steuerelemente horizontal oder vertikal ausgerichtet werden. Weitere Informationen finden Sie unter Gewusst wie: Ausrichten an Textbasislinien und Rändern.

Informationsleiste

Die Informationsleiste wird am oberen Rand der Entwurfsansicht angezeigt und zeigt Informationen zu Problemen beim Rendern in der Entwurfsansicht an. In einigen Fällen können Sie auf die Informationsleiste klicken, um weitere Informationen zum Problem abzurufen. Die folgende Abbildung zeigt eine erweiterte Ansicht der Informationsleiste an.

Ziehleiste

Wenn Sie den Mauszeiger über eine Rasterschiene für ein Grid-Steuerelement bewegen, das über zwei oder mehr Spalten oder Zeilen verfügt, wird die Ziehleiste außerhalb der Schiene angezeigt. Mit der Ziehleiste können Sie Optionen für feste Größenanpassungen, Größenanpassungen mit Sternvariablen und automatische Größenanpassungen für Grid-Zeilen und -Spalten festlegen. Weitere Informationen finden Sie unter Gewusst wie: Festlegen der Größe von Zeilen und Spalten in einem Grid-Steuerelement.

Stammgrößenanpassungstag

Das Stammgrößenanpassungstag wird unten rechts im Fenster in der Entwurfsansicht angezeigt, wenn das Fenster ausgewählt ist. Mit dem Stammgrößenanpassungstag können Sie die Stammgröße des Fensters zwischen automatischer und fester Größe umschalten. Weitere Informationen finden Sie unter Entwurfszeitattribute.

XAML-Ansicht

Die Extensible Application Markup Language (XAML) stellt ein deklaratives, auf XML basierendes Vokabular bereit, mit dem die Benutzeroberfläche einer Anwendung festgelegt werden kann. Der WPF- und Silverlight-Designer stellt eine XAML-Ansicht und eine synchronisierte Entwurfsansicht des gerenderten XAML-Markups der Anwendung bereit. Die XAML-Ansicht enthält IntelliSense und automatische Formatierung, Syntaxhervorhebung und Tagnavigation. Einige der XAML-Funktionen werden in der folgenden Abbildung gezeigt.

Leiste für geteilte Ansicht

Mit der Leiste für die geteilte Ansicht können Sie die relative Größe der Entwurfsansicht und der XAML-Ansicht steuern. Sie können auch Ansichten wechseln, angeben, ob die Ansicht horizontal oder vertikal geteilt wird, und jede der Ansichten reduzieren. Weitere Informationen finden Sie unter Geteilte Ansicht: Gleichzeitiges Anzeigen der WPF-Entwurfsoberfläche und von XAML-Markup.

Markuperweiterung mit IntelliSense

Zusätzlich zur Standardsprache IntelliSense unterstützt die XAML-Ansicht IntelliSense für Markuperweiterungen. Wenn Sie in der XAML-Ansicht eine geschweifte Klammer links ({) eingeben, zeigt IntelliSense die verfügbaren Markuperweiterungen an. Wenn Sie eine Markuperweiterung aus der Liste auswählen, zeigt IntelliSense die verfügbaren Attribute an. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer.

Tag-Navigator

Der Tag-Navigator wird unterhalb der XAML-Ansicht angezeigt. Damit können Sie zu jedem übergeordneten Tag des aktuell in der XAML-Ansicht ausgewählten Tags wechseln. Wenn Sie im Tag-Navigator den Mauszeiger über ein Tag bewegen, wird für dieses Element eine Vorschau als Miniaturansicht angezeigt. Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer.

Zoom

Mit dem Zoomsteuerelement können Sie die Größe der XAML-Ansicht anpassen. Es stehen Zoomstufen von 20 % bis zu 400 % zur Verfügung.

Eigenschaftenfenster

Mit dem Eigenschaftenfenster können Sie Eigenschaftswerte für Steuerelemente in der Entwurfsansicht festlegen. Ein Beispiel für das Eigenschaftenfenster wird in der folgenden Abbildung gezeigt.

Oben im Eigenschaftenfenster sind verschiedene Optionen verfügbar. Um den Namen des gerade ausgewählten Steuerelements zu ändern, positionieren Sie den Cursor im Feld Name, und geben Sie den Namen ein. Oben rechts wird eine Vorschau des aktuell ausgewählten Steuerelements als Miniaturansicht angezeigt. Um die Eigenschaften nach Kategorie oder alphabetisch aufzuführen, klicken Sie auf die Schaltfläche Nach Kategorien oder auf die Schaltfläche Alphabetisch. Um die Eigenschaften nach Quelle zu sortieren, klicken Sie auf die Schaltfläche Nach Eigenschaftsquelle sortieren. Um die Liste der Ereignisse für ein Steuerelement anzuzeigen, klicken Sie auf die Schaltfläche Ereignisse. Um nach einer Eigenschaft zu suchen, beginnen Sie mit der Eingabe des Namens der Eigenschaft im Feld Suche. Das Eigenschaftenfenster zeigt die mit Ihrer Suche übereinstimmenden Eigenschaften an, während Sie den Namen eingeben.

In der ersten Spalte rechts neben dem Eigenschaftennamen befindet sich ein Eigenschaftenmarker. Der Eigenschaftenmarker gibt an, ob eine Datenbindung oder eine Ressource auf die Eigenschaft angewendet wurde. Wenn Sie auf den Eigenschaftenmarker klicken, können Sie den Datenbindungs-Generator oder die Ressourcenauswahl öffnen oder zur Definition einer Ressource navigieren. Die folgende Abbildung zeigt die Optionen, die verfügbar sind, wenn Sie auf den Eigenschaftenmarker eines Stils klicken.

Datenbindungs-Generator

Mit dem Datenbindungs-Generator können Sie Datenbindungen erstellen, ohne XAML-Code einzugeben. Sie können Bindungen mit Ressourcen, Datenkontexten und Elementeigenschaften erstellen. Sie können auch Wertkonverter anwenden. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen einer Datenbindung mit dem WPF-Designer und Exemplarische Vorgehensweise: Binden von Daten im Designer mit einer DesignInstance.

Rand-Editor

Der Rand-Editor ermöglicht Ihnen das Anzeigen jeder Randeinstellung und ihrer Auswirkung auf die Platzierung des Steuerelements. Sie können mit dem Rand-Editor auch Ränder für ein Steuerelement ändern oder die Ränder für mehrere Steuerelemente bearbeiten. Weitere Informationen finden Sie unter Gewusst wie: Festlegen von Rändern für ein Steuerelement im WPF-Designer.

Ressourcenauswahl

Mit der Ressourcenauswahl können Sie im Eigenschaftenfenster Ressourcen suchen und sie Eigenschaften zuweisen. Sie können auch hartcodierte Werte in Ressourcen extrahieren, um die Wiederverwendung höher zu stufen. Weitere Informationen finden Sie unter Verwenden von Ressourcen.

Pinsel-Editor

Mit dem Pinsel-Editor können Sie viele verschiedene Arten von Pinseln im Eigenschaftenfenster erstellen. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines Pinsels mit dem Pinsel-Editor.

Datenquellenfenster

Sie können Daten mit dem Datenquellenfenster schnell in die WPF-Anwendung integrieren. Wenn Sie eine Datenverbindung hergestellt haben, können Sie Datentabellen auf die Entwurfsoberfläche ziehen, und Geschäftslogik und Datenbindungen werden automatisch generiert. Sie können eine Bindung an ein Objekt, ein ADO.NET-Dataset, ein Entity Data Model oder einen Dienst herstellen. Weitere Informationen finden Sie unter Binden von WPF-Steuerelementen an Daten in Visual Studio.

Fenster "Dokumentgliederung"

Das Fenster Dokumentgliederung stellt eine hierarchische Ansicht eines XAML-Dokuments bereit. Mit dem Fenster Dokumentgliederung können Sie eine Vorschau für XAML-Elemente anzeigen bzw. XAML-Elemente auswählen oder löschen. Ein Beispiel für das Eigenschaftenfenster wird in der folgenden Abbildung gezeigt.

Weitere Informationen finden Sie unter Navigieren in der Elementhierarchie eines WPF-Dokuments.

Erstellen von interaktiven Benutzeroberflächen mit anspruchsvollen Grafiken

In WPF stellen die Window-Klasse und die Page-Klasse visuelle Oberflächen dar, auf denen Informationen für den Benutzer angezeigt werden. In der Regel erstellen Sie WPF-Anwendungen, indem Sie Steuerelemente in Window hinzufügen und Antworten auf Benutzeraktionen (beispielsweise Maus- und Tastatureingaben) entwickeln. Ein Steuerelement ist ein diskretes Benutzeroberflächenelement (UI-Element), das Daten anzeigt oder Dateneingaben akzeptiert.

Wenn ein Benutzer Aktionen im Window oder in enthaltenen Steuerelementen ausführt, wird ein Ereignis generiert. Die Anwendung reagiert auf diese Ereignisse und verarbeitet sie, wenn sie auftreten. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines einfachen Ereignishandlers.

WPF enthält eine Vielzahl von Steuerelementen, die Sie zu einem Fenster hinzufügen können: Steuerelemente zur Anzeige von Textfeldern, Schaltflächen, Dropdownlisten, Optionsfeldern und sogar Webseiten. Eine Liste aller Steuerelemente, die in einem Fenster verwendet werden können, finden Sie unter Steuerelementbibliothek. Wenn ein vorhandenes Steuerelement Ihre Anforderungen nicht erfüllt, unterstützt WPF auch die Erstellung eigener benutzerdefinierter Steuerelemente mithilfe der UserControl-Klasse und der Control-Klasse.

Mit Drag & Drop können Sie im WPF- und Silverlight-Designer ganz einfach WPF-Anwendungen erstellen. Wählen Sie Steuerelemente einfach mit dem Mauszeiger aus, und fügen Sie sie an der gewünschten Stelle im Fenster ein. Der Designer stellt Tools wie Ausrichtungslinien und kontinuierlichen Zoom bereit, um das Anordnen von Steuerelementen zu erleichtern.

Wenn Sie eigene Benutzeroberflächenelemente erstellen müssen, enthalten der System.Windows.Media-Namespace und der System.Windows.Shapes-Namespace eine Vielzahl von Klassen, um Linien, Kreise und andere Formen direkt in einem Fenster zu zeichnen.

Hilfe beim Erstellen von Fenstern und Steuerelementen

Ausführliche Informationen zur Verwendung dieser Features finden Sie in den folgenden Hilfethemen.

Zusammenarbeit mit Expression Blend

In WPF werden Inhalt und Darstellung strikt getrennt, was es Softwareentwicklern und Grafikdesignern ermöglicht, bei der Darstellung und dem Verhalten einer Anwendung zusammenzuarbeiten. Der WPF- und Silverlight-Designer ist für Softwareentwickler und Expression Blend ist für Grafikdesigner optimiert. Weitere Informationen finden Sie unter Integration mit Expression Blend.

Siehe auch

Konzepte

Der WPF-Designer für Windows Forms-Entwickler

Integration mit Expression Blend

Weitere Ressourcen

WPF-Designer

Steuerelementbibliothek

XAML in WPF