Entwerfen von XAML-Code in Visual StudioDesign XAML in 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 Tools verwenden einen gemeinsamen Satz an Features, einschließlich eines visuellen XAML-Editors. Blend für Visual Studio bietet jedoch zusätzliche Entwurfstools für fortgeschrittene Aufgaben, wie z. B. Animation und Verhaltensweisen.Both tools share a common set of features including a visual XAML editor, but Blend for Visual Studio provides additional design tools for more advanced tasks such as animation and behaviors.

Der Entwurfsprozess einer App hängt von dem Tool, das Sie auswählen und Ihrer Zielplattform ab.The process of designing an app depends on the tool you choose and your target platform. In diesem Artikel werden die Verwendung von XAML-Entwurfstools in Visual Studio und Blend für Visual Studio verglichen.This article compares the XAML design tools in Visual Studio and Blend for Visual Studio. Eine detailliertere exemplarische Vorgehensweise zur Verwendung der Tools finden Sie in den folgenden Themen:For more detailed walkthroughs of using the tools, see the following topics:

Auswählen des richtigen ToolsChoose the right tool

Die Auswahl des Entwurfstools ist im Wesentlichen abhängig von Ihren Fähigkeiten.Your choice of design tools is largely dependent on your skill set. Wenn Sie eher codeorientiert sind, können Sie XAML-Code in Visual Studio schreiben, um fortschrittliche Entwurfsaufgaben zu erledigen.If you are more code-oriented, you can write XAML code in Visual Studio to accomplish advanced design tasks. Sind Sie eher designorientiert, können Sie mit Blend für Visual Studio erweiterte Aufgaben ausführen, ohne Code schreiben zu müssen.If you are more design-oriented, Blend for Visual Studio lets you perform advanced tasks without writing code.

Sie können zwischen Visual Studio und Blend für Visual Studio wechseln. Sie können sogar in beiden 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 at the same time. Änderungen an XAML-Dateien in einer IDE lassen sich beim Wechsel zur anderen IDE automatisch neu laden.Changes made to XAML files in one IDE can be applied via automatic reload when you switch to the other IDE. Sie können das Neuladeverhalten über die Optionen im Dialogfeld Extras > Optionen in beiden IDEs steuern.You can control the reload behavior via options in the Tools > Options dialog box in either IDE.

