Erstellen einer Benutzeroberfläche mit dem XAML-DesignerCreate a UI by using XAML Designer

Der XAML-Designer in Visual Studio und Blend für Visual Studio bietet eine visuelle Oberfläche, die Sie beim Entwerfen von XAML-basierten apps wie WPF und UWP unterstützt.The XAML Designer in Visual Studio and Blend for Visual Studio provides a visual interface to help you design XAML-based apps, such as WPF and UWP. Sie können Benutzeroberflächen für Ihre Apps erstellen, indem Sie Steuerelemente aus dem Fenster Toolbox (Fenster „Objekte“ in Blend für Visual Studio) ziehen und Eigenschaften im Eigenschaftenfenster festlegen.You can create user interfaces for your apps by dragging controls from the Toolbox window (Assets window in Blend for Visual Studio) and setting properties in the Properties window. Sie können XAML-Code auch direkt in der XAML-Ansicht bearbeiten.You can also edit XAML directly in XAML view.

Fortgeschrittene Benutzer können den XAML-Designer auch anpassen.For advanced users, you can even customize the XAML Designer.

Hinweis

Xamarin. Forms unterstützt keinen XAML-Designer.Xamarin.Forms does not support a XAML designer. Wenn Sie xamarin. Forms-XAML-Benutzeroberflächen anzeigen und bearbeiten möchten, während die app ausgeführt wird, verwenden Sie XAML Hot Neuladen für xamarin. Forms.To view your Xamarin.Forms XAML UIs and edit them while the app is running, use XAML Hot Reload for Xamarin.Forms. Weitere Informationen finden Sie auf der Seite XAML-Hot-Upload für xamarin. Forms (Vorschau) .For more information, see the XAML Hot Reload for Xamarin.Forms (Preview) page.

XAML-Designer-ArbeitsbereichXAML Designer workspace

Der Arbeitsbereich im XAML-Designer besteht aus mehreren visuellen Schnittstellenelementen.The workspace in XAML Designer consists of several visual interface elements. Dazu gehören die Zeichenfläche (die visuelle Designoberfläche), der XAML-Editor, das Fenster „Dokumentgliederung“ (Fenster „Objekte und Zeitachse“ in Blend for Visual Studio) und das Eigenschaftenfenster.These include the artboard (which is the visual design surface), XAML editor, Document Outline window (Objects and Timeline window in Blend for Visual Studio), and Properties window. Um den XAML-Designer zu öffnen, klicken Sie mit der rechten Maustaste auf eine XAML-Datei im Projektmappen-Explorer und wählen Sie Ansicht-Designeraus.To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer.

Der XAML-Designer stellt eine XAML-Ansicht und eine synchronisierte Entwurfsansicht des gerenderten XAML-Markups Ihrer App bereit.XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. Mit einer XAML-Datei, die in Visual Studio oder Blend für Visual Studio geöffnet ist, können Sie zwischen Designansicht und XAML-Ansicht wechseln, indem Sie die Registerkarten Entwurf und XAML verwenden.With a XAML file open in Visual Studio or Blend for Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. Sie können die Schaltfläche Bereiche austauschenSchaltfläche „Bereiche austauschen“ im XAML-Designer verwenden, um festzulegen, welches Fenster im Vordergrund angezeigt wird: entweder die Zeichenfläche oder der XAML-Editor.You can use the Swap Panes button Swap Panes button in XAML Designer to switch which window appears on top: either the artboard or the XAML editor.

EntwurfsansichtDesign view

In der Designansicht ist das Fenster, welches die Zeichenfläche enthält, das aktive Fenster, und Sie können es als primäre Arbeitsoberfläche verwenden.In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. Sie können damit eine Seite in Ihrer App visuell gestalten, indem Sie Elemente hinzufügen, zeichnen oder ändern.You can use it to visually design a page in your app by adding, drawing, or modifying elements. Weitere Informationen finden Sie unter Arbeiten mit Elementen im XAML-Designer.For more information, see Work with elements in XAML Designer. Diese Abbildung zeigt die Zeichenfläche in der Entwurfsansicht.This illustration shows the artboard in Design view.

Entwurfsansicht XAML-Designer

Diese Funktionen sind auf der Zeichenfläche verfügbar:These features are available in the artboard:

