Erstellen von dynamischen Layouts in Canvas-Apps

Bevor Sie eine Canvas-App in Power Apps erstellen, geben Sie an, ob die App auf ein Smartphone oder ein Tablet zugeschnitten werden soll. Diese Auswahl bestimmt die Größe und Form des Zeichenbereichs, auf dem Sie Ihre App erstellen.

Nachdem Sie diese Auswahl getroffen haben, können Sie einige weitere Optionen treffen, wenn Sie "Einstellungen anzeigen"> auswählen. Sie können das Hoch- oder Querformat und die Bildschirmgröße (nur Tablet) wählen. Sie können auch das Seitenverhältnis sperren oder entsperren und die Gerätedrehung unterstützen (oder nicht).

Diese Optionen unterliegen jeder anderen Auswahl, die Sie beim Entwerfen von Bildschirmlayouts treffen. Wenn Ihre App auf einem Gerät mit einer anderen Größe oder im Web ausgeführt wird, wird das gesamte Layout so skaliert, dass sie auf den Bildschirm passt, auf dem die App ausgeführt wird. Wenn eine für ein Telefon entwickelte App beispielsweise in einem großen Browserfenster ausgeführt wird, wird die App zum Ausgleich skaliert und sieht für ihren Speicherplatz übergroß aus. Die App kann die zusätzlichen Pixel nicht nutzen, indem mehr Steuerelemente oder mehr Inhalt angezeigt werden.

Wenn Sie ein reaktionsfähiges Layout erstellen, können Steuerelemente auf verschiedene Geräte oder Fenstergrößen reagieren, sodass sich verschiedene Oberflächen natürlicher fühlen. Um ein reaktionsfähiges Layout zu erzielen, passen Sie einige Einstellungen an und schreiben Ausdrücke in der gesamten App.

Passend skalieren deaktivieren

Sie können jeden Bildschirm so konfigurieren, dass sich das Layout an den tatsächlichen Platz anpasst, in dem die App ausgeführt wird.

Sie aktivieren die Reaktionsfähigkeit, indem Sie die Einstellung " Skalierung anpassen" der App deaktivieren, die standardmäßig aktiviert ist. Wenn Sie diese Einstellung deaktivieren, wird auch Seitenverhältnis sperren deaktiviert, weil Sie nicht mehr für eine bestimmte Bildschirmform entwerfen. (Sie können weiterhin angeben, ob Ihre App die Gerätedrehung unterstützt.)

Damit Ihre App reaktionsfähig ist, müssen Sie zusätzliche Schritte ausführen, aber diese Änderung ist der erste Schritt, um die Reaktionsfähigkeit zu ermöglichen.

Grundlegendes zu App- und Bildschirmabmessungen

Um die Layouts Ihrer App auf Änderungen in den Bildschirmabmessungen zu reagieren, schreiben Sie Formeln, die die Eigenschaften "Width" und "Height " des Bildschirms verwenden. Um diese Eigenschaften anzuzeigen, öffnen Sie eine App in Power Apps Studio, und wählen Sie dann einen Bildschirm aus. Die Standardformeln für diese Eigenschaften werden auf der Registerkarte "Erweitert " im rechten Bereich angezeigt.

Breite = Max(App.Width, App.DesignWidth)

Höhe = Max(App.Height, App.DesignHeight)

Diese Formeln beziehen sich auf die Eigenschaften "Width", "Height", " DesignWidth" und " DesignHeight " der App. Die Eigenschaften "Width " und "Height " der App entsprechen den Abmessungen des Geräte- oder Browserfensters, in dem Ihre App ausgeführt wird. Wenn der Benutzer die Größe des Browserfensters ändert (oder das Gerät dreht, wenn Sie die Sperrausrichtung deaktiviert haben), ändern sich die Werte dieser Eigenschaften dynamisch. Die Formeln in den Eigenschaften "Width " und "Height " des Bildschirms werden neu ausgewertet, wenn sich diese Werte ändern.

Die Eigenschaften DesignWidth und DesignHeight stammen aus den Dimensionen, die Sie im Anzeigebereich der Einstellungen angeben. Wenn Sie beispielsweise das Telefonlayout im Hochformat auswählen, ist DesignWidth 640, und DesignHeight ist 1136.

