Übersicht über den WPF-Designer

Aktualisiert: November 2007

In diesem Thema wird der Windows Presentation Foundation (WPF)-Designer für Visual Studio beschrieben. WPF ist die Benutzeroberflächentechnologie für Windows Vista und unterscheidet sich deutlich von älteren Ansichtstechnologien, wie z. B. Windows Forms.

Der WPF-Designer stellt eine ähnliche visuelle Entwurfszeitunterstützung wie der Windows Forms-Designer bereit. 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.

Fenster im WPF-Designer

Der WPF-Designer besitzt mehrere Fenster zum Anzeigen und Bearbeiten von XAML-Dokumenten. In der folgenden Abbildung werden einige der Fenster im WPF-Designer gezeigt.

Entwurfsansicht

Die Entwurfsansicht stellt eine visuelle Entwurfsoberfläche für das Erstellen von WPF-Steuerelementen und WPF-Anwendungen bereit. In ihr wird eine gerenderte Darstellung des aktuell in der XAML-Ansicht angezeigten XAML-Codes angezeigt.

Sie können Steuerelemente auf der Entwurfsoberfläche platzieren, indem Sie sie aus der Toolbox ziehen, und Sie können die Steuerelemente dann durch Ziehen positionieren. Verschiedene Entwurfshilfsmittel unterstützen Sie dabei, Steuerelemente genau am gewünschten Ort zu platzieren. Wenn Sie Steuerelemente auf der Entwurfsoberfläche ändern, wird die XAML-Ansicht aktualisiert, und Ihre Änderungen werden angezeigt. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Steuerelementen zu einem WPF-Fenster und unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.

XAML-Ansicht

Die XAML-Ansicht stellt umfassende Funktionen zum Bearbeiten von XAML-Dokumenten bereit, darunter IntelliSense, Autoformatierung, Syntaxhervorhebung und Tag-Navigation. Wenn Sie XAML-Code bearbeiten, wird die Entwurfsansicht aktualisiert, und die Änderungen werden angezeigt.

Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer.

Eigenschaftenfenster

Mit dem Eigenschaftenfenster können Sie Eigenschaftenwerte für Steuerelemente in der Entwurfsansicht festlegen.

Sie öffnen das Eigenschaftenfenster, indem Sie das Menü Ansicht öffnen und Eigenschaftenfenster auswählen oder indem Sie STRG+W, P oder F4 drücken. Sie können in der Entwurfsansicht auch mit der rechten Maustaste auf ein Steuerelement klicken und im Kontextmenü die Option Eigenschaften auswählen. Im Eigenschaftenfenster wird eine Vorschau des aktuell ausgewählten Steuerelements als Miniaturansicht angezeigt.

Um nach einer Eigenschaft zu suchen, geben Sie den Namen der Eigenschaft in das Feld Suche oben im Eigenschaftenfenster ein. Das Eigenschaftenfenster zeigt die mit Ihrer Suche übereinstimmenden Eigenschaften an, während Sie den Namen eingeben. Klicken Sie auf Löschen, um die Suche zu entfernen und alle Eigenschaften des ausgewählten Objekts anzuzeigen.

Ab Visual Studio 2008 Service Pack 1 können Sie Eigenschaften alphabetisch oder nach Kategorie sortieren. Um Eigenschaften alphabetisch zu sortieren, klicken Sie oben im Eigenschaftenfenster auf die Schaltfläche Alphabetisch. Um Eigenschaften nach Kategorie zu sortieren, klicken Sie oben im Eigenschaftenfenster auf die Schaltfläche Nach Kategorien.

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. Öffnen Sie das Fenster Dokumentgliederung, indem Sie das Menü Ansicht öffnen, auf Weitere Fenster zeigen und Dokumentgliederung auswählen. Sie können auch die Tastenkombination STRG+ALT+T drücken. Weitere Informationen finden Sie unter Navigieren in der Elementhierarchie eines WPF-Dokuments.

Toolbox

Die Toolbox enthält die Steuerelemente, die Sie auf die Entwurfsoberfläche ziehen können. Sie öffnen das Fenster Toolbox, indem Sie das Menü Ansicht öffnen und Toolbox auswählen oder indem Sie STRG+ALT+X drücken.

Features der Entwurfsansicht

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.

Zoomsteuerelement

Verwenden Sie das Zoomsteuerelement, um die Größe der Entwurfsoberfläche festzulegen. Es stehen Zoomstufen von 10 % bis zu 20 x zur Verfügung.