AusrichtungslinienSnaplines

Ausrichtungs Linien sind Ausrichtungs Grenzen , die als rot gestrichelte Linien angezeigt werden, um anzuzeigen, wann die Ränder von Steuerelementen ausgerichtet sind oder wenn Text Basis Linien ausgerichtet werden.Snaplines are alignment boundaries that appear as red-dashed lines to show when the edges of controls are aligned or when text baselines are aligned. Ausrichtungsgrenzen werden nur angezeigt, wenn Andocken an Ausrichtungslinien aktiviert ist.Alignment boundaries appear only when snapping to snaplines is enabled.

RasterschienenGrid rails

Rasterschienen werden verwendet, um Zeilen und Spalten in einem Rasterbereich zu verwalten.Grid rails are used to manage rows and columns in a Grid panel. Sie können Zeilen und Spalten erstellen und löschen, und Sie können jeweils ihre relative Breite und Höhe anpassen.You can create and delete rows and columns, and you can adjust their relative widths and heights. Die vertikale Rasterschiene, die auf der linken Seite der Zeichenfläche angezeigt wird, wird für Zeilen verwendet, und die horizontale Linie, die oben angezeigt wird, wird für Spalten verwendet.The vertical Grid rail, which appears on the left of the artboard, is used for rows, and the horizontal line, which appears at the top, is used for columns.

RasterfunktionsindikatorenGrid adorners

Ein Rasteradorner wird als Dreieck angezeigt, an das eine vertikale oder horizontale Linie auf der Rasterschiene angefügt ist.A Grid adorner appears as a triangle that has a vertical or horizontal line attached to it on the Grid rail. Wenn Sie einen Rasteradorner ziehen, werden die Breiten und Höhen von benachbarten Spalten oder Zeilen aktualisiert, während Sie die Maus verschieben.When you drag a Grid adorner, the widths or heights of adjacent columns or rows update as you move the mouse.

Rasteradorner werden verwendet, um die Breite und Höhe der Zeilen und Spalten eines Rasters zu steuern.Grid adorners are used to control the width and height of a Grid's rows and columns. Sie können eine neue Spalte oder Zeile hinzufügen, indem Sie in die Rasterschienen klicken.You can add a new column or row by clicking in the Grid rails. Wenn Sie eine neue Zeilen- oder Spaltenlinie für einen Rasterbereich hinzufügen, der mindestens zwei Spalten oder Zeilen enthält, wird außerhalb der Schiene eine Minisymbolleiste angezeigt, in der Sie die Breite und die Höhe genau festlegen können.When you add a new row or column line for a Grid panel that has two or more columns or rows, a mini-toolbar appears outside of the rail that enables you to set width and height explicitly. In der Minisymbolleiste können Sie die Größenanpassungsoptionen für Zeilen und Spalten des Rasters festlegen.The mini-toolbar enables you to set sizing options for Grid rows and columns.

Rasteradorner in XAML-Designer

Handles zum Ändern der GrößeResize handles

Handles zur Größenänderung werden auf ausgewählten Steuerelementen angezeigt und ermöglichen Ihnen das Ändern der Größe des Steuerelements.Resize handles appear on selected controls and enable you to resize the control. Wenn Sie die Größe eines Steuerelements ändern, werden normalerweise die Werte für die Höhe und Breite angezeigt, um Ihnen bei der Größenfestlegung des Steuerelements behilflich zu sein.When you resize a control, width and height values typically appear to help you size the control. Weitere Informationen zum Bearbeiten von Steuerelementen in der Designansicht finden Sie unter Arbeiten mit Elementen im XAML-Designer.For more information about manipulating controls in Design view, see Work with elements in XAML Designer.

RänderMargins

Der Begriff "Rand" bezeichnet den fest definierten Abstand zwischen der Kante eines Steuerelements und der Kante seines Containers.Margins represent the amount of fixed space between the edge of a control and the edge of its container. Sie können die Ränder eines Steuer Elements festlegen, indem Sie die Rand -Eigenschaften unter Layout im Eigenschaften Fenster verwenden.You can set the margins of a control by using the Margin properties under Layout in the Properties window.

RandfunktionsindikatorenMargin adorners