Gemeinsam genutzte FunktionenShared Capabilities

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

  • Eine einheitliche Benutzeroberfläche: Sie können Ihre Anwendungen innerhalb der vertrauten Umgebung der Visual Studio-Benutzeroberfläche entwickeln, was den Wechsel zwischen den IDEs zu einem angenehmeren und produktiveren Erlebnis macht.A consistent user interface: You can design your applications within the familiar context of the Visual Studio user interface, which makes switching between IDEs a more pleasant and productive experience. Blend für Visual Studio nutzt das „dunkle Design“ von Visual Studio, mit dem Sie sich durch eine Optimierung des Kontrasts zwischen Ihren Inhalten und der Benutzeroberfläche besser auf die entwickelten Inhalte konzentrieren können.Blend for Visual Studio uses the Visual Studio Dark theme that helps you focus on the content you are designing by improving the contrast between your content and the user interface. Weitere Informationen finden Sie unter Erstellen einer Benutzeroberfläche mit dem XAML-Designer.See Create a UI by using XAML Designer.

    Die Blend für Visual Studio-IDE

  • XAML IntelliSense: Beide IDEs unterstützen alle gemeinsamen Funktionen, die Sie von IntelliSense erwarten würden, einschließlich einer Anweisungsvervollständigung, der Unterstützung für gemeinsame Editoraktionen, wie z. B. Kommentieren und Formatieren von Code sowie die Navigation zu Ressourcen, zur Bindung und zum Code.XAML IntelliSense: Both IDEs support all of the common capabilities you would expect from IntelliSense including statement completion, support for common editor operations like commenting and formatting code, and navigation to resources, binding, and code.

  • Grundlegenden Debugfunktionen: Sie können in Blend jetzt debuggen, einschließlich dem Festlegen von Haltepunkten in Ihrem Code zum Debuggen Ihrer laufenden App.Basic debugging capabilities: You can now debug in Blend, including setting breakpoints in your code to debug your running app. 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. Erweiterte Debugfunktionen, z. B. die Diagnose und die Codeanalyse, sind hingegen nur in Visual Studio verfügbar.Advanced debugging capabilities such as diagnostics and code analysis are only available in Visual Studio. Weitere Informationen finden Sie unter Debuggen in Visual Studio.See Debug in Visual Studio.

  • Oberfläche für erneutes Laden einer Datei: Sie können die XAML-Dateien sowohl in Blend für Visual Studio als auch in Visual Studio bearbeiten und dafür sorgen, dass die bearbeiteten Dateien automatisch beim Wechsel zwischen ihnen neu geladen werden.File reload experience: You can edit your XAML files in either Blend for Visual Studio or Visual Studio, and have your edited files reload automatically as you switch between them. Um Workflow-Unterbrechungen zu minimieren, können Sie jetzt Ihre Datei-Neuladeeinstellungen im Dialogfeld „Datei neu laden“ festlegen.To minimize workflow interruptions, you can now set your file reload preferences in the file reload dialog.

    Oberfläche für erneutes Laden einer Datei

  • Synchronisiert Layouts und Einstellungen: Mit benutzerdefinierten Layouts können Sie Anpassungen des Tool-Fensterlayouts speichern und anwenden.Synchronized Layouts and Settings: Custom layouts enable you to save and apply tool window layout customizations. Visual Studio synchronisiert diese Anpassungen und Einstellungen computerübergreifend sowohl für Visual Studio als auch für Blend für Visual Studio, wenn Sie sich beim selben Microsoft-Konto anmelden.Visual Studio synchronizes these customizations and preferences for both Visual Studio and Blend for Visual Studio across machines when you sign in with the same Microsoft account. Weitere Informationen finden Sie unterSynchronisieren von Visual Studio-Einstellungen auf mehreren Computern.See Synchronize settings across multiple computers.

  • Ein gemeinsamer Projektmappen-Explorer: Der Projektmappen-Explorer bietet eine strukturierte Ansicht für Ihre Projekte und Dateien sowie einen schnellen Zugriff auf die zugehörigen Befehle.A common Solution Explorer: Solution Explorer provides you with an organized view of your projects and their files, as well as ready access to the commands associated with them. Mit dem Projektmappen-Explorer ist es einfacher, mit großen Firmenprojekten zu arbeiten.With Solution Explorer, it is easier to work with big enterprise projects. Weitere Informationen finden Sie unter Solutions and Projects (Projektmappen und Projekte).See Solutions and projects.

  • Team Explorer: Mit Team Explorer können Sie Ihre Projekte mit GIT- oder TFS-Repositorys zur Erleichterung der Zusammenarbeit im Team verwalten.Team Explorer: With Team Explorer you can manage your projects with GIT or TFS repositories to facilitate team collaboration. Siehe Arbeiten im Team ExplorerSee Work in Team Explorer.

  • NuGet: können Sie in Visual Studio und Blend für Visual Studio NuGet-Pakete verwalten.NuGet: You can manage NuGet packages in both Visual Studio and Blend for Visual Studio. NuGet ist eine Paket-Manager für .NET Framework, der die Installation und Deinstallation von Paketen aus einer Projektmappe vereinfacht.NuGet is a package manager for the .NET Framework that simplifies the installation and removal of packages from a solution.

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 Schnelligkeit und Funktionalität bietet als Visual Studio-Designer oder Code allein.These are the areas where Blend for Visual Studio offers more speed and functionality than the Visual Studio designer or code alone.

BeschreibungTo Visual StudioVisual Studio Blend for Visual StudioBlend for Visual Studio Weitere InformationenMore information
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. Animate objects (Animieren von Objekten)Animate 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
Hinzufügen von Interaktivität zu Ihren BenutzeroberflächendesignsAdd interactivity to your UI designs Erfordert C#-, Visual Basic- oder C++-Code.Requires C#, Visual Basic, or C++ code. Ziehen Sie Verhalten auf Steuerelemente, um Ihren statischen Designs Interaktivität hinzuzufügen.Drag and drop behaviors onto controls to add interactivity to your static designs. Verhalten sind sofort einsatzbereite Codeausschnitte, die Funktionen wie Drag & Drop, Zoom und Änderungen des visuellen Zustands kapseln.Behaviors are ready-to-use code snippets that encapsulate functionality such as drag/drop, zoom, and visual state changes. Es gibt immer mehr Verhaltensweisen, aus denen Sie wählen können. Zudem können Sie Ihre eigenen erstellen.There's a growing set of behaviors from which you can choose, and you can create your own.

Sie können dann jedes Verhalten anpassen, indem Sie dessen Eigenschaften in Blend für Visual Studio ändern oder indem Sie Ereignishandler in den Code einfügen.You can then customize each behavior by changing its properties in Blend for Visual Studio or by adding event handlers in code.
Insert controls and modify their behavior (Einfügen von Steuerelementen und Ändern des Verhaltens)Insert controls and modify their behavior
Verwenden von Adobe-BildmaterialUse Adobe artwork Wird nicht unterstützt.Not supported. Importieren Sie Adobe FXG-, Photoshop- oder Illustrator-Bildmaterial, und implementieren Sie die Benutzeroberfläche in Blend für Visual Studio.Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend for Visual Studio. Insert images, videos, and audio clips (Einfügen von Bildern, Videos und Audioclips)Insert images, videos, and audio clips
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.
Modify the style of objects (Ändern des Stils von Objekten)Modify 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 SQL Server databases, WCF or web services, objects, or SharePoint lists, and 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.
Erstellen Sie mühelos die Beispieldaten für die Prototyperstellung und für Tests.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.
Display data (Anzeigen von Daten)Display 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.