Erstellen einer Benutzeroberfläche mit Blend für Visual StudioCreating a UI by using Blend for Visual Studio

Blend für Visual Studio unterstützt Sie beim Erstellen von XAML-basierten Windows- und Web-Anwendungen.Blend for Visual Studio helps you design XAML-based Windows and Web applications. Es bietet die gleiche einfache XAML-Entwurfsumgebung wie Visual Studio und fügt visuelle Designer für erweiterte Aufgaben hinzu, z. B. Animationen und Verhalten.It provides the same basic XAML design experience as Visual Studio and adds visual designers for advanced tasks such as animations and behaviors. Einen Vergleich zwischen Blend und Visual Studio finden Sie unter Entwerfen von XAML in Visual Studio und Blend für Visual Studio.For a comparison between Blend and Visual Studio, see Design XAML in Visual Studio and Blend for Visual Studio.

Blend für Visual Studio ist eine Komponente von Visual Studio.Blend for Visual Studio is a component of Visual Studio. Wählen Sie für die Installation von Blend im Visual Studio-Installer entweder die Workload Entwicklung für die universelle Windows-Plattform oder .NET Desktopentwicklung.To install Blend, in the Visual Studio Installer choose either the Universal Windows Platform development or .NET desktop development workload. Beide Workloads umfassen die Komponente „Blend für Visual Studio“.Both of these workloads include the Blend for Visual Studio component.

Komponenten der UWP-Workload    Komponenten der Workload „.NET Desktopentwicklung“

Wenn Sie mit Blend für Visual Studio nicht vertraut sind, nehmen Sie sich einen Moment Zeit, um die besonderen Funktionen des Arbeitsbereichs kennenzulernen.If you're new to Blend for Visual Studio, take a moment to become familiar with the unique features of the workspace. In diesem Abschnitt erhalten Sie eine kurze Führung.This topic takes you on a quick tour.

Note

Informationen zu den freigegebenen Entwurfsfeatures wie die Zeichenfläche, das Dokumentgliederungsfenster und das Gerätefenster finden Sie unter Erstellen einer Benutzeroberfläche mit dem XAML-Designer in Visual Studio.To tour the shared design features such as the artboard, Document Outline window, and Device window, see Creating a UI by using XAML Designer.

Überblick über die WerkzeugeTour of the Tools panel

Mithilfe des Bereichs Werkzeuge in Blend für Visual Studio können Sie in Ihrer Anwendung Objekte erstellen und ändern.You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. Die Objekte werden erstellt, indem Sie ein Werkzeug auswählen und die Objekte mit der Maus auf die Zeichenfläche ziehen.You create the objects by selecting a tool and drawing on the artboard with your mouse.

Werkzeugbereich

Auswahltools Auswahlwerkzeuge Wählen Sie Objekte und Pfade aus.Selection tools Select objects and paths.

Verwenden Sie das Werkzeug Direktauswahl, um geschachtelte Objekte und Pfadsegmente auszuwählen.Use the Direct Selection tool to select nested objects and path segments.
Legende A Pinsel mit Farbverlauf und die WerkzeugeGradient and brush tools
Ansichtstools Ansichtswerkzeuge Mit diesen Werkzeugen kann die Ansicht der Zeichenfläche beispielsweise zum Schwenken und Zoomen verwendet werden.View tools Adjust the view of the artboard, such as for panning and zooming. Legende B PfadwerkzeugePath tools
Pinseltools Pinselwerkzeuge Sie dienen zum Bearbeiten der visuellen Attribute eines Objekts, beispielsweise Pinseltransformationen, Zeichnen eines Objekts oder Auswählen der Attribute eines Objekts zur Übertragung auf ein anderes Objekt.Brush tools Work with the visual attributes of an object, such as transforming a brush, painting an object, or selecting the attributes of one object to apply them to another object. Legende C FormenwerkzeugeShape tools
Objektbibliothekstools Objektbibliothekswerkzeuge Sie dienen zum Zeichnen der gängigsten Objekte auf der Zeichenfläche, z.B. Pfade, Formen, Layoutbereiche, Text und Steuerelemente.Object tools Draw the most common objects on the artboard, such as paths, shapes, layout panels, text, and controls. Legende D LayoutbereicheLayout panels
Objekttools Objektwerkzeuge Sie ermöglichen den Zugriff auf den Objektbereich und die Anzeige des zuletzt verwendeten Objekts aus der Bibliothek.Asset tools Access the Assets panel and to show the most recently used asset from the library. Legende E TextsteuerelementeText controls
Legende F Allgemeine SteuerelementeCommon controls

