Freigeben über


Rasterpanel

Diese Seite bezieht sich auf WPF und Silverlight 2

Das Rasterpanel ist im Vergleich zu anderen Layoutcontainern, die für speziellere Layoutfunktionen konzipiert sind, der flexibelste Layoutcontainer. Microsoft Expression Blend bietet zwei Layoutbearbeitungsmodi für die Arbeit mit Rasterpanels:

  • Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(de-de,Expression.10).png Der Layoutmodus Canvas (Standardmodus) stellt Bearbeitungsoptionen wie in einem Canvaspanel bereit. Wenn Sie in diesem Modus von Ihnen festgelegte Spalten- und Zeilenunterteiler Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(de-de,Expression.10).png verschieben, bleiben die Elemente in diesen Zeilen und Spalten an ihrem Ort.

  • Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(de-de,Expression.10).png Der Layoutmodus Raster (erweitert) bietet erweiterte Layoutfunktionen. In diesem Modus entspricht das Verhalten des Rasterpanels zur Designzeit dem Laufzeitverhalten des Rasters.

  • Sie können zwischen diesen beiden Modi wechseln, indem Sie bei ausgewähltem Rasterpanel oben links auf das Modussymbol klicken, oder indem Sie im Dialogfeld Optionen (im Menü Werkzeuge) im Abschnitt Zeichenfläche das Kontrollkästchen Layoutmodus "Raster" verwenden aktivieren bzw. deaktivieren.

Layoutmodi für die Verwendung von Rasterpanels

Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(de-de,Expression.10).png

Mithilfe des Layoutcontainer-Untermenüs oder der Objektbibliothek Cc295203.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png in der Werkzeugpalette können Sie einem Dokument ein Rasterpanel hinzufügen.

Anordnung von Objekten in einem Rasterpanel, das in drei Zeilen und drei Spalten unterteilt wurde, dargestellt im Layoutmodus "Raster"

Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(de-de,Expression.10).png

Positionieren, Ändern der Größe und Anordnen

Im Mittelpunkt des Layouts in einem Rasterpanel steht die effektive Positionierung, Größenfestlegung und Anordnung von Elementen durch Ausrichtung, Ränder sowie die Width-Eigenschaft (Breite) und die Height-Eigenschaft (Höhe).

  • Ausrichtung   Durch die Ausrichtung wird festgelegt, welche Position ein Element bezogen auf sein übergeordnete Element einnimmt.

  • Ränder   Mit einem Rand wird die Größe des freien Platzes um das Steuerelement herum festgelegt, zwischen der Außenseite des untergeordneten Elements und den Begrenzungen des Panels.

  • Breite und Höhe   Feste Werte, gemessen in Pixel (oder in geräteunabhängigen Einheiten von etwa 1/96 Zoll). Für diese Eigenschaften kann Auto festgelegt werden, sodass die Größenänderung von untergeordneten Elementen automatisch gemäß der Größenänderung des übergeordneten Panels erfolgt.

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Anordnen von untergeordneten Elementen

Sie können Elemente innerhalb eines Rasters anordnen, indem Sie das Raster in Bereiche unterteilen. Verwenden Sie hierzu Spalten- und Zeilenunterteiler Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(de-de,Expression.10).png, um mehrere Zeilen und Spalten zum Definieren von Bereichen zu erstellen, in denen Sie Elemente innerhalb des Rasters anordnen können. Wenn das Rasterpanel das aktive Element des Dokuments ist, werden blaue Lineale entlang des oberen und des linken Rands des Rasters angezeigt. Wenn Sie den Mauszeiger mit dem Auswahlwerkzeug Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,Expression.10).png über die Lineale bewegen, ändert sich der Cursor und wird als Pfeil mit einem Pluszeichen (+) Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(de-de,Expression.10).png angezeigt. Eine orangefarbene Linie zeigt, wo eine Spalte oder Zeile hinzugefügt wird. Wenn Sie auf eine beliebige Stelle des oberen Lineals klicken, wird an dieser Position dem Raster eine Spalte hinzugefügt. Durch Klicken auf das linke Lineal wird eine Zeile hinzugefügt.

Hinzufügen eines Rasterunterteilers

Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(de-de,Expression.10).png

Sie können untergeordnete Elemente innerhalb eines Rasterpanels so zeichnen, dass die Elemente überlappen. Ob überlappende Elemente sichtbar sind, hängt von ihrer Z-Reihenfolge (der Reihenfolge, in der die Elemente in einem übergeordneten Element gezeichnet oder platziert wurden) ab. Sie können die Z-Reihenfolge der Elemente mit dem Befehl Sortieren im Menü Objekt ändern. Sie können aber auch im Interaktionspanel unter Objekte und Zeitachsen mit der rechten Maustaste auf ein Element klicken, dann auf Sortieren zeigen und danach auf den gewünschten Befehl klicken. Untergeordnete Elemente können sich auch über mehrere Spalten oder Zeilen erstrecken. Sie können auch die Andockoptionen aktivieren, um Objekte durch das Andocken an Ausrichtungslinien besser anordnen zu können. Durch das Andocken können Sie Objekte auf die Zeichenfläche ziehen und sie an den Rändern, der Basislinie (bei Textobjekten) oder der Ausrichtung (rote gestrichelte Linie) anderer Objekte innerhalb desselben Containerelements, z. B. eines LayoutPanel-Elements, oder an den Spalten- oder Zeilenunterteilern in einem Rasterpanel andocken.

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Ändern der Größe von Zeilen und Spalten