Während sie in den Formeln für die Eigenschaften "Breite " und "Höhe " des Bildschirms verwendet werden, können Sie sich DesignWidth und DesignHeight als mindestmaße vorstellen, für die Sie die App entwerfen. Wenn der tatsächliche Für Ihre App verfügbare Bereich noch kleiner als diese Mindestabmessungen ist, stellen die Formeln für die Eigenschaften "Breite " und "Höhe " des Bildschirms sicher, dass ihre Werte nicht kleiner als mindestwerte werden. In diesem Fall muss der Benutzer scrollen, um den gesamten Inhalt des Bildschirms anzuzeigen.

Nachdem Sie die DesignWidth - und DesignHeight-Eigenschaft Ihrer App festgelegt haben, müssen Sie (in den meisten Fällen) keine Standardformeln für die Eigenschaften "Breite " und "Höhe " jedes Bildschirms ändern. Später werden in diesem Thema Fälle erläutert, in denen Sie diese Formeln anpassen möchten.

Verwenden von Formeln für dynamisches Layout

Um ein responsives Design zu erstellen, bestimmen und positionieren Sie jedes Steuerelement, indem Sie Formeln anstelle von absoluten (konstanten) Koordinatenwerten verwenden. Diese Formeln geben die Position und Größe jedes Steuerelements hinsichtlich der Gesamtbildgröße oder relativ zu anderen Steuerelementen auf dem Bildschirm an.

Im einfachsten Fall füllt ein Steuerelement einen ganzen Bildschirm. Um diesen Effekt zu erstellen, legen Sie die Eigenschaften des Steuerelements auf diese Werte fest:

Diese Formeln verwenden den Operator Übergeordnetes Element. Für ein Steuerelement, das direkt auf einem Bildschirm platziert wird, bezieht sich parent auf den Bildschirm. Bei diesen Eigenschaftswerten wird das Steuerelement in der oberen linken Ecke des Bildschirms (0, 0) angezeigt und hat dieselbe Breite und Höhe wie der Bildschirm.

Später in diesem Thema wenden Sie diese Prinzipien (und den Eltern-Operator) an, um Steuerelemente in anderen Containern zu positionieren, wie zum Beispiel Galerien, Gruppensteuerelemente und Komponenten.

Alternativ kann das Steuerelement nur die obere Hälfte des Bildschirms ausfüllen. Um diesen Effekt zu erstellen, legen Sie die Height-Eigenschaft auf "Parent.Height / 2" fest, und lassen Sie die anderen Formeln unverändert.

Wenn Sie möchten, dass ein zweites Steuerelement die untere Hälfte desselben Bildschirms ausfüllt, können Sie mindestens zwei weitere Ansätze zum Erstellen seiner Formeln verwenden. Aus Gründen der Einfachheit können Sie diesen Ansatz verwenden:

Diese Konfiguration würde den gewünschten Effekt erzielen, aber Sie müssen jede Formel bearbeiten, wenn Sie Ihre Meinung zu den relativen Größen der Steuerelemente geändert haben. Sie können z. B. entscheiden, dass das obere Steuerelement nur das obere ein Drittel des Bildschirms belegen soll, wobei das untere Steuerelement die unteren zwei Drittel ausfüllt.

Um diesen Effekt zu erstellen, müssen Sie die Height-Eigenschaft des Steuerelements "Upper " und die Eigenschaften "Y " und "Height " des Steuerelements "Lower " aktualisieren. Erwägen Sie stattdessen das Schreiben der Formeln für das Untere Steuerelement in Bezug auf das Obere Steuerelement (und sich selbst), wie in diesem Beispiel:

Bei diesen Formeln müssen Sie nur die Height-Eigenschaft des Oberen Steuerelements ändern, um einen anderen Bruchteil der Bildschirmhöhe auszudrücken. Das Untere Steuerelement verschiebt und ändert die Größe automatisch, um die Änderung zu berücksichtigen.

Sie können diese Formelmuster verwenden, um allgemeine Layoutbeziehungen zwischen einem Steuerelement, dem Namen C und dem übergeordneten oder gleichgeordneten Steuerelement mit dem Namen D auszudrücken.