Sie können Randadorner verwenden, um die Ränder eines Elements relativ zu dessen Layoutcontainer zu ändern.Use margin adorners to change the margins of an element relative to its layout container. Wenn ein Randfunktionsindikator geöffnet ist, wird kein Rand festgelegt, und der Randfunktionsindikator zeigt eine unterbrochene Kette an.When a margin adorner is open, a margin is not set and the margin adorner displays a broken chain. Wenn der Rand nicht festgelegt wird, verbleiben Elemente an Ort und Stelle, wenn die Größe des Layoutcontainers zur Laufzeit geändert wird.When the margin is not set, elements remain in place when the layout container is resized at run time. Wenn ein Randadorner geschlossen ist, zeigt ein Randadorner eine nicht unterbrochene Kette an, und Elemente verschieben sich mit dem Rand, während der Layoutcontainer zur Laufzeit angepasst wird (der Rand bleibt unverändert).When a margin adorner is closed, a margin adorner displays an unbroken chain, and elements move with the margin as the layout container is resized at run time (the margin remains fixed).

ElementhandlesElement handles

Sie können ein Element ändern, indem Sie die Elementhandles verwenden, die auf der Zeichenfläche angezeigt werden, wenn Sie den Mauszeiger über die Ecken des blauen Felds, welches ein Element umgibt, bewegen.You can modify an element by using the element handles that appear on the artboard when you move the pointer over the corners of the blue box that surrounds an element. Mit diesen Handles können Sie das Element drehen, dessen Größe ändern, es spiegeln, verschieben oder ihm einen Eckradius hinzufügen.These handles enable you to rotate, resize, flip, move, or add a corner radius to the element. Das Symbol für das Elementhandle variiert je nach Funktion und ändert sich je nach der genauen Position des Zeigers.The symbol for the element handle varies by function and changes depending on the exact location of the pointer. Wenn Sie die Elementhandles nicht sehen, stellen Sie sicher, dass das Element ausgewählt ist.If you don't see the element handles, make sure the element is selected.

In der Entwurfsansicht sind zusätzliche Zeichenflächenbefehle im unteren linken Fensterbereich verfügbar, wie hier gezeigt wird:In Design view, additional artboard commands are available in the lower-left area of the window, as shown here:

Entwurfsansicht-Befehle

Diese Befehle sind auf dieser Symbolleiste verfügbar:These commands are available on this toolbar:

ZoomZoom

Zoom ermöglicht es Ihnen, die Entwurfsoberfläche zu skalieren.Zoom enables you to size the design surface. Sie können mit dem Zoom die Größe von 12,5 % bis 800 % ändern oder Optionen wie Auswahl anpassen und Alle anpassen auswählen.You can zoom from 12.5% to 800% or select options such as Fit selection and Fit all.

Ausrichtungsgitter anzeigen/ausblendenShow/Hide snap grid

Zeigt das Ausrichtungsgitter an, das die Rasterlinien anzeigt, oder blendet es aus.Displays or hides the snap grid that shows the gridlines. Rasterlinien werden verwendet, wenn Sie entweder Andocken an Rasterlinien oder Andocken an Ausrichtungslinien aktivieren.Gridlines are used when you enable either snapping to gridlines or snapping to snaplines.

Andocken an Rasterlinien ein/ausTurn on/off snapping to gridlines

Wenn das Ausrichten an Gitternetz Linien aktiviert ist, wird ein Element tendenziell an den nächstgelegenen horizontalen und vertikalen Gitternetz Linien ausgerichtet, wenn Sie es auf die Zeichenfläche ziehen.If snapping to gridlines is enabled, an element tends to align with the closest horizontal and vertical gridlines when you drag it onto the artboard.

Hintergrund der Zeichenfläche umschaltenToggle artboard background

Schaltet zwischen einem hellen und einem dunklen Hintergrund um.Toggles between a light and dark background.

Andocken an Ausrichtungslinien ein/ausTurn on/off snapping to snaplines

Mit Ausrichtungslinien können Sie Steuerelemente relativ zu anderen Steuerelementen ausrichten.Snaplines help you align controls relative to each other. Wenn Andocken an Ausrichtungslinien aktiviert ist, wenn Sie ein Steuerelement relativ zu anderen Steuerelementen ziehen, werden Ausrichtungsgrenzen angezeigt, wenn die Kanten und der Text von einigen Steuerelementen horizontal oder vertikal ausgerichtet werden.If snapping to snaplines is enabled, when you drag a control relative to other controls, alignment boundaries appear when the edges and the text of some controls are aligned horizontally or vertically. Eine Ausrichtungsgrenze wird als rot-gestrichelte Linie angezeigt.An alignment boundary appears as a red-dashed line.

