Entwerfen mithilfe von XAML in Visual Studio und Blend für Visual StudioDesign XAML in Visual Studio and Blend for Visual Studio

Visual Studio und Blend für Visual Studio sind visuelle Tools zum Erstellen ansprechender Benutzeroberflächen und Rich-Media-Umgebungen mit XAML für eine Vielzahl von App-Typen.Visual Studio and Blend for Visual Studio both provide visual tools for building engaging user interfaces and rich media experiences with XAML for a variety of app types. Beide integrierten Entwicklungsumgebungen (IDE) teilen sich eine Reihe von Funktionen, wie z.B. einen visuellen XAML-Editor (Designer).Both integrated development environments (IDE) share a common set of features, including a visual XAML editor (designer). Blend für Visual Studio, das die WPF-und UWP-Plattformen unterstützt, stellt zusätzliche Tools zum Entwerfen von visuellen Zuständen und zum Erstellen von Animationen bereit.Blend for Visual Studio, which supports the WPF and UWP platforms, provides additional tools for designing visual states and creating animations.

Sie können zwischen Visual Studio und Blend für Visual Studio wechseln. Sie können sogar in beiden IDEs dasselbe Projekt geöffnet haben.You can switch back and forth between Visual Studio and Blend for Visual Studio, and you can even have the same project open in both IDEs at the same time. Änderungen an XAML-Dateien in einer IDE lassen sich beim Wechsel zur anderen IDE automatisch neu laden.Changes that are saved to XAML files in one IDE can be applied via automatic reload when you switch to the other IDE. Sie können das Neuladen Verhalten Steuern, indem Sie > Options > Environment > in beiden IDE zu Extras Optionen Umgebungs Dokumente navigieren.You can control the reload behavior by navigating to Tools > Options > Environment > Documents in either IDE.

InstallationInstallation

  • Um WPF-Apps zu erstellen, installieren Sie die Workload .NET-Desktopentwicklung in Visual Studio.To create WPF apps, install the .NET desktop development workload in Visual Studio. Blend für Visual Studio wird ebenfalls installiert.Blend for Visual Studio will also be installed.

    Screenshot der Arbeitsauslastung der .net-Desktop Entwicklung aus der Visual Studio-Installer

  • Um UWP-Apps zu erstellen, installieren Sie die Workload Universelle Windows-Plattformentwicklung in Visual Studio.To create UWP apps, install the Universal Windows Platform development workload in Visual Studio. Blend für Visual Studio wird ebenfalls installiert.Blend for Visual Studio will also be installed.

    Screenshot der Arbeitsauslastung der universelle Windows-Plattform Entwicklung aus der Visual Studio-Installer

  • Um Xamarin.Forms-Apps zu erstellen, installieren Sie die Workload Mobile-Entwicklung mit .NET in Visual Studio.To create Xamarin.Forms apps, install the Mobile development with .NET workload in Visual Studio. Blend für Visual Studio wird nicht installiert. Xamarin.Forms-Apps werden in Blend nicht unterstützt.Blend for Visual Studio is not installed; Blend doesn't support Xamarin.Forms apps.

    Screenshot der Mobile-Entwicklung mit .NET-Arbeitsauslastung aus der Visual Studio-Installer

Gemeinsam genutzte FunktionenShared capabilities