Beziehung zwischen C und dem übergeordneten Element	Eigentum	Formula	Abbildung
C füllt die Breite des übergeordneten Elements mit einem Rand von N	X	N
	Breite	Parent.Width - (N * 2)
C füllt die Höhe des übergeordneten Elements und hat einen Rand von N	Y	N
	Höhe	Parent.Height - (N * 2)
C ausgerichtet am rechten Rand des übergeordneten Elements mit dem Rand von N	X	Parent.Width - (C.Width + N)
C ausgerichtet am unteren Rand des übergeordneten Elements mit dem Rand von N	Y	Parent.Height - (C.Height + N)
C horizontal auf dem übergeordneten Element zentriert	X	(Parent.Width - C.Width) / 2
C vertikal auf dem übergeordneten Element zentriert	Y	(Parent.Height - C.Height) / 2

Beziehung zwischen C und D	Eigentum	Formula	Abbildung
C horizontal ausgerichtet mit D und der gleichen Breite wie D	X	D.X
	Breite	D.Width
C vertikal ausgerichtet mit D und der gleichen Höhe wie D	Y	D.Y
	Höhe	D.Height
Rechter Rand von C am rechten Rand von D ausgerichtet	X	D.X + D.Width - C.Width
Unterer Rand von C ausgerichtet auf den unteren Rand von D	Y	D.Y + D.Height - C.Height
C horizontal relativ zu D zentriert	X	D.X + (D.Width - C.Width) / 2
C vertikal relativ zu D zentriert	Y	D.Y + (D.Height - C.Height) /2
C rechts von D mit einem Abstand von N	X	D.X + D.Width + N
C positioniert unter D mit einer Lücke von N	Y	D.Y + D.Height + N
C füllt den Raum zwischen D und dem rechten Rand des übergeordneten Elements.	X	D.X + D.Width
	Breite	Parent.Width - C.X
C füllt den Abstand zwischen D und unterer Kante des übergeordneten Elements.	J	D.Y + D.Height
	Höhe	Parent.Height - C.Y

Hierarchisches Layout

Wenn Sie Bildschirme erstellen, die mehr Steuerelemente enthalten, wird es bequemer (oder sogar notwendig), Steuerelemente relativ zu einem übergeordneten Steuerelement anstatt relativ zum Bildschirm oder einem Geschwistersteuerelement zu positionieren. Indem Sie Ihre Steuerelemente in einer hierarchischen Struktur organisieren, können Sie die Formeln einfacher schreiben und verwalten.

Galleries

Wenn Sie einen Katalog in Ihrer App verwenden, müssen Sie Steuerelemente in der Vorlage des Katalogs anordnen. Sie können diese Steuerelemente positionieren, indem Sie Formeln schreiben, die den Parent-Operator verwenden, der auf die Katalogvorlage verweist. Verwenden Sie in den Formeln für Steuerelemente innerhalb einer Katalogvorlage die Eigenschaften Parent.TemplateHeight und Parent.TemplateWidth; verwenden Sie nicht Parent.Width und Parent.Height, da sich diese auf die Gesamtgröße des Katalogs beziehen.

Containersteuerelement

Sie können das Layoutcontainer-Steuerelement als übergeordnetes Steuerelement verwenden.

Betrachten Sie das Beispiel einer Kopfzeile am oberen Rand eines Bildschirms. Es ist üblich, eine Kopfzeile mit einem Titel und mehreren Symbolen zu haben, mit denen Ihre Benutzer interagieren können. Sie können eine solche Kopfzeile mithilfe des Container-Steuerelements erstellen, das ein Bezeichnungssteuerelement und zwei Symbolsteuerelemente enthält:

Legen Sie die Eigenschaften für diese Steuerelemente auf diese Werte fest:

Für das Steuerelement Kopfzeile bezieht sich Parent auf den Bildschirm. Für die anderen bezieht sich Parent auf das Header-Steuerelement.

Nachdem Sie diese Formeln geschrieben haben, können Sie die Größe oder Position des Header-Steuerelements anpassen, indem Sie die Formeln für ihre Eigenschaften ändern. Die Größen und Positionen der untergeordneten Steuerelemente werden automatisch entsprechend angepasst.