Projektcode deaktivierenDisable project code

Deaktiviert den Projektcode, z.B. benutzerdefinierte Steuerelemente und Wertkonverter, und lädt den Designer neu.Disables project code, for example, custom controls and value converters, and reloads the designer.

XAML-AnsichtXAML view

In der XAML-Ansicht ist das Fenster mit dem XAML-Editor das aktive Fenster, und der XAML-Editor ist Ihr primäres Entwicklungstool.In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. Die Extensible Application Markup Language (XAML) stellt ein deklaratives, auf XML basierendes Vokabular bereit, mit dem die Benutzeroberfläche einer Anwendung festgelegt werden kann.The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. Die XAML-Ansicht enthält IntelliSense und automatische Formatierung, Syntaxhervorhebung und Tagnavigation.XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. In der folgenden Abbildung wird die XAML-Ansicht mit einem geöffneten IntelliSense-Menü dargestellt:The following image shows XAML view with an IntelliSense menu open:

XAML-Ansicht

Fenster DokumentgliederungDocument Outline window

Das Fenster „Dokumentgliederung“ in Visual Studio ist ähnelt dem Fenster Objekte und Zeitachsen in Blend für Visual Studio.The Document Outline window in Visual Studio is similar to the Objects and Timeline window in Blend for Visual Studio. Mit der Dokumentgliederung können Sie die folgenden Aufgaben ausführen:Document Outline helps you perform these tasks:

  • Anzeigen der hierarchischen Struktur aller Elemente auf der Zeichenfläche.View the hierarchical structure of all elements on the artboard.

  • Wählen Sie Elemente aus, damit Sie Sie ändern können.Select elements so that you can modify them. Beispielsweise können Sie Sie in der Hierarchie verschieben oder deren Eigenschaften im Eigenschaftenfenster festlegen.For example, you can move them around in the hierarchy or set their properties in the Properties window. Weitere Informationen finden Sie unter Arbeiten mit Elementen im XAML-Designer.For more information, see Work with elements in XAML Designer.

  • Erstellen und Ändern von Vorlagen für Elemente, welche Steuerelemente sind.Create and modify templates for elements that are controls.

  • Erstellen von Animationen (nur Blend für Visual Studio).Create animations (Blend for Visual Studio only).

Um das Dokument Gliederungs Fenster in Visual Studio anzuzeigen, wählen Sie in Viewder Menüleiste die Option > Weitere Windows- > DokumentGliederung anzeigen aus.To view the Document Outline window in Visual Studio, on the menu bar select View > Other Windows > Document Outline. Um das Fenster Objekte und Zeitachsen in Blend für Visual Studio anzuzeigen, wählen Sie in der Menüleiste Dokument Gliederung anzeigenaus > Document Outline.To view the Objects and Timeline window in Blend for Visual Studio, on the menu bar select View > Document Outline.

Screenshot: Fenster „Dokumentgliederung“ in Visual Studio

Die Hauptansicht im Fenster „Dokumentgliederung/Objekte und Zeitachse“ zeigt die Hierarchie eines Dokuments in einer Baumstruktur an.The main view in the Document Outline/Objects and Timeline window displays the hierarchy of a document in a tree structure. Sie können den hierarchischen Charakter der Dokumentgliederung verwenden, um das Dokument mit unterschiedlicher Detailliertheit zu überprüfen und um Elemente einzeln oder in Gruppen zu sperren und auszublenden.You can use the hierarchical nature of the document outline to examine the document at varying levels of detail and to lock and hide elements singly or in groups. Die folgenden Optionen sind im Fenster Dokument Gliederung/Objekte und Zeitachsen verfügbar:The following options are available in the Document Outline/Objects and Timeline window:

Ein-/ausblendenShow/hide

Zeigt Zeichenflächenelemente an oder blendet sie aus.Displays or hides artboard elements. Wird als Auges dargestellt, wenn es eingeblendet wird.Appears as a symbol of an eye when shown. Sie können auch STRG + h drücken, um ein Element auszublenden, und UMSCHALT + STRG + h , um es anzuzeigen.You can also press Ctrl+H to hide an element and Shift+Ctrl+H to show it.