Für die meisten grundlegenden Entwicklungsaufgaben teilen sich Visual Studio und Blend für Visual Studie denselben Fenster- und Funktionssatz, mit einigen geringfügigen Unterschieden.For most fundamental development tasks, Visual Studio and Blend for Visual Studio share the same set of windows and capabilities, with some subtle differences. Einige Highlights:Some highlights include:

  • IntelliSense: Beide IDES unterstützen IntelliSense-Funktionen wie Anweisungs Vervollständigung.IntelliSense: Both IDEs support IntelliSense capabilities such as statement completion.

  • Debuggen: Sie können in Visual Studio Debuggen und Blend für Visual Studio. Hierzu gehören auch das Festlegen von Haltepunkten im Code zum Debuggen einer laufenden app und das Verwenden von Hot Upload zum Ändern des XAML-Codes, während die app ausgeführt wird.Debugging: You can debug in Visual Studio and Blend for Visual Studio, including setting breakpoints in code to debug a running app and using Hot Reload to change your XAML code while the app is running. Für ein einheitliches Debugerlebnis in Visual Studio beinhaltet Blend für Visual Studio die meisten der Debugfenster und -symbolleisten von Visual Studio.To maintain a consistent debugging experience with Visual Studio, Blend for Visual Studio includes most of Visual Studio's debugging windows and toolbars.

  • Datei neu laden: Sie können Ihre XAML-Dateien entweder in Visual Studio oder Blend für Visual Studio bearbeiten.File reload: You can edit your XAML files in either Visual Studio or Blend for Visual Studio. Bearbeitete Dateien, die gespeichert wurden, werden automatisch neu geladen, wenn Sie zwischen den IDES wechseln.Edited files that have been saved reload automatically as you switch between IDEs. Sie können das Neuladen Verhalten Steuern, indem Sie > Options > Environment > in beiden IDE zu Extras Optionen Umgebungs Dokumente navigieren.You can control the reload behavior by navigating to Tools > Options > Environment > Documents in either IDE.

  • Synchronisierte Layouts und Einstellungen: Entwurfs Anpassungs Tool Fensterlayouts und Einstellungen Einstellungen für Visual Studio oder Blend für Visual Studio werden auf Ihren Geräten und Versionen synchronisiert, wenn Sie sich mit demselben Personalisierungs Konto anmelden.Synchronized layouts and settings: Design customization tool window layouts and settings preferences for either Visual Studio or Blend for Visual Studio are synchronized across your devices and versions when you sign in with the same personalization account. Weitere Informationen finden Sie unterSynchronisieren von Visual Studio-Einstellungen auf mehreren Computern.See Synchronize settings across multiple computers.

Erweiterte Funktionen in Blend für Visual StudioAdvanced capabilities in Blend for Visual Studio

Verwenden Sie Blend für Visual Studio für die folgenden Aufgaben, um Ihre Produktivität zu steigern.To increase your productivity, consider using Blend for Visual Studio for the following tasks. Dies sind die Bereiche, in denen Blend mehr Funktionalität bietet als Visual Studio-Designer oder Code allein.These are the areas where Blend for Visual Studio offers more functionality than the Visual Studio designer or code alone.

AufgabeTask Visual StudioVisual Studio Blend for Visual StudioBlend for Visual Studio Weitere InformationenMore information
Visuelle Zustände für DesignsDesign visual states Es gibt kein Tool, das Sie beim Entwerfen visueller Zustände unterstützt. Sie müssen sie programmgesteuert erstellen.There is no tool to help you design visual states; you must create them programmatically. Verwenden Sie Designtools, um das Erscheinungsbilds eines Steuerelements basierend auf dessen Status zu ändern.Use design tools to change the appearance of a control based on its state. Visuelle ZuständeVisual states
Erstellen von AnimationenCreate animations Es gibt kein Designwerkzeug für Animationen; Sie müssen sie programmgesteuert erstellen.There is no design tool for animations; you have to create them programmatically. Dies erfordert ein grundlegendes Verständnis des Animations- und Zeitsteuerungssystems in WPF sowie umfangreiche Codierungskenntnisse.This requires an understanding of the animation and timing system in WPF and extensive coding expertise. Sie können Animationen in Blend für Visual Studio visuell erstellen und eine Vorschau anzeigen.You create animations visually and can preview them in Blend for Visual Studio. Dies ist schneller und präziser, als Animationen in Code zu erstellen.This is faster and more accurate than building your animations in code. Sie können Trigger hinzufügen, um die Benutzerinteraktion zu verarbeiten, und Sie können zum Code wechseln, um Ereignishandler und andere Funktionen zu verarbeiten.You can add triggers to handle user interaction, and you can switch to code to add event handlers and other functionality. Animieren von ObjektenAnimate objects
Umwandeln von Formen und Text in Pfade für eine einfachere BearbeitungTurn shapes and text into paths for easier manipulation Wird nicht unterstützt.Not supported. Sie können geringfügige oder erhebliche Änderungen an den Formen (z. B. Rechtecke und Ellipsen) vornehmen, indem Sie sie in Pfade konvertieren, die eine bessere Bearbeitungssteuerung bieten.You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide better editing control. Sie können Pfade umformen oder kombinieren und zusammengesetzte Pfade aus mehreren Formen erstellen.You can reshape or combine paths, and create compound paths from multiple shapes.