Sehen Sie sich ein kurzes Video an: Konfigurieren installierter Features Die SymbolleisteWatch a short video: Configure installed features The Toolbar.

Überblick über den ObjektbereichTour of the Assets panel

Sie finden alle Steuerelemente im Objektbereich, das der Toolbox in Visual Studio ähnelt.You can find all controls in the Assets panel, similar to the Toolbox in Visual Studio. Zusätzlich zu den Steuerelementen befinden sich alle zur Zeichenfläche hinzufügbaren Objekte im Objektbereich, einschließlich Stile, Medien, Verhalten und Effekte.In addition to controls, you'll find everything you can add to your artboard in the Assets panel, including styles, media, behaviors, and effects.

Objektbereich

Suchfeld Verwenden Sie das Feld Suchen zum Filtern der Liste der Objekte.Search box Type in the Search box to filter the list of assets.
Rastermodus und Listenmodus Gittermodus und Listenmodus Wechseln Sie zwischen der Ansicht Gittermodus und Listenmodus der Objekte.Grid mode and List mode Switch between the Grid mode view and the List mode view of assets.
Objektkategorien Objektkategorien Klicken Sie auf eine Kategorie oder Unterkategorie, um die Liste der Objekte in dieser Kategorie anzuzeigen.Assets categories Click a category or subcategory to view the list of assets in that category.
Stile Formatvorlagen Zeigt alle Stile an, die im Ressourcenverzeichnis enthalten sind.Styles Show all the styles that are contained in the resource dictionary.
Beschreibung Beschreibung Zeigen Sie eine Beschreibung der ausgewählten Objektkategorie oder Unterkategorie an.Description View a description of the selected assets category or subcategory.

Überblick über die Bereiche Objekte und ZeitachseTour of the Objects and Timeline panel

Verwenden Sie diesen Bereich, um die Objekte auf der Zeichenfläche zu organisieren und gegebenenfalls zu animieren.Use this panel to organize the objects on your artboard and, if you want, to animate them.

Objekt- und Zeitachsenbereich im Animationsmodus

