Anordnen von Objekten

Layoutpanels sind Elemente, mit denen Positionierung, Größe, Abmessung und Anordnung von Elementen gesteuert werden, die in dem jeweiligen Layoutpanel enthalten sind. Layoutpanels fungieren wie Container. Sie erleichtern das Anordnen und Gruppieren der Objekte Ihrer Anwendung. In diesem Abschnitt werden Themen zum Design des Layouts Ihrer Microsoft Expression Blend-Anwendung beschrieben.

Weitere Informationen zum Layoutsystem in Windows Presentation Foundation (WPF)-Anwendungen finden Sie auf der Seite zum Layoutsystem auf MSDN.

LayoutPanel-Elemente

Mit Expression Blend ist das Gestalten sowohl von einfachen als auch komplexen Seitenlayouts kein Problem. Hierzu können Sie verschiedene integrierte Layoutpanels oder eigene benutzerdefinierte Panels verwenden. Bei LayoutPanel-Elementen handelt es sich um Elemente, mit denen Positionierung, Größe, Abmessung und Anordnung von anderen Elementen gesteuert wird, die in den jeweiligen LayoutPanel-Elementen enthalten sind. LayoutPanel-Elemente dienen im Wesentlichen als Container. Der Vorteil von Layoutpanels besteht darin, dass sie Elemente darin anordnen können.

Hinweis:
Nur die Layoutpanel Grid, Canvas, StackPanel, ScrollViewer und Border sind in Silverlight-Projekten verfügbar.

Layoutpanels sind adaptiv, da sie implizit implementiert werden können. Dies bedeutet, dass die Größe des Gesamtlayouts automatisch an die Fenstergröße angepasst wird, was auch als automatische Größenänderung bezeichnet wird. Es gibt verschiedene Szenarien, in denen dies nützlich ist. Dazu zählt beispielsweise das Erstellen von Benutzeroberflächen, die verschiedene Bildschirmgrößen und Auflösungen unterstützen, sowie die Berücksichtigung von Lokalisierungsanforderungen. Sie haben auch die Möglichkeit, feste Größen zu verwenden, indem Sie die Layoutpanels explizit implementieren. In diesem Fall weist das Layout feste Attribute für Width und Height auf, sodass das Layout auch dann die festgelegte Größe beibehält, wenn die Größe des Anwendungsfensters geändert wird.

Hinweis:
Wenn Sie die Eigenschaft Width oder Height eines Objekts von einem festen Wert in Auto ändern, wird die Eigenschaft auf den minimalen Standardwert festgelegt.

Sie können ein Element in einem Layoutpanel auch transformieren, um eine Renderposition nach erfolgtem Layout festzulegen. Dies ist für Animationen nützlich (beispielsweise um ein Element aus den Begrenzungen eines Rasterpanels herauszubewegen, damit dieses mit einer animierten Bewegung die endgültige Position einnimmt). Transformationen erfolgen immer relativ zur Layoutposition. Daher zeigt die Kategorie Transformation im Eigenschaftenpanel als Standardposition den Wert (0,0) an. In den meisten Fällen werden keine Transformationen auf ein Element in einem Layoutpanel angewendet. Die Ausnahme bilden Animationen, bei denen ein Element eine Bewegung relativ zur endgültigen Layoutposition ausführen soll.

In Expression Blend gibt es fünf primäre Layoutpanels, von denen jedes zum Verwalten eines anderen Layouttyps dient. In der folgenden Tabelle werden diese LayoutPanel-Elemente beschrieben.

Panel	Name	Beschreibung
	Raster	Ordnet untergeordnete Elemente in einem äußerst flexiblen Layout von Zeilen und Spalten an, die ein Raster bilden. Weitere Informationen finden Sie unter Verwenden des Rasterpanels.
	Canvas	Ordnet untergeordnete Elemente gemäß absoluten X- und Y-Koordinaten an. Canvas ermöglicht feste Positionen für Elemente auf dem Bildschirm zur Laufzeit – wie auf einer leeren Leinwand, im Englischen Canvas. Weitere Informationen finden Sie unter Verwenden des Canvaslayoutpanels.
	StackPanel	Ordnet untergeordnete Elemente in einer einzelnen Linie an, die horizontal oder vertikal ausgerichtet oder gestapelt (im Englischen stacked) werden können. Weitere Informationen finden Sie unter Verwenden des StackPanel-Layoutpanels.
	WrapPanel	Ordnet untergeordnete Elemente nacheinander von links nach rechts an und nimmt an der rechten Kante des Panels einen Umbruch vor. Dies bedeutet, dass der weitere Inhalt in der nächsten Zeile angeordnet wird, gefolgt von weiteren Zeilen, sodass der Inhalt von links nach rechts und von oben nach unten ausgerichtet ist. Ein WrapPanel-Element kann auch vertikal ausgerichtet sein, sodass die untergeordneten Elemente von oben nach unten und von links nach rechts angeordnet werden. Weitere Informationen finden Sie unter Verwenden des WrapPanel-Layoutpanels.
	DockPanel	Ordnet untergeordnete Elemente an, sodass sie an einer Kante des Panels bleiben oder andocken. Weitere Informationen finden Sie unter Verwenden des "DockPanel"-Layoutpanels.