Sie können auch Textblöcke in Pfade umwandeln, um sie als Vektorgrafiken zu bearbeiten.You can also convert text blocks into paths to manipulate them as vector images.
Zeichnen von Formen und PfadenDraw shapes and paths
Bearbeiten von Steuerelementen, Vorlagen und StilenEdit controls, templates, and styles Erfordert die Codierung von sowie Kenntnisse über WPF-Stile und -Vorlagen.Requires coding and knowledge of WPF styles and templates. Wandeln Sie ein Bild in ein Steuerelement um.Turn any image into a control.

Verwenden Sie die Tools zum Bearbeiten von Vorlagen, um Steuerelemente, Stile und Vorlagen mit nur wenigen Mausklicks zu ändern.Use the template editing tools to make changes to controls, styles, and templates with just a few mouse clicks.

Beispielsweise können Sie Blend für Visual Studio-Ressourcen verwenden, um WPF-Standardsteuerelemente (z. B. Schaltflächen, Listenfeldern, Bildlaufleisten, Menüs usw.) zu implementieren und um die Farbe, den Stil oder die zugrunde liegende Vorlage direkt in Blend zu ändern.For example, you can use Blend for Visual Studio style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.), and change their color, style, or underlying template directly in Blend for Visual Studio. Sie können dann, falls gewünscht, zum Code wechseln, um Ihrer Arbeit den letzten Schliff zu geben.You can then switch to code for finishing touches if you want.
Ändern des Stils von ObjektenModify the style of objects
Verbinden der Benutzeroberfläche mit DatenConnect your UI to data Sie können eine Datenquelle aus Ressourcen, wie SQL Server-Datenbanken, WCF oder Webdiensten, Objekten oder SharePoint-Listen, erstellen und die Datenquelle mit den Steuerelementen der Benutzeroberfläche verknüpfen.You can create a data source from resources such as a SQL Server database, WCF or web service, object, or SharePoint list, and then bind the data source to your UI controls.

Daten müssen für ein interaktives Designerlebnis zur Entwurfszeit manuell erstellt werden.Design-time data must be created by hand for an interactive design experience.
Für .NET Framework-Apps erstellen Sie mühelos die Beispieldaten für die Prototyperstellung und für Tests.For .NET Framework apps, create sample data easily for prototyping and testing. Wechseln Sie zu den Livedaten, wenn Sie bereit sind.Switch to live data when you're ready.

Die Blend-Funktionen zur Datengenerierung von Visual Studio sind hervorragend. Sie können Namen, Zahlen, URLs und Fotos problemlos bei laufendem Betrieb hinzufügen, wodurch Sie viel Zeit sparen können.Blend for Visual Studio's data generation capabilities are outstanding (you can add names, numbers, URLs, and photos easily on the fly), and can save you a lot of time.

Bei Live-Daten können Sie die Steuerelemente der Benutzeroberfläche mit einer XML-Datei oder einer beliebigen CLR-Datenquelle verknüpfen.For live data, you can bind your UI controls to an XML file or to any CLR data source.
Anzeigen von DatenDisplay data

Informationen zu erweiterten XAML-Designs finden Sie unter Erstellen einer Benutzeroberfläche mit Blend für Visual Studio.For more information about advanced XAML design, see Create a UI by using Blend for Visual Studio.

Weitere Informationen:See also