Objektansicht Objektansicht Zeigt die visuelle Struktur eines Dokuments an.Objects view View a visual tree of a document. Sie können einen Drilldown zu verschiedenen Detailebenen durchführen.You can drill down to varying levels of detail. Sie können auch zum Organisieren von Objekten auf der Zeichenfläche weitere Ebenen hinzufügen.You can also add layers to further organize objects on the artboard. Auf diese Weise können Sie sie sperren und als Gruppe ausblenden.That way you can lock and hide them as a group.
Aufzeichnungsmodusindikator Anzeige für Aufzeichnungsmodus Prüfen Sie, ob Sie Eigenschaftenänderungen in einer Zeitachse aufzeichnen.Record mode indicator See whether you're recording property changes in a timeline.
Storyboardauswahl Storyboardauswahl Zeigen Sie eine Liste der von von Ihnen erstellten Storyboards an.Storyboard picker View a list of storyboards that you've created.
Storyboard schließen Storyboard schließen Schließt das aktuelle Storyboard.Close storyboard Close the current storyboard.
Storyboardoptionen Storyboard-Optionen Erstellen, Kopieren, Umkehren, Löschen, Umbenennen oder Schließen eines Storyboards.Storyboard options Create, duplicate, reverse, delete, rename, or close a storyboard.
Wiedergabesteuerelemente Wiedergabesteuerelemente Navigieren durch die Zeitachse.Playback controls Navigate through the timeline. Sie können die Position auch ziehen, um auf der Zeitachse zu navigieren oder Scrubbing auszuführen.You can also drag the playhead to navigate through (or scrub) the timeline.
Bereich zurücksetzen auf. Bereich zurücksetzen auf Setzt die Objektansicht wieder zurück zum vorherigen Stammobjekt oder Bereich.Return scope to Scope the objects view back to the previous root object or previous scope. Dies ist nur beim Ändern von Stilen oder Vorlagen möglich.You can do this only when you're modifying a style or template.
Keyframe aufzeichnen Keyframe aufzeichnen Zeichnet einen Snapshot der Eigenschaften des ausgewählten Objekts zum aktuellen Zeitpunkt auf.Record a keyframe Record a snapshot of the properties of the selected object at the current point in time.
Andockoptionen Andockoptionen Legt Andock-Zeitachse, Andockauflösung fest und deaktiviert das Andocken der Zeitachse.Snapping options Set timeline snapping, snap resolution, and turn off timeline snapping.
Einblenden/Ausblenden, Sperren/Entsperren Einblenden/Ausblenden, Sperren/Entsperren Zeigt die Sichtbarkeits- und Sperroptionen für die Objektansicht oder blendet sie aus.Show/hide, Lock/unlock Show or hide the visibility and locking options for the objects view.
Position auf der Zeitachse Position auf der Zeitachse zeigt die aktuelle Zeit in Millisekunden an.Playhead position on the timeline Show the current time in milliseconds. Wenn Sie zu einem bestimmten Zeitpunkt springen möchten, können Sie auch direkt einen Zeitwert in dieses Feld eingeben.You can also enter a time value directly in this field to jump to a particular point in time. Die Präzision ist von der unter Andockoptionen festgelegten Auflösung zum Andocken abhängig.The precision depends on the snap resolution set in the Snapping Options.
Position Position Zeigt den Zeitpunkt der Animation an.Playhead Determine what point in time the animation is at. Sie können die Position über die Zeitachse ziehen, um eine Vorschau der Animation anzuzeigen.You can drag the playhead across the timeline to preview animation.
Für Zeitachsen festgelegte Keyframes Für Zeitachsen festgelegte Keyframes Ändert den Wert einer Eigenschaftsänderung zu einem bestimmten Zeitpunkt.Keyframes set on timelines Change a property value at a specific point in time.
Reihenfolge von Objekten ändern Änderungsreihenfolge von Objekten Legt die Anzeigereihenfolge von Objekten fest.Change order of objects Set the display order of objects. Klicken Sie auf diese Schaltfläche, um Objekte in der Strukturansicht gemäß der Z-Reihenfolge (von vorne nach hinten) oder gemäß der Markupreihenfolge (entspricht der Reihenfolge in der XAML-Ansicht) anzuordnen.Click this button to arrange objects in the structure view by Z order (front-to-back) or by markup order (the order in which they appear in XAML view).
Zeitachsenzoom Zeitachsenzoom Legt die Zoomauflösung der Zeitachse fest.Timeline zoom Set the zoom resolution of the timeline. Durch Vergrößern können Sie eine detailliertere Animation bearbeiten, während Sie beim Verkleinern eine Übersicht der Ereignisse über einen längeren Zeitraum hinweg anzeigen können.Zooming in lets you edit an animation with more detail, and zooming out shows more of an overview of what is happening over longer periods of time. Wenn Sie beim Vergrößern kein Keyframe zum gewünschten Zeitpunkt festlegen können, stellen Sie sicher, dass die Auflösung zum Andocken hoch genug eingestellt ist.If you zoom in but can't set a keyframe at the position in time that you want, verify that the snap resolution is set high enough.
Legende 16 Zeitachsen-Erfassungsbereich Zeigt die Zeitachse an und ermöglicht Ihnen das Verschieben der Keyframes durch Ziehen oder Verwenden der Kontextmenüs.Timeline composition area View the timeline, and move keyframes around by dragging them or using their shortcut menus.

Überblick über den Bereich EigenschaftenTour of the Properties panel

Verwenden Sie diesen Bereich, um die Eigenschaften eines Objekts anzuzeigen und zu ändern.Use this panel to view and modify the properties of an object. Sie können sie auch direkt auf der Zeichenfläche festlegen.You can also set them directly on the artboard. Wenn Sie dies tun, werden die Änderungen im Bereich Eigenschaften angezeigt.If you do, the property changes will be reflected in the Properties panel.

Eigenschaftenbereich

Kategorien Erweitern und Reduzieren der Kategorien von Eigenschaften.Categories Expand and collapse categories of properties. Klicken Sie auf Erweitern Erweitern und auf Reduzieren Reduzieren, um Kategoriedetails anzuzeigen oder auszublenden.Click Expand Expand and Collapse Collapse to show or hide category details.

