Erstellen einer Benutzeroberfläche mit dem XAML-Designer in Visual StudioCreate a UI by using XAML Designer in Visual Studio

Der XAML-Designer in Visual Studio stellt eine visuelle Schnittstelle bereit, mit der Sie XAML-basierte Windows- und Web-Apps entwerfen können.The XAML Designer in Visual Studio provides a visual interface to help you design XAML-based Windows and Web apps. Sie können Benutzeroberflächen für Ihre Apps erstellen, indem Sie Steuerelemente aus der Toolbox ziehen und Eigenschaften im Fenster Eigenschaften festlegen.You can create user interfaces for your apps by dragging controls from the Toolbox 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.

Informationen zu erweiterten XAML-Designaufgaben, etwa Animationen und Verhalten, finden Sie unter Creating a UI by using Blend for Visual Studio.For advanced XAML design tasks such as animations and behaviors, see Creating a UI by using Blend for Visual Studio. Siehe auchEntwerfen von XAML-Code in Visual Studio und Blend für Visual Studio.Also see Design XAML in Visual Studio and Blend for Visual Studio for a comparison between the tools.

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. Diese umfassen die Zeichenfläche, den XAML-Editor, das Gerätefenster, das Fenster Dokumentgliederung und das Fenster Eigenschaften.These include the artboard, XAML Editor, Device window, Document Outline window, 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.

ErstellungsansichtenAuthoring views

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 geöffnet ist, können Sie zwischen Entwurfsansicht und XAML-Ansicht wechseln, indem Sie die Registerkarten Entwurf und XAML verwenden.With a XAML file open in 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 austauschen verwenden, um festzulegen, welches Fenster im Vordergrund angezeigt wird: entweder die Zeichenfläche oder der XAML-Editor.You can use the Swap Panes button to switch which window appears on top: either the artboard or the XAML Editor.

In der Entwurfsansicht 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 es verwenden, um eine Seite Ihrer App visuell zu entwerfen, indem Sie Elemente hinzufügen oder zeichnen, und indem Sie diese dann ändern.You can use it to visually design a page in your app by adding or drawing elements, and then by modifying them. Weitere Informationen finden Sie unter Working with elements in XAML Designer.For more info, see Working 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

Ausrichtungslinien sind Ausrichtungsgrenzen , die als rot-gestrichelte Linien erscheinen, um anzuzeigen, wann die Ränder von Steuerelementen ausgerichtet sind oder wenn Textbasislinien ausgerichtet sind.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

Grid -Schienen (Rasterschienen) werden verwendet, um Zeilen und Spalten in einem Raster -Bereich 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.

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 Entwurfsansicht finden Sie unter Arbeiten mit Elementen im XAML-Designer.For more information about manipulating controls in Design view, see Working with elements in XAML Designer.

Seitenrä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 Steuerelements festlegen, indem Sie die Rand -Eigenschaften unter Layout im Eigenschaftenfenster 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 Randfunktionsindikatoren verwenden, um die Ränder eines Elements relativ zu dessen Layoutcontainer zu ändern.You can 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 Bildschirmbereich verfügbar, wie hier gezeigt wird:In Design view, additional artboard commands are available in the lower-left area of the screen, 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 An Auswahl anpassen und An Alle anpassenauswählen.You can zoom from 12.5% to 800%, or select options such as Fit to Selection and Fit to 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 Andocken an Rasterlinien aktiviert ist, wenn Sie ein Element auf der Zeichenfläche ziehen, richtet sich das Element im Allgemeinen an den nächstgelegenen horizontalen und vertikalen Rasterlinien aus.If snapping to gridlines is enabled, when you drag an element on the artboard, the element tends to align with the closest horizontal and vertical gridlines.

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.

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. Diese Abbildung zeigt die XAML-Ansicht:This illustration shows XAML view:

XAML-Ansicht

Leiste für geteilte AnsichtSplit view bar

Die Leiste für geteilte Ansicht wird am oberen Rand der XAML-Ansicht angezeigt, wenn sich der XAML-Editor im unteren Fenster befindet.The split view bar appears at the top of XAML view when the XAML editor is in the lower window. Mit der Leiste für geteilte Ansicht können Sie die relative Größe der Entwurfsansicht und der XAML-Ansicht steuern.The split view bar enables you to control the relative sizes of Design view and XAML view. Sie können auch die Positionen der Ansichten austauschen (mithilfe der Schaltfläche Bereiche austauschen ). Außerdem können Sie angeben, ob die Ansichten horizontal oder vertikal angeordnet werden und jede dieser Ansichten reduzieren.You can also exchange the locations of the views (using the Swap Panes button), specify whether the views are arranged horizontally or vertically, and collapse either view.