Wenn Sie sich im Layoutmodus Raster eines Rasterpanels befinden, werden entlang der Lineale am oberen und linken Rand des Rasterpanels Schlosssymbole angezeigt. Mithilfe dieser Schlosssymbole können Sie die Art der Größenanpassung festlegen, die für die Zeilen und Spalten des Rasters verwendet wird. Sie können Höhenwerte für Zeilen und Breitenwerte für Spalten festlegen. Es stehen drei verschiedene Optionen für die Größenanpassung von Zeilen und Spalten in einem Raster zur Verfügung, und jede dieser Optionen wirkt sich wiederum auf die Anordnung der untergeordneten Elemente innerhalb des Rasters aus. Diese Größenänderungsoptionen lauten wie folgt:

  • Feste Größe  Verwendet Pixelwerte (px) und wird festgelegt, indem Sie auf das Schlosssymbol klicken, um die Einstellung Pixelgröße (die geschlossene Position) Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(de-de,Expression.10).png festzulegen. Eine feste Größe bedeutet, dass die Größe der Zeile oder Spalte nicht geändert wird.

    Cc295203.alert_note(de-de,Expression.10).gifHinweis:

    In WPF-Anwendungen (Windows Presentation Foundation) (wie die mit Expression Blend erstellten) bezieht sich Pixel auf geräteabhängige Pixel oder geräteunabhängige Einheiten, die der Größe eines Pixels auf einem Monitor entsprechen, der auf eine Bildschirmauflösung von 96 DPI festgelegt ist. Jede Einheit beträgt etwa 1/96 Zoll, unabhängig von der Bildschirmgröße oder -auflösung.

  • Größenanpassung mit Sternvariabler  Verwendet Sternwerte (*) und wird festgelegt, indem Sie auf das Schlosssymbol klicken, um die Einstellung Sterngröße (die nicht verschlossene Position) Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(de-de,Expression.10).png festzulegen. Die Größenanpassung mit Sternvariabler hat eine ähnliche Wirkung wie die prozentuale Größenanpassung in HTML.

  • Automatische Größe  Verwendet keine feste Einstellung für die Width-Eigenschaft (Breite) und die Height-Eigenschaft (Höhe) und wird festgelegt, indem Sie auf das Schlosssymbol klicken, um die Einstellung Automatische AnpassungCc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(de-de,Expression.10).png festzulegen. Die automatische Anpassung bedeutet, dass die Größe der Elemente innerhalb des Rasterpanels angepasst wird, wenn sich die Größe des übergeordneten Elements ändert.

Größenanpassung mit Sternvariabler und automatische Anpassung für verschiedene Spalten in einem Rasterpanel.

Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(de-de,Expression.10).png

Wenn ein Rasterunterteiler Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(de-de,Expression.10).png auf der Zeichenfläche aktiviert ist, können Sie das Eigenschaftenpanel verwenden, um die Optionen für die Größenänderung und die Width-Eigenschaft (Breite) auszuwählen, wenn Sie die Sterngrößenanpassung oder eine feste Größe verwenden. Sie können im Eigenschaftenpanel auch die MaxWidth-Eigenschaft (Maximale Breite) und die MinWidth-Eigenschaft (Minimale Breite) eines Rasterunterteilers festlegen.

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Positionieren von untergeordneten Elementen

Im Layoutmodus Canvas können Sie Elemente visuell positionieren, indem Sie Elemente direkt auf der Zeichenfläche innerhalb eines Rasterpanels ziehen (auch außerhalb der Grenzen). Sie können im Eigenschaftenpanel unter Layout aber auch exakte Werte für die Position eingeben.

Im Layoutmodus Raster legen Sie die Positionen von untergeordneten Elementen innerhalb eines Rasters fest, indem Sie die Ränder für jedes Element festlegen. Mit den Rändern legen Sie die Größe des Versatzes eines Elements von den Zeilen und Spalten, die das Raster definieren, oder von den Kanten des Rasters innerhalb des Rasterpanels fest. Ränder werden festgelegt, wenn Sie ein untergeordnetes Element in einem Raster an die gewünschte Position ziehen. Sie geben den Abstand von der Kante des ausgewählten Elements zur nächsten Rasterlinie (Zeile oder Spalte) wieder. Diese werden durch Klicken auf die Funktionsindikatoren für den Rand (Knoten) festgelegt. Wenn ein Funktionsindikator für den Rand wie Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(de-de,Expression.10).png oder Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(de-de,Expression.10).png geöffnet ist, dann ist der jeweilige Rand nicht festgelegt. Wenn ein Funktionsindikator für den Rand wie Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(de-de,Expression.10).png oder Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(de-de,Expression.10).png geschlossen ist, dann ist der jeweilige Rand festgelegt. Wenn die Größe des Rasters zur Laufzeit geändert wird, bleiben alle Elemente an ihrem Ort, für die keine Ränder festgelegt wurden. Elemente, die einen Rand aufweisen, werden bei der Größenänderung gemeinsam mit dem Rand bewegt.