Name und Typ Name und Typ Zeigt das Symbol, den Namen und den Typ des ausgewählten Objekts an.Name and Type View the icon, name and type of the selected object.
Anordnen nach Anordnen nach Ordnet Eigenschaften alphabetisch nach Namen, Quelle oder Kategorie an.Arrange by Arrange properties alphabetically by name, source, or category.
Pinseleigenschaften Pinseleigenschaften Legt die visuellen Eigenschaften für Pinselarten (Füllung, Strich und Vordergrund) fest.Brush properties Set the visual properties for brushes such as Fill brush, Stroke brush, and Foreground brush.
Farb-Editor Farb-Editor Wird für Volltonfarben- und Farbverlaufspinsel verwendet.Color editor Use for solid color and gradient brushes.
Farbauswahl Farbauswahl Wählt eine Farbe aus.Color picker Select a color.
Farbchips Farbchips Zeigt die Ausgangsfarbe, die aktuelle Farbe und die letzte Farbe an.Color chips View the initial color, current color, and last color
Pipette Formatpipetten Verwendet die Farbe eines Elements auf dem Bildschirm.Eyedroppers Use the color of any element on your screen. Die Verlaufspipette ist verfügbar, wenn der Pinsel mit Volltonfarbe ausgewählt ist.The Color eyedropper is available when the Solid color brush is selected. Die Verlaufspipette ist verfügbar, wenn der Farbverlaufspinsel ausgewählt ist.The Gradient eyedropper is available when the Gradient brush is selected.
Eigenschaften und Ereignisse Eigenschaften und Ereignisse Legt Eigenschaften oder Ereignisse für ein ausgewähltes Element fest.Properties and Events Set properties or choose events for a selected element.
Suchfeld Suchfeld Sucht nach Eigenschaften.Search box Search for properties. Filtert die Eigenschaften, die angezeigt werden, durch die Eingabe in das Feld Suche.Filter the properties that are displayed by typing in the Search box.
Pinsel-Editor-Registerkarten Pinsel-Editor-Registerkarten Zum Auswählen eines Pinsel-Editors.Brush editor tabs Use to select a brush editor. Sie können Keine Pinsel, Mit Volltonfarbe, Farbverlaufspinsel, Kacheleffekt und/oder Pinselressource auswählen.You can choose No brush, Solid Color brush, Gradient brush, Tile brush, or Brush resource.
Farbressourcen Farbressourcen Wendet genau dieselbe Farbe auf verschiedene Eigenschaften an.Color resources Apply the exact same color to different properties. Die Registerkarte Farbressourcen enthält Lokale Ressourcen und Systemressourcen.The Color Resources tab includes Local Resources and System Resources.
RGB-Farbraum RGB-Farbspektrum Sie können die Farbe ändern, indem Sie die Werte für R-, G- oder B-Zahlen-Editoren (Rot, Grün, Blau) anpassen.RGB color space Modify the color by adjusting the values for the R, G, or B (red, green, blue) number editors.
Alphakanal Alphakanal Ändern Sie den Alphawert, indem Sie den Zahleneditor neben A verwenden.Alpha channel Modify the Alpha value by using the number editor next to A.
Farbe in Ressource konvertieren Farbe in Ressource konvertieren Konvertiert die ausgewählte Farbe in eine Farbressource.Convert color to resource Convert the selected color to a color resource. Farbressourcen sind verfügbar, wenn Sie auf die Farbressourcenregisterkarte klicken.Color resources are available when you click the Color resources tab.
Farbtonwert Zeigt den hexadezimalen Wert der angezeigten Farbe an.Hex value View the hexadecimal value of the color displayed.
Legende 16 Schieberegler für Farbverlauf Erscheint nur, wenn ein Farbverlaufspinsel ausgewählt ist.Gradient slider Appears only if a gradient brush is selected.
Erweiterte Eigenschaften anzeigen Erweiterte Eigenschaften einblenden Zeigt Kategorien von Eigenschaften an, die weniger häufig verwendet werden.Show advanced properties View categories of properties that are less commonly used.

Sehen Sie sich ein kurzes Video an: Konfigurieren installierter Features EigenschaftenpanelWatch a short video: Configure installed features Properties panel.

Siehe auchSee also