Andere Layoutcontainer

Andere Layoutcontainer wirken sich auch auf die Anordnung der enthaltenen Elemente aus. Diese Container sind jedoch nicht im Hinblick auf die Unterstützung anspruchsvollerer Benutzeroberflächenszenarien optimiert, für die die primären Layoutpanels weitaus besser geeignet sind. In der folgenden Tabelle werden diese Layoutcontainer beschrieben.

Element	Name	Beschreibung
	Border	Ein einfaches Element, das einen Rahmen und/oder einen Hintergrund um ein Element herum zeichnet. Border kann nur ein einzelnes untergeordnetes Element aufnehmen. In den meisten Fällen empfiehlt es sich, ein Grid-oder Canvas-Panel innerhalb des Rahmens zu platzieren, damit Sie mit mehreren untergeordneten Elementen arbeiten können. Weitere Informationen zu Border finden Sie unter Andere Layoutcontainer.
	BulletDecorator	Ein Element, das nur zwei untergeordnete Elemente aufnehmen kann, bei denen es sich üblicherweise um eine Textzeichenfolge und ein Symbol (das ein Steuerelement wie beispielsweise ein Kontrollkästchen darstellt) handelt. Weitere Informationen zu BulletDecorator finden Sie unter Andere Layoutcontainer.
	Popup	Ein Fenster, das in einer Anwendung vor allen anderen Inhalten, aber relativ zu einem anderen Element gerendert wird. Mithilfe eines Popupmenüs können Sie zusätzliche Informationen und Optionen für Benutzer bereitstellen, die mit dem zugehörigen primären Element der Benutzeroberfläche interagieren, auf das sich das Popupmenü bezieht. Popup nimmt ein einzelnes untergeordnetes Element auf und positioniert sich basierend auf einem Zielelement. Standardmäßig weist ein Popup-Element ein Grid-Panel als einziges untergeordnetes Element auf. Mit dem Grid-Panel können Sie unmittelbar nach dem Zeichnen eines Popup-Elements mit mehreren untergeordneten Elementen arbeiten. In den meisten Fällen müssen Sie ein Popup-Element nicht direkt erstellen. Vielmehr können Sie ein Steuerelement verwenden, das ein Popup in seiner Vorlage verwendet (z. B. ein Popupmenü oder ein Kombinationsfeld). Weitere Informationen zu Popup finden Sie unter Andere Layoutcontainer.
	ScrollViewer	Dieses Element ermöglicht Ihnen das Ausführen eines Bildlaufs für die darin enthaltenen untergeordneten Elemente. Ein ScrollViewer-Element nimmt nur ein einzelnes untergeordnetes Element auf. Daher empfiehlt sich in den meisten Fällen die Verwendung eines Layoutpanels, z. B. eines StackPanel, Canvas-oder Grid-Panels im ScrollViewer-Element. Ein ScrollViewer-Element wird in den Vorlagen von anderen Steuerelementen wie Listenfeldern verwendet, um den Bildlauf in ihren Inhalten zu unterstützen. Wenn der Inhalt in einem ScrollViewer-Element zu umfangreich ist, können Sie das Freistellen des Inhalts aktivieren. Sie können auch steuern, dass Schiebeleisten nicht verfügbar, ausgeblendet oder sichtbar sind oder automatisch bei Bedarf angezeigt werden. Weitere Informationen zu ScrollViewer finden Sie unter Andere Layoutcontainer.
	UniformGrid	Ordnet untergeordnete Elemente innerhalb gleicher oder uniformer Rasterbereiche an. Ein UniformGrid-Element ist keine Variante des Grid-Panels. Es stellt eher ein Kachellayoutelement dar, da es gleichmäßige Abstände zwischen allen enthaltenen Elementen herstellt. Der jeweilige Abstand richtet sich nach der Anzahl der von Ihnen angegebenen Zeilen und Spalten. Wenn Sie einem UniformGrid-Element untergeordnete Elemente hinzufügen, wird jedes Element in einem Bereich platziert, bis das UniformGrid-Element gefüllt ist. Die Anordnung erfolgt dabei von oben links nach unten rechts. Dies ist für Steuerelemente wie Bildlisten nützlich. Weitere Informationen zu UniformGrid finden Sie unter Andere Layoutcontainer.
	Viewbox	Skaliert alle zugehörigen untergeordneten Elemente ähnlich wie ein Zoomsteuerelement. Da ein ViewBox-Element nur ein einzelnes untergeordnetes Element aufnimmt, sollten Sie ein Canvas-oder Grid-Panel darin platzieren, damit Sie den Zoomeffekt für mehrere untergeordnete Elemente nutzen können. Weitere Informationen zu ViewBox finden Sie unter Andere Layoutcontainer.