An Ansicht anpassen

Verwenden Sie die Schaltfläche zum Anpassen an die Ansicht, um die Entwurfsoberfläche so zu skalieren, dass sie in den verfügbaren Bildschirm in der Entwurfsansicht passt. Dies ist nützlich, wenn Sie stark vergrößert oder verkleinert haben.

Rasterschienen

Verwenden Sie die Rasterschienen, 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

Verwenden Sie Rasterlinien, 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. 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 werden auf ausgewählten Steuerelementen angezeigt. Klicken Sie auf den Ziehpunkt und ziehen Sie ihn, um die Größe der Auswahl zu ändern. 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 (null) festgelegt ist. Klicken Sie auf den Randstub, um einen Randabstand zum entsprechenden Rand des Containers festzulegen. Weitere Informationen finden Sie unter Gewusst wie: Festlegen von Rändern für ein Steuerelement im WPF-Designer.

Ausrichtungslinien

Verwenden Sie Ausrichtungslinien, um Steuerelemente relativ zu anderen Steuerelementen auszurichten. 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.

Features der 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-Designer stellt eine einzigartige geteilte Ansicht bereit, die eine XAML-Ansicht und eine synchronisierte Entwurfsansicht des gerenderten XAML-Markups der Anwendung enthält. Einige der XAML-Features der Entwurfsansicht werden in der folgenden Abbildung gezeigt.

Weitere Informationen finden Sie unter Geteilte Ansicht: Gleichzeitiges Anzeigen der WPF-Entwurfsoberfläche und von XAML-Markup.

Leiste für geteilte Ansicht

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

Tag-Navigator

Mit dem Tag-Navigator 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 einem Tag bewegen, wird für dieses Element eine Vorschau als Miniaturansicht angezeigt. Exemplarische Vorgehensweise: Bearbeiten von XAML im WPF-Designer.

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-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 Windows Presentation Foundation (WPF)-Designer für Visual Studio ist für Softwareentwickler und Expression Blend für Grafikdesigner optimiert. Weitere Informationen finden Sie unter Integration mit Expression Blend.

Bereitstellen von Anwendungen auf Clientcomputern

Nach dem Erstellen müssen Sie die Anwendung an Ihre Benutzer senden, damit diese die Anwendung auf dem eigenen Clientcomputer installieren und ausführen können. Mithilfe der ClickOnce-Technologie können Sie Anwendungen in Visual Studio mit wenigen Mausklicks bereitstellen und Benutzern eine URL verfügbar machen, die auf die Anwendung im Internet oder die Dateifreigabe verweist. ClickOnce verwaltet alle Elemente und Abhängigkeiten in der Anwendung und stellt sicher, dass diese auf dem Clientcomputer ordnungsgemäß installiert wird.

ClickOnce-Anwendungen können so konfiguriert werden, dass sie nur ausgeführt werden, wenn der Benutzer mit dem Netzwerk verbunden ist, oder dass sie sowohl online als auch offline ausgeführt werden. Wenn Sie angeben, dass eine Anwendung den Offlinebetrieb unterstützen soll, fügt ClickOnce im Startmenü des Benutzers einen Link zur Anwendung hinzu. Der Benutzer kann die Anwendung dann auch ohne die URL öffnen.

Wenn Sie die Anwendung aktualisieren, veröffentlichen Sie ein neues Bereitstellungsmanifest und eine neue Kopie der Anwendung auf dem Webserver oder der Dateifreigabe. ClickOnce erkennt, dass ein Update verfügbar ist und aktualisiert die Installation des Benutzers. Zur Aktualisierung alter Assemblys ist keine benutzerdefinierte Programmierung erforderlich. Weitere Informationen finden Sie unter Bereitstellung von WPF-Anwendungen

Bereitstellen von ClickOnce-Anwendungen

Eine umfassende Einführung in ClickOnce finden Sie unter Übersicht über die ClickOnce-Bereitstellung. Ausführliche Informationen zur Verwendung dieser Features finden Sie in den folgenden Hilfethemen.

Siehe auch

Konzepte

Der WPF-Designer für Windows Forms-Entwickler

Übersicht über die ClickOnce-Bereitstellung

Übersicht über Anwendungseinstellungen

Integration mit Expression Blend

Weitere Ressourcen

WPF-Designer

Steuerelementbibliothek

XAML