In Expression Blend wird außerdem eine einfache Regel verwendet, um die Standardausrichtung festzulegen – wenn das untergeordnete Element, das Sie zeichnen oder dessen Größe Sie ändern, die Mitte einer Zeile oder Spalte kreuzt, wird für Width und HeightAuto festgelegt, sonst ist diese fest. Sie können auch eine Ausrichtung festlegen, die angibt, ob der Rand bei Größenänderungen des Rasters erzwungen wird oder nicht. Die Ausrichtung wird innerhalb des Rasters als durchgezogene Linie (Ausrichtung festgelegt) oder gestrichelte Linie (keine Ausrichtung festgelegt) dargestellt, wie im folgenden Bild gezeigt.

Eine Schaltfläche in einem Rasterpanel, die links und rechts gebunden ist (Ränder festgelegt – beachten Sie den für den Rand angegebenen Wert), oben und unten jedoch nicht (Ränder nicht festgelegt).

Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(de-de,Expression.10).png

  • Horizontale Ausrichtung

    • Links Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(de-de,Expression.10).png. Verankert links, aber streckt bei einer Größenänderung nach rechts.

    • ZentrierenCc295203.02978741-8e12-476d-afa7-165b613ea515(de-de,Expression.10).png. Verankert unabhängig von Größenänderungen immer am horizontalen Mittelpunkt.

    • Rechts Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(de-de,Expression.10).png. Verankert rechts, aber streckt bei einer Größenänderung nach links.

    • StreckenCc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(de-de,Expression.10).png. Streckt bei einer Größenänderung in beide horizontalen Richtungen.

  • Vertikale Ausrichtung

    • UntenCc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(de-de,Expression.10).png. Verankert unten, aber streckt bei einer Größenänderung nach oben.

    • ZentrierenCc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(de-de,Expression.10).png. Verankert unabhängig von Größenänderungen immer am vertikalen Mittelpunkt.

    • ObenCc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(de-de,Expression.10).png. Verankert oben, aber streckt bei einer Größenänderung nach unten.

    • StreckenCc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(de-de,Expression.10).png. Streckt bei einer Größenänderung in beide vertikalen Richtungen.

  • Randeinstellungen   Feste Werte, gemessen in Pixel (oder in geräteunabhängigen Einheiten von etwa 1/96 Zoll), für Ränder oben, links, rechts und unten. Diese werden festgelegt, wenn Sie ein untergeordnetes Element in einem Raster in Position ziehen. Sie stellen den Abstand von der Kante des ausgewählten Elements zur nächsten Rasterlinie dar.

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Ändern der Größe von untergeordneten Elementen

Es gibt zwei primäre Optionen für die Größenänderung, die Sie für untergeordnete Elemente verwenden können: feste Größe oder automatische Größenänderung. Elemente mit fester Größe weisen bestimmte Werte für die Breite und die Höhe auf, die in der Kategorie Layout festgelegt werden. Bei Elementen mit automatischer Größenänderung sind die Werte für die Breite und die Höhe auf Auto festgelegt. Die Größe wird automatisch gemäß der Größenänderung des übergeordneten Panels geändert.

  • "MinWidth" und "MinHeight"   Der kleinste Wert, auf den die Größe eines Elements innerhalb einer Zeile oder Spalte geändert oder skaliert werden kann.

  • "MaxWidth" und "MaxHeight"   Der höchste Wert, auf den die Größe eines Elements innerhalb einer Zeile oder Spalte geändert oder skaliert werden kann. Dieser Wert kann auf eine unendliche Größe festgelegt werden, wenn Sie keine maximale Größe angeben möchten.

  • Inhalt freistellen   Legt fest, ob das übergeordnete Panel seine untergeordneten Elemente freistellen soll.

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

GridSplitter-Steuerelement

GridSplitterCc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(de-de,Expression.10).png ist ein Steuerelement, über das der Benutzer die Möglichkeit hat, manuell die Größe von Teilen eines Rasters zur Laufzeit zu ändern. GridSplitter steht in der Objektbibliothek zur Verfügung.

Weitere Informationen zum Rasterpanel, dem GridSplitter-Steuerelement oder zur Erstellung benutzerdefinierter Layoutpanels finden Sie im Abschnitt .NET Development des Windows Software Development Kit (SDK) (möglicherweise in englischer Sprache).

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Siehe auch

Konzepte

Hinzufügen oder Entfernen einer Zeile oder Spalte

Ändern der Option für die Größenänderung einer Zeile oder Spalte