Steuerungselemente für automatisierte Layoutcontainer

Sie können ein Feature verwenden, das Auto-Layout-Containersteuerelemente zum automatischen Layouten der untergeordneten Komponenten. Diese Container bestimmen die Position der untergeordneten Komponenten, sodass Sie für eine Komponente im Container niemals X, Y festlegen müssen. Außerdem kann es den verfügbaren Speicherplatz basierend auf den Einstellungen auf seine untergeordneten Komponenten verteilen und sowohl die vertikale als auch die horizontale Ausrichtung der untergeordneten Komponenten bestimmen. Weitere Informationen: Autolayout-Containersteuerelemente

Komponenten

Wenn Sie ein anderes Feature verwenden, benannte Komponenten, können Sie Bausteine erstellen und sie in ihrer gesamten App wiederverwenden. Wie beim Container-Steuerelement sollten die Steuerelemente, die Sie in einer Komponente platzieren, deren Position und Größe auf Parent.Width und Parent.Heightbasieren, die auf die Größe der Komponente verweisen. Weitere Informationen: Erstellen einer Komponente.

Anpassen des Layouts für Gerätegröße und -ausrichtung

Bisher haben Sie gelernt, wie Sie Formeln verwenden, um die Größe jedes Steuerelements als Reaktion auf den verfügbaren Platz zu ändern, während Die Steuerelemente relativ zueinander ausgerichtet bleiben. Möglicherweise möchten oder müssen Sie jedoch als Reaktion auf verschiedene Gerätegrößen und Ausrichtungen wesentliche Layoutänderungen vornehmen. Wenn ein Gerät beispielsweise vom Hoch- zum Querformat gedreht wird, möchten Sie möglicherweise von einem vertikalen zu einem horizontalen Layout wechseln. Auf einem größeren Gerät können Sie mehr Inhalte präsentieren oder neu anordnen, um ein ansprechendes Layout bereitzustellen. Auf einem kleineren Gerät müssen Sie möglicherweise Inhalte auf mehreren Bildschirmen aufteilen.

Geräteausrichtung

Die Standardformeln für die Eigenschaften "Width " und "Height " eines Bildschirms, wie in diesem Thema weiter oben beschrieben, bieten nicht unbedingt eine gute Benutzererfahrung, wenn ein Benutzer ein Gerät dreht. Beispielsweise verfügt eine App, die für ein Smartphone im Hochformat entworfen wurde, über eine DesignWidth von 640 und eine DesignHeight von 1136. Die gleiche App auf einem Smartphone im Querformat hat folgende Eigenschaftswerte:

• Die Eigenschaft Width des Bildschirms ist auf Max(App.Width, App.DesignWidth) gesetzt. Die Breite der App (1136) ist größer als das DesignWidth (640), sodass die Formel als 1136 ausgewertet wird.
• Die Height-Eigenschaft des Bildschirms ist auf Max(App.Height, App.DesignHeight) festgelegt. Die Höhe der App (640) ist kleiner als das DesignHeight (1136), sodass die Formel als 1136 ausgewertet wird.

Bei einer Bildschirmhöhe von 1136 und einer Gerätehöhe (in dieser Ausrichtung) von 640 muss der Benutzer vertikal scrollen, um den gesamten Inhalt anzuzeigen, was möglicherweise nicht die gewünschte Oberfläche ist.

Um die Eigenschaften "Width " und "Height " des Bildschirms an die Geräteausrichtung anzupassen, können Sie die folgenden Formeln verwenden:

Breite = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Höhe = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Diese Formeln tauschen die App DesignWidth und DesignHeight Werte aus, basierend darauf, ob die Breite des Geräts kleiner als seine Höhe (Hochformat) oder größer als seine Höhe (Querformat) ist.

Nachdem Sie die Formeln "Breite " und "Höhe " des Bildschirms angepasst haben, sollten Sie auch Steuerelemente auf dem Bildschirm neu anordnen, um den verfügbaren Platz besser zu nutzen. Wenn beispielsweise jedes der beiden Steuerelemente die Hälfte des Bildschirms einnimmt, können Sie sie vertikal im Hochformat stapeln, aber im Querformat nebeneinander anordnen.