MarkupzoomMarkup Zoom

Der Markupzoom ermöglicht es Ihnen, die XAML-Ansicht zu skalieren.Markup zoom enables you to size XAML view. Es stehen Zoomstufen von 20 % bis 400 % zur Verfügung.You can zoom from 20% to 400%.

Fenster DokumentgliederungDocument Outline window

Das Fenster „Dokumentgliederung“ in XAML-Designer ist ähnlich wie das Fenster Objekte und Zeitachsen in Blend für Visual Studio.The Document Outline window in XAML Designer is similar to the Objects and Timeline window in Blend for Visual Studio. Mithilfe der Dokumentgliederung können Sie die folgenden Aufgaben erledigen: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.

  • Auswählen von Elementen, sodass Sie diese ändern können (Verschieben der Objekte innerhalb der Hierarchie, Ändern der Objekte auf der Zeichenfläche, Festlegen ihrer Eigenschaften im Eigenschaftenfenster usw.).Select elements so that you can modify them (move them around in the hierarchy, modify them on the artboard, set their properties in the Properties window, and so on). Weitere Informationen finden Sie unter Arbeiten mit Elementen im XAML-DesignerFor more information, see Working 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.

  • Verwenden Sie das Kontextmenü (Rechtsklick) für ausgewählte Elemente.Use the right-click menu (context menu) for selected elements. Das gleiche Menü ist auch für ausgewählte Elemente auf der Zeichenfläche verfügbar.The same menu is also available for selected elements in the artboard.

Wählen Sie zum Anzeigen des Fensters Dokumentgliederung in der Menüleiste Ansicht > Weitere Fenster > Dokumentgliederung aus.To view the Document Outline window, on the menu bar choose View > Other Windows > Document Outline.

Screenshot: Fenster „Dokumentgliederung“ in Visual Studio

Dies sind die verfügbaren Optionen im Fenster Dokumentgliederung:These are the options available in the Document Outline window:

DokumentgliederungDocument outline

Die Hauptansicht im Dokumentgliederungsfenster zeigt die Hierarchie eines Dokuments in einer Baumstruktur an.The main view in the Document Outline 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.

Anzeigen/AusblendenShow/hide

Zeigt Zeichenflächen-Elemente an, welche Elementen in der Dokumentgliederung entsprechen, oder blendet diese aus.Displays or hides artboard elements that correspond to items in the document outline. Verwenden Sie die Schaltflächen Anzeigen/Ausblenden, die das Symbol eines Auges haben, wenn sie angezeigt werden, oder drücken Sie STRG+H, um Elemente auszublenden, und UMSCHALT+STRG+H, um diese anzuzeigen.Use the Show/hide buttons, which display a symbol of an eye when shown, or press Ctrl+H to hide elements and Shift+Ctrl+H to display them.

Sperren/EntsperrenLock/unlock

Sperrt oder entsperrt Zeichenflächenelemente, die Elementen in der Dokumentgliederung entsprechen.Locks or unlocks artboard elements that correspond to items in the document outline. Gesperrte Elemente können nicht geändert werden.Locked elements can't be modified. Verwenden Sie die Schaltflächen Sperren/Entsperren, die beim Sperren ein Vorhängeschlosssymbol anzeigen, oder drücken Sie STRG+L, um Elemente zu sperren, und UMSCHALT+STRG+L, um diese zu entsperren.Use the Lock/unlock buttons, which display a padlock symbol when locked, or press Ctrl+L to lock elements and Shift+Ctrl+L to unlock them.

Bereich zurücksetzen aufReturn scope to pageRoot

Die Option oben im Fenster Dokumentgliederung, die das Symbol eines Nach-Oben-Pfeils zeigt, gibt die Dokumentgliederung an den vorherigen Bereich zurück.The option at the top of the Document Outline window, which shows an up arrow symbol, returns the document outline 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. Hier sehen Sie, wie es aussieht:Here's what it looks like:

Eigenschaftenfenster

Oben im Fenster Eigenschaften gibt es verschiedene Optionen.There are various options at the top of the Properties window. Sie können den Namen des aktuell ausgewählten Elements ändern, indem Sie das Feld Name verwenden.You can change the name of the currently selected element by using 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 , wodurch ein Blitzschlagsymbol angezeigt wird.To see the list of events for a control, click the Events button, which displays 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.

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

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.

Siehe auchSee also