Arbeiten mit Elementen im XAML-Designer
Sie können Ihrer App in XAML im Code oder unter Verwendung des XAML-Designers Elemente hinzufügen (Steuerelemente, Layouts und Formen). Dieses Thema beschreibt, wie Sie mit Elementen im XAML-Designer arbeiten.
Einem Layout ein Element hinzufügen
Layout ist die Veränderung der Größe und Position von Elementen auf einer Benutzeroberfläche. Um visuelle Elemente zu positionieren, müssen Sie sie in einen Bereich eines Layouts einfügen. Ein Panel verfügt über eine untergeordnete Eigenschaft, die eine Auflistung von FrameworkElement-Typen ist. Sie können verschiedene untergeordnete Panel-Elemente verwenden, wie z. B. Canvas, StackPanel und Grid, um sie als Layoutcontainer zu verwenden und sie auf einer Seite zu positionieren und anzuordnen.
Standardmäßig wird ein Grid-Bereich als der Layoutcontainer auf der obersten Ebene innerhalb eines Seitendokuments in einer Für Windows unter Verwendung von JavaScript erstellte Windows Store-App verwendet. Sie können Layoutbereiche, Steuerelemente oder andere Elemente innerhalb der obersten Ebene des Seitenlayouts hinzufügen.
Einem Layout ein Element hinzufügen
Führen Sie im Dokumentgliederungsfenster eines Visual Studio-Projekts einen der folgenden Schritte durch:
Doppelklicken Sie auf ein Element im Werkzeugkasten (oder wählen Sie ein Element im Werkzeugkasten aus, und drücken Sie die EINGABETASTE).
Ziehen Sie ein Element aus dem Werkzeugkasten auf die Zeichenfläche und legen Sie es dort ab.
Klicken Sie im Werkzeugkasten auf eines der Zeichenwerkzeuge (z. B. Ellipse oder Rechteck), und zeichnen Sie dann ein Element im aktiven Bereich.
.gif "Hh965587.collapse_all(de-de,VS.120).gif")
Die Ebenenreihenfolge von Elementen ändern
Gibt es zwei Elemente auf der Zeichenfläche im XAML-Designer, wird ein Element vor dem anderen in der Ebenenreihenfolge angezeigt. Am Ende der Liste von Elementen im Dokumentgliederungsfenster befindet sich das vorderste Element (es sei denn, die ZIndex-Eigenschaft für ein Element wurde festgelegt). Wenn Sie ein Element in ein Dokument oder Layoutcontainer einfügen, wird das Element automatisch vor anderen Elementen im aktiven Containerelement platziert. Um die Reihenfolge von Elementen zu ändern, können Sie die Reihenfolge-Befehle verwenden oder die Elemente in der Objektgliederung im Dokumentgliederungsfenster ziehen.
So ändern Sie die Ebenenreihenfolge
Führen Sie eine der folgenden Aktionen aus:
Im Fenster Dokumentgliederung ziehen Sie die Elemente nach oben oder nach unten, um die gewünschte Ebenenreihenfolge zu erstellen.
Klicken Sie mit der rechten Maustaste auf das Element im Dokumentgliederungsfenster oder auf der Zeichenfläche, für das Sie die Ebenenreihenfolge ändern möchten. Verweisen Sie auf die Reihenfolge, und dann treffen Sie eine der folgenden Auswahlen:
In den Vordergrund, um das Element in der Reihenfolge ganz nach vorne zu bewegen.
Eine Ebene nach vorne, um das Element in der Reihenfolge eine Ebene nach vorne zu bewegen.
Eine Ebene nach hinten, um das Element in der Reihenfolge eine Ebene nach hinten zu bewegen.
In den Hintergrund, um das Element in der Reihenfolge ganz nach hinten zu bewegen.
Ändern Sie die Eigenschaft ZIndex im Abschnitt Layout im Eigenschaftenfenster. Bei überlappenden Elementen hat die ZIndex-Eigenschaft Vorrang vor der Reihenfolge der Elemente, die im Dokumentgliederungsfenster angezeigt wird. Ein Element mit einem niedrigeren ZIndex-Wert wird vorne angezeigt, wenn sich Elemente überlappen.
Die Ausrichtung eines Elements ändern
Sie können Elemente auf der Zeichenfläche ausrichten, indem Sie entweder Menübefehle verwenden oder indem Sie Elemente auf Ausrichtungslinien ziehen.
Eine Ausrichtungslinie ist ein visueller Hinweis, an dem Sie ein Element relativ zu anderen Elementen in der App ausrichten können.
So richten Sie zwei oder mehr Elemente mithilfe von Menübefehlen aus
Wählen Sie die Elemente aus, welche Sie ausrichten möchten. Sie können mehr als ein Element auswählen, indem Sie die STRG-TASTE gedrückt halten, während Sie die Elemente auswählen.
Wählen Sie eine der folgenden Eigenschaften unter HorizontalAlignment im Layout-Abschnitt des Eigenschaftenfensters aus: Links, Zentriert, Rechts oder Strecken.
Wählen Sie eine der folgenden Eigenschaften unter VerticalAlignment im Layout-Abschnitt des Eigenschaftenfensters aus: Oben, Zentriert, Rechts oder Strecken.
Zwei oder mehr Elemente mithilfe von Ausrichtungslinien ausrichten
Im XAML-Designer, in einem Layout mit mindestens zwei Elementen: Ziehen Sie eines der Elemente oder ändern Sie dessen Größen, sodass die Kante an einem anderen Element ausgerichtet ist.
Wenn die Kanten ausgerichtet sind, wird eine Ausrichtungsgrenze angezeigt, um die Ausrichtung anzugeben. Die Ausrichtungsgrenze ist eine rot-gestrichelte Linie. Die Ausrichtungsgrenzen werden nur angezeigt, wenn Andocken an Ausrichtungslinien aktiviert ist. Als Abbildung einer Zeichenfläche, welche die Ausrichtungsgrenzen anzeigt, sehen Sie Erstellen einer Benutzeroberfläche mit dem XAML-Designer.
Die Ränder eines Elements ändern
Die Ränder im XAML-Designer bestimmen den Umfang des Leerraums, der sich um einem Element auf der Zeichenfläche befindet. Ränder geben beispielsweise den Raum zwischen den äußeren Kanten eines Elements und den Grenzen eines Grid-Bereichs an, welcher das Element enthält. Ränder geben auch den vorhandenen Raum zwischen Elementen an, die in einem StackPanel enthalten sind.
So ändern Sie die Ränder eines Elements
Wählen Sie das Element aus, dessen Ränder Sie ändern möchten.
Unter Layout im Eigenschaftenfenster ändern Sie den Wert (in Pixeln oder geräteunabhängigen Einheiten, die ungefähr 1/96 Zoll betragen) für jede der Rand-Eigenschaften (Oben, Links, Rechts oder Unten).
So ändern Sie die Ränder eines Elements auf der Zeichenfläche
Um die Ränder eines Elements relativ zu dessen Layoutcontainers zu ändern, klicken Sie auf die Randfunktionsindikatoren, die um das Element auf der Zeichenfläche angezeigt werden, wenn das Element ausgewählt ist und sich innerhalb eines Layoutcontainers befindet. Eine Illustration, welche die Randfunktionsindikatoren anzeigt, finden Sie unter Erstellen einer Benutzeroberfläche mit dem XAML-Designer.
Wenn ein Randfunktionsindikator geöffnet ist, sei es vertikal oder horizontal, dann ist besagter Rand noch nicht festgelegt. Wenn ein Randfunktionsindikator geschlossen ist, dann ist besagter Rand festgelegt.
Wenn Sie einen Randfunktionsindikator öffnen und der gegenüber liegende Rand nicht festgelegt ist, wird für den gegenüber liegenden Rand der richtige Wert gemäß der Position des Elements auf der Zeichenfläche festgelegt. Für gegenüber liegende Ränder, wie die Ränder Links und Rechts, wird stets mindestens eine Eigenschaft festgelegt.
Wichtig
Elemente, die innerhalb irgendwelcher Layoutcontainers platziert werden, wie beispielsweise ein Canvas, haben keine Randfunktionsindikatoren. Elemente, die innerhalb eines StackPanel platziert werden, haben Funktionsindikatoren für entweder die linken und rechten Ränder oder für die oberen und unteren Ränder, abhängig von der Ausrichtung des StackPanel.
Elemente gruppieren und dessen Gruppierung aufheben
Durch die Gruppierung von zwei oder mehr Elementen im XAML-Designer wird ein neuer Layoutcontainer erstellt und die betreffenden Elemente innerhalb dieses Containers platziert. Durch die gemeinsame Platzierung von zwei oder mehr Elementen in einem Layoutcontainer wird Ihnen ermöglicht, die Gruppe einfach auszuwählen, zu bewegen und zu transformieren, so als ob die Elemente innerhalb dieser Gruppe ein Element wären. Die Gruppierung ist auch zur Bestimmung von Elementen nützlich, die in irgend einer Weise im Verhältnis zueinander stehen, wie die Schaltflächen, die ein Navigationselement ergeben. Wenn Sie die Gruppierung für Elemente aufheben, löschen Sie einfach den Layoutcontainer, welcher die Elemente enthielt.
So gruppieren Sie Elemente in einen neuen Layoutcontainer
Wählen Sie die Elemente aus, welche Sie gruppieren möchten. (Um mehrere Elemente auszuwählen, halten Sie die STRG-TASTE gedrückt, während Sie darauf klicken.)
Klicken Sie mit der rechten Maustaste auf die ausgewählten Elemente, zeigen Sie auf die Option Gruppieren in, und wählen Sie dann den Typ des Layoutcontainers aus, in dem sich nach Ihrem Wunsch die Gruppe befinden soll.
Tipp
Wenn Sie Viewbox T:Windows.UI.Xaml.Controls.Border oder ScrollViewer auswählen, um Ihre Elemente zu gruppieren, werden die Elemente in einem neuen Grid-Bereich innerhalb des Viewbox, Border oder des ScrollViewer platziert. Wenn Sie die Gruppierung von Elementen in einem dieser Layoutcontainer aufheben, werden nur das Viewbox, der Border oder der ScrollViewer gelöscht, und der Bereich Grid wird beibehalten. Löschen Sie den Grid-Bereich, heben Sie die Gruppierung der Elemente erneut auf.
So heben Sie die Gruppierung von Elementen auf und löschen das Layout
- Klicken Sie mit der rechten Maustaste auf die Gruppierung, die Sie aufheben möchten, und klicken Sie auf Gruppierung aufheben.
Sie können auch Elemente gruppieren oder deren Gruppierung aufheben, indem Sie mit de rechten Maustaste auf ausgewählte Elemente im Dokumentgliederungsfenster klicken, und die Optionen Gruppieren in oder Gruppierung aufheben anklicken.
Zurücksetzen des Elementlayouts
Sie können die Standardwerte für spezifische Layouteigenschaften eines Elements wiederherstellen, indem Sie den Befehl Layout zurücksetzen verwenden. Mit diesem Befehl können Sie den Rand, die Ausrichtung, die Breite, Höhe sowie Größe eines Elements zurücksetzen, entweder für jedes Element einzeln oder zusammen.
So setzen Sie das Elementlayout zurück
- Klicken Sie im Dokumentgliederungsfenster oder auf der Zeichenfläche mit der rechten Maustaste auf das Element, wählen Sie Layout zurücksetzen, und klicken Sie dann auf die Eigenschaft, die Sie zurücksetzen möchten (oder klicken Sie auf Alle, um alle Layouteigenschaften für das Element zurückzusetzen).