Mit der Orientation-Eigenschaft des Bildschirms können Sie bestimmen, ob der Bildschirm vertikal oder horizontal ausgerichtet ist.

Bildschirmgrößen und Haltepunkte

Sie können Ihr Layout basierend auf der Größe des Geräts anpassen. Die Size-Eigenschaft des Bildschirms klassifiziert die aktuelle Gerätegröße. Die Größe ist eine positive ganze Zahl; Der ScreenSize-Typ stellt benannte Konstanten bereit, um die Lesbarkeit zu verbessern. In dieser Tabelle sind die Konstanten aufgeführt:

Verwenden Sie diese Größen, um Entscheidungen zum Layout Ihrer App zu treffen. Wenn z. B. ein Steuerelement auf einem Smartphone ausgeblendet werden soll, andernfalls aber sichtbar ist, können Sie die Visible-Eigenschaft des Steuerelements auf diese Formel festlegen:

Parent.Size >= ScreenSize.Medium

Diese Formel wird als wahr ausgewertet, wenn die Größe mittel- oder größer ist und andernfalls falsch ist.

Wenn ein Steuerelement basierend auf der Bildschirmgröße einen anderen Bruchteil der Bildschirmbreite einnehmen soll, legen Sie die Width-Eigenschaft des Steuerelements auf diese Formel fest:

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

Mit dieser Formel wird die Breite des Steuerelements auf die Hälfte der Bildschirmbreite auf einem kleinen Bildschirm, drei Zehntel der Bildschirmbreite auf einem mittleren Bildschirm und ein Viertel der Bildschirmbreite auf allen anderen Bildschirmen festgelegt.

Benutzerdefinierte Haltepunkte

Die Size-Eigenschaft des Bildschirms wird berechnet, indem die Width-Eigenschaft des Bildschirms mit den Werten in der SizeBreakpoints-Eigenschaft der App verglichen wird. Diese Eigenschaft ist eine Tabelle mit einer einzigen Spalte aus Zahlen, die die Breiten-Haltepunkte angeben, die die benannten Bildschirmgrößen trennen.

In einer app, die für Tablet oder Web erstellt wurde, lautet der Standardwert in der SizeBreakpoints-Eigenschaft der App [600, 900, 1200]. In einer für Smartphones erstellten App lautet der Wert [1200, 1800, 2400]. (Die Werte für Phone-Apps werden verdoppelt, da solche Apps Koordinaten verwenden, die effektiv die koordinaten in anderen Apps doppelt verwenden.)

Sie können die Haltepunkte Ihrer App anpassen, indem Sie die Werte in der SizeBreakpoints-Eigenschaft der App ändern. Wählen Sie App in der Strukturansicht aus, wählen Sie SizeBreakpoints in der Eigenschaftenliste aus, und bearbeiten Sie dann die Werte in der Formelleiste. Sie können so viele Haltepunkte erstellen, wie Ihre App benötigt, aber nur größen 1 bis 4 entsprechen benannten Bildschirmgrößen. In Formeln können Sie auf Größen verweisen, die über "ExtraLarge" hinaus durch ihre numerischen Werte (5, 6 usw.) hinausgehen.

Sie können auch weniger Haltepunkte angeben. Ihre App benötigt z. B. möglicherweise nur drei Größen (zwei Haltepunkte), sodass die möglichen Bildschirmgrößen "Klein", "Mittel" und "Groß" sind.

Bekannte Einschränkungen

Der Authoring-Canvas reagiert nicht auf die erstellten Größenformeln. Um das reaktionsfähige Verhalten zu testen, speichern und veröffentlichen Sie Ihre App, und öffnen Sie sie dann auf Geräten oder in Browserfenstern verschiedener Größen und Ausrichtungen.

Wenn Sie Ausdrücke oder Formeln in die Eigenschaften X, Y, Width und Height eines Steuerelements schreiben, überschreiben Sie diese Ausdrücke oder Formeln, wenn Sie das Steuerelement später an eine andere Position ziehen oder die Größe des Steuerelements ändern, indem Sie den Rahmen ziehen.