Sperren/EntsperrenLock/unlock

Sperrt oder entsperrt Zeichenflächenelemente.Locks or unlocks artboard elements. Gesperrte Elemente können nicht geändert werden.Locked elements can't be modified. Es wird ein Vorhängeschloss angezeigt, wenn ein Element gesperrt ist.Appears as a padlock symbol when locked. Sie können auch STRG + l drücken, um ein Element zu sperren, und UMSCHALTTaste + STRG + l , um es zu entsperren.You can also press Ctrl+L to lock an element and Shift+Ctrl+L to unlock it.

Bereich zurücksetzen aufReturn scope to pageRoot

Über Option oben im Fenster „Dokumentgliederung/Objekte und Zeitachse“, die das Symbol eines Nach-Oben-Pfeils zeigt, gelangen Sie an den vorherigen Bereich zurück.The option at the top of the Document Outline/Objects and Timeline window, which shows an up arrow symbol, moves to the previous scope. Die Vergrößerung des Bereichs ist nur möglich, wenn Sie sich im Bereich eines Stils oder einer Vorlage befinden.Scoping up is applicable only when you're in the scope of a style or template.

EigenschaftenfensterProperties window

Im Fenster Eigenschaften können Sie Eigenschaftswerte für Steuerelemente festlegen.The Properties window enables you to set property values on controls. Das Fenster sieht so aus:Here's what it looks like:

Eigenschaftenfenster

Am oberen Rand des Fensters " Eigenschaften " befinden sich verschiedene Optionen:There are various options at the top of the Properties window:

  • Sie können den Namen des aktuell ausgewählten Elements im Feld Name ändern.Change the name of the currently selected element in the Name box.
  • In der linken oberen Ecke gibt es ein Symbol, welches das aktuell ausgewählte Element darstellt.In the upper-left corner, there's an icon that represents the currently selected element.
  • Um die Eigenschaften nach Kategorie oder alphabetisch zu sortieren, klicken Sie auf Kategorie, Nameoder auf Quelle in der Liste Anordnen nach .To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list.
  • Um die Liste der Ereignisse für ein Steuerelement zu sehen, klicken Sie auf die Schaltfläche Ereignisse. Es wird ein Blitz angezeigt.To see the list of events for a control, click the Events button, which appears as a lightning bolt symbol.
  • Wenn Sie nach einer Eigenschaft suchen möchten, beginnen Sie mit der Eingabe des Namens der Eigenschaft im Suchfeld.To search for a property, start to type the name of the property in the search box. Im Fenster Eigenschaften werden die Eigenschaften angezeigt, die mit Ihrer Suche übereinstimmen, während Sie Ihre Eingabe vornehmen.The Properties window displays the properties that match your search as you type.

Einige Eigenschaften ermöglichen es Ihnen, erweiterte Eigenschaften festzulegen, indem Sie eine Nach-Unten-Schaltfläche auswählen.Some properties allow you to set advanced properties by selecting a down arrow button.

Rechts von jedem Eigenschaftenwert befindet sich ein Eigenschaftenmarker , der als Feldsymbol angezeigt wird.To the right of each property value is a property marker that appears as a box symbol. Die Anzeige des Eigenschaftenmarkers weist darauf hin, ob es eine Datenbindung oder eine Ressource gibt, die auf die Eigenschaft angewendet wurde.The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. Beispielsweise zeigt ein weißes Feldsymbol einen Standardwert an, ein schwarzes Feldsymbol zeigt in der Regel an, dass eine lokale Ressource angewendet wurde, und ein oranges Feld zeigt in der Regel an, dass eine Datenbindung angewendet wurde.For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. Wenn Sie auf den Eigenschaftenmarker klicken, können Sie zur Definition eines Stils navigieren, den Datenbindungs-Generator öffnen oder die Ressourcenauswahl öffnen.When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.

Weitere Informationen zur Verwendung von Eigenschaften und zur Behandlung von Ereignissen finden Sie unter Einführung in Steuerelemente und Muster.For more information about using properties and handling events, see Intro to controls and patterns.

Siehe auchSee also