Stammlayoutcontainer

Im Panel Objekte und Zeitachsen wird ein Element mit der Bezeichnung LayoutRoot angezeigt. Dieses Element stellt das Stammlayoutpanel in einem Expression Blend-Dokument dar. Standardmäßig handelt es sich beim Layoutstamm um ein Rasterpanel. Das Grid-Panel sollte in den meisten Fällen für das Seitenlayout der obersten Ebene ausreichen. Allerdings kann der Layoutstamm in ein anderes LayoutPanel-Element geändert werden. Klicken Sie hierzu mit der rechten Maustaste darauf, zeigen Sie auf Layouttyp ändern, und wählen Sie dann ein anderes LayoutPanel-Element aus. Sie können auch ein Canvas-Panel als LayoutRoot-Standardelement auswählen, indem Sie im Dialogfeld Optionen (im Menü Werkzeuge) im Abschnitt Projekt das Kontrollkästchen Rasterpanel als Standardlayout für neue Elemente verwenden deaktivieren.

Vorgehensweise: Verwenden von untergeordneten Elementen

In Expression Blend wird versucht, untergeordnete Elemente dem Stammpanel (dem obersten Panel) in einem Dokument hinzuzufügen. Falls jedoch an anderer Stelle in der Objektstruktur ein anderer Layoutcontainer aktiv ist, wird das untergeordnete Element diesem Container hinzugefügt. Sie können ein Element aktivieren, indem Sie auf das Layoutpanel klicken. Eine blaue Hervorhebung um das Panel herum gibt an, dass es sich dabei jetzt um das aktive Element handelt. Die blaue Hervorhebung wird sowohl auf der Zeichenfläche als auch im Panel Objekte und Zeitachsen angezeigt. Wenn Sie ein neues Panel erstellen und dann sofort untergeordnete Elemente innerhalb der Panelrahmen zeichnen, werden diese direkt im gerade erstellten Panel gezeichnet. Dies liegt daran, dass ein neu erstelltes Panel automatisch zum aktiven Element wird.

Das colors2-Objekt "StackPanel" ist das aktuelle aktive Layoutpanel, dem neue untergeordnete Objekte hinzugefügt werden.

In Expression Blend wurde auch das Ziehen von untergeordneten Elementen zwischen Panels vereinfacht, um deren Neuzuordnung zu einem anderen Layoutcontainer vorzunehmen. Im folgenden Bild wird eine orangefarbene Ellipse dargestellt, die vom Stammlayout-Rasterpanel in ein anderes Rasterpanel verschoben wird. Wenn das Panel ein untergeordnetes Element aufnehmen kann, werden ein gestricheltes BoundingBox-Element und eine Textmeldung angezeigt. Halten Sie die ALT-TASTE gedrückt, und lassen Sie dann die Maustaste los, um die Neuzuordnungsaktion abzuschließen.

Neuzuordnung eines Objekts vom Grid-Stammpanel zu einem anderen Grid-Panel.

Komplexes Layout

Häufig ist mehr Flexibilität beim Gestalten einer Seite erforderlich, sodass ein einzelnes Layoutpanel nicht ausreicht. Eine Methode zum Gestalten komplexer Layouts besteht darin, LayoutPanel-Elemente als Container für andere LayoutPanel-Elemente zu verwenden. Sie könnten beispielsweise ein DockPanel-Element innerhalb des LayoutRoot-Elements (standardmäßig wird hierfür das Grid-Panel genutzt) verwenden. Hiermit wird eine Seite in verschiedene Bereiche untergliedert, in der jeder Bereich typischerweise mindestens ein Steuerelement enthält.

Weitere Informationen zum Programmieren mit Layouts finden Sie im Abschnitt zur .NET-Entwicklung im Windows Software Development Kit (SDK) (möglicherweise in englischer Sprache).