Freigeben über


Entwerfen von XAML in Visual Studio und Blend für Visual Studio

Visual Studio und Blend für Visual Studio bieten beide visuelle Tools zum Erstellen ansprechender Benutzeroberflächen und rich Media-Oberflächen mit XAML für eine Vielzahl von App-Typen. Beide integrierten Entwicklungsumgebungen (IDE) teilen einen gemeinsamen Satz von Features, einschließlich eines visuellen XAML-Editors (Designer). Blend für Visual Studio, das die WPF- und UWP-Plattformen unterstützt, bietet zusätzliche Tools zum Entwerfen visueller Zustände und zum Erstellen von Animationen.

Sie können zwischen Visual Studio und Blend für Visual Studio hin- und herwechseln, und Sie können sogar dasselbe Projekt gleichzeitig in beiden IDEs öffnen lassen. Änderungen, die in XAML-Dateien in einer IDE gespeichert werden, können über das automatische Neuladen angewendet werden, wenn Sie zur anderen IDE wechseln. Sie können das Neuladeverhalten steuern, indem Sie zu Tools>Optionen>Umgebung>Dokumente in einer der IDEs navigieren.

Installation

  • Um WPF-Apps zu erstellen, installieren Sie die .NET-Desktopentwicklung Workload in Visual Studio. Blend für Visual Studio wird ebenfalls installiert.

    Screenshot der Workload „.NET-Desktopentwicklung“ im Visual Studio-Installer

  • Um UWP-Apps zu erstellen, installieren Sie die Universal Windows Platform-Entwicklungs--Workload in Visual Studio. Blend für Visual Studio wird ebenfalls installiert.

    Screenshot der Workload „UWP-Entwicklung“ (Universelle Windows-Plattform) im Visual Studio-Installer

Geteilte Fähigkeiten

Für die meisten grundlegenden Entwicklungsaufgaben teilen Visual Studio und Blend für Visual Studio die gleichen Fenster und Funktionen mit einigen subtilen Unterschieden. Einige Highlights sind:

  • IntelliSense: Beide IDEs unterstützen IntelliSense-Funktionen wie z. B. den Abschluss von Anweisungen.

  • Debuggen: Sie können in Visual Studio und Blend für Visual Studiodebuggen, einschließlich festlegen von Haltepunkten im Code zum Debuggen einer ausgeführten App und verwenden Hot Reload, um ihren XAML-Code während der Ausführung der App zu ändern. Um ein einheitliches Debugging mit Visual Studio zu gewährleisten, enthält Blend für Visual Studio die meisten Debugfenster und Symbolleisten von Visual Studio.

  • Datei neu laden: Sie können Ihre XAML-Dateien in Visual Studio oder Blend für Visual Studio bearbeiten. Bearbeitete Dateien, die gespeichert wurden, werden automatisch neu geladen, während Sie zwischen IDEs wechseln. Das Verhalten beim Neuladen können Sie in beiden IDEs über Tools>Optionen>Umgebung>Dokumente steuern.

  • Synchronisierte Layouts und Einstellungen: Fensterlayouts des Entwurfsanpassungstools und Einstellungseinstellungen für Visual Studio oder Blend für Visual Studio werden auf Ihren Geräten und Versionen synchronisiert, wenn Sie sich mit demselben Personalisierungskonto anmelden. Weitere Informationen finden Sie unter Synchronisieren von Einstellungen auf mehreren Computern.

Erweiterte Funktionen in Blend für Visual Studio

Um Ihre Produktivität zu steigern, sollten Sie Blend für Visual Studio für die folgenden Aufgaben verwenden. Dies sind die Bereiche, in denen Blend für Visual Studio mehr Funktionen bietet als der Visual Studio-Designer oder Code allein.

Aufgabe Visual Studio Blend für Visual Studio Weitere Informationen
Visuelle Zustände für Designs Es gibt kein Tool, mit dem Sie visuelle Zustände entwerfen können. Sie müssen sie programmgesteuert erstellen. Verwenden Sie Entwurfstools, um die Darstellung eines Steuerelements basierend auf seinem Zustand zu ändern. Visuelle Zustände
Erstellen von Animationen Es gibt kein Designtool für Animationen; Sie müssen sie programmgesteuert erstellen. Dies erfordert ein Verständnis des Animations- und Timing-Systems in WPF und umfassendes Codierungswissen. Sie erstellen Animationen visuell und können sie in Blend für Visual Studio in der Vorschau anzeigen. Dies ist schneller und präziser als das Erstellen von Animationen im Code. Sie können Trigger hinzufügen, um Benutzerinteraktionen zu verarbeiten, und Sie können zu Code wechseln, um Ereignishandler und andere Funktionen hinzuzufügen. Animieren von Objekten
Formen und Text in Pfade umwandeln, um die Bearbeitung zu erleichtern Nicht unterstützt. Sie können subtile oder dramatische Änderungen an Formen (z. B. Rechtecke und Ellipsen) vornehmen, indem Sie sie in Pfade konvertieren, die bessere Bearbeitungsmöglichkeiten bieten. Sie können Pfade neu gestalten oder kombinieren und zusammengesetzte Pfade aus mehreren Shapes erstellen.

Sie können Textblöcke auch in Pfade konvertieren, um sie als Vektorbilder zu bearbeiten.
Zeichnen von Formen und Pfaden
Bearbeiten von Steuerelementen, Vorlagen und Formatvorlagen Erfordert Codierung und Kenntnisse von WPF-Stilen und -Vorlagen. Verwandeln Sie ein beliebiges Bild in ein Steuerelement.

Verwenden Sie die Vorlagenbearbeitungstools, um Änderungen an Steuerelementen, Formatvorlagen und Vorlagen mit nur wenigen Mausklicks vorzunehmen.

Sie können beispielsweise Blend für Visual Studio-Stilressourcen verwenden, um allgemeine WPF-Steuerelemente (z. B. Schaltflächen, Listenfelder, Bildlaufleisten, Menüs usw.) zu implementieren und deren Farbe, Formatvorlage oder zugrunde liegende Vorlage direkt in Blend für Visual Studio zu ändern. Sie können dann, wenn Sie möchten, zum Code wechseln, um den letzten Schliff zu geben.
Ändern des Stils von Objekten
Verbinden der Benutzeroberfläche mit Daten Sie können eine Datenquelle aus Ressourcen wie einer SQL Server-Datenbank, WCF oder einem Webdienst, Objekt oder SharePoint-Liste erstellen und dann die Datenquelle an Ihre UI-Steuerelemente binden.

Entwurfszeitdaten müssen von Hand für eine interaktive Designerfahrung erstellt werden.
Erstellen Sie beispieldaten für .NET Framework-Apps einfach für Prototypen und Tests. Wechseln Sie zu Livedaten, wenn Sie bereit sind.

Blend für die Funktionen der Datengenerierung von Visual Studio ist hervorragend (Sie können Namen, Zahlen, URLs und Fotos ganz einfach hinzufügen), und Sie können viel Zeit sparen.

Bei Livedaten können Sie Ihre UI-Steuerelemente an eine XML-Datei oder an eine beliebige CLR-Datenquelle binden.
Datenanzeige

Weitere Informationen zum erweiterten XAML-Design finden Sie unter Erstellen einer Benutzeroberfläche mithilfe von Blend für Visual Studio.