Ein Steuerelement zum Ändern der Eigenschaft anderer Steuerelemente verwenden

  • 6 Minuten

Sie können die Art und Weise ändern, in der ein bestimmtes Steuerelement basierend auf den Eigenschaften eines anderen Steuerelements funktioniert. Dank dieser Funktion können Ihre Benutzer Änderungen an ihrer Erfahrung basierend auf ihren Eingaben sehen.

Zum Beispiel kann Ihre App über ein Dropdownmenü verfügen, in dem der Benutzer eine kleine, mittlere oder große Schriftgröße auswählen kann. Basierend auf dieser Einstellung kann die App den Schriftgrad dynamisch in der gesamten App ändern.

Screenshot eines Dropdownmenüs mit kleiner und einer Textbeschriftung mit Schriftgröße 8

Screenshot derselben Dropdownliste mit großer und gleicher Textbeschriftung mit der Schriftgröße in 24.

Sie könnten eine ähnliche Logik auch für Schriftfarben, Füllfarben, die Positionen von Steuerelementen oder das Anzeigen oder Ausblenden von Steuerelementen basierend auf der Benutzerauswahl anwenden. Wenn ein Benutzer beispielsweise ein Kontrollkästchen für „Sind Sie ein neuer Kunde?“ aktiviert, werden Felder für die Eingabe der Informationen zu einem neuen Kunden auf dem Bildschirm angezeigt.

Screenshot eines Kontrollkästchens mit der Frage „Sind Sie ein neuer Kunde?“ mit einem deaktivierten leeren Teil unten.

Screenshot eines Kontrollkästchens mit der Frage „Sind Sie ein neuer Kunde?“ geprüft mit Eingabefeldern für Anzeige des Vor‑ und Nachnamens

Eingaben verwenden, um die Positionen eines Steuerelements anzupassen

Das folgende Beispiel veranschaulicht, wie Sie die Positionierung auf der Canvas steuern und wie Sie Benutzereingaben verwenden, um diese zu ändern. Als Einführung: Die Position des Steuerelements auf der Canvas basiert auf einer Kombination aus zwei Eigenschaften X und Y.

  • X – Der Abstand zwischen dem linken Rand eines Steuerelements und dem linken Rand des Bildschirms.

  • Y – Der Abstand zwischen dem oberen Rand eines Steuerelements und dem oberen Rand des Bildschirms.

Denken Sie daran, dass die Eigenschaften X und Y für alle Steuerelemente mit Ausnahme von Bildschirmen gelten. Wechseln wir jetzt in Ihre App, und lernen wir in der Praxis weiter.

  1. Erstellen wir zuerst einen neuen Bildschirm für Ihre App, indem wir im Bereich Strukturansicht auf die Option + Neuer Bildschirm und dann auf Leer klicken.

  2. Als nächstes fügen wir ein Dropdown-Steuerelement ein. Wählen Sie die Schaltfläche + Einfügen aus, geben Sie im Suchfeld drop ein, und wählen Sie dann Dropdown aus.

  3. Ändern Sie die Eigenschaft Items auf Ihrer Dropdownliste von DropDownSample zu Folgendem:

    Table({Position:"Top"},{Position:"Middle"},{Position:"Bottom"})

    Dadurch wird eine Tabelle mit Datensätzen in einer einzelnen Spalte mit dem Namen Position mit drei Datensätzen mit den Namen Top, Bottom und Middle erstellt. Wenn Sie Ihr Dropdown-Steuerelement auswählen, während Sie die ALT-Taste gedrückt halten, werden diese Werte angezeigt.

    Screenshot des Dropdown-Steuerelements mit den Werten Oben, Mitte und Unten

  4. Als Nächstes fügen wir ein Steuerelement hinzu, das wir auf dem Bildschirm dynamisch neu positionieren können. Wählen Sie erneut aus dem Menüband + Erstellen aus, geben Sie in das Suchfeld airplane ein, und wählen Sie dann das Symbol Airplane aus. Ziehen Sie das Symbol Airplane in die Mitte Ihres Bildschirms.

  5. Zeigen wir jetzt unser Symbol Airplane basierend auf unserem Dropdown-Steuerelement in verschiedenen Höhen auf dem Bildschirm an. Wählen Sie dazu das Airplane-Symbol aus, und suchen Sie nach der Eigenschaft Y. Beachten Sie, dass es derzeit nur über einen statischen Zahlenwert verfügt. Ändern Sie den Wert für die Eigenschaft Y folgendermaßen:

    Switch(Dropdown1.SelectedText.Value,"Top",0,"Middle",Screen1.Height/2,"Bottom",Screen1.Height/1-Self.Height)

    Hinweis

    Ihr Dropdown-Steuerelement hat möglicherweise einen anderen Namen als Dropdown1. Stellen Sie sicher, dass Sie Dropdown1 durch den spezifischen Namen Ihres Steuerelements ersetzen.

    Screenshot der Y-Eigenschaft in Power Apps

  6. Versetzen Sie Ihre App in den Vorschaumodus, um ein wenig Spaß zu haben (und Ihre Formel zu testen). Wählen Sie jetzt die einzelnen Positionen aus dem Dropdownmenü aus. Beachten Sie, dass das Symbol Airplane seine „Höhe“ (oder Y-Koordinate) anpasst, wenn Sie den Dropdownwert ändern!

Erläuterung

Wir konnten unser Airplane-Symbol bewegen, weil unsere Eigenschaft Y nur ein numerischer Wert ist. Da jedoch nicht alle Nummern funktionierten, mussten wir Nummern angeben, bei denen unser Symbol auf dem Bildschirm angezeigt wurde.

Wir haben eine Switch-Funktion basierend auf dem Positionswert unseres Dropdown-Steuerelements verwendet und Y einen anderen Wert basierend auf der Benutzereingabe zugewiesen. Oben ist Null, unten ist die gesamte Höhe des Bildschirms. Wir haben die Eigenschaft Height unseres Bildschirm-Steuerelements für jede Plattform verwendet, die diese App nutzt.

Wir haben außerdem die Eigenschaft Height des Flugzeugsymbols (Self.Height) für den unteren Wert verwendet, sodass wir das Flugzeugsymbol am unteren Bildschirmrand sehen könnten, andernfalls wäre es außerhalb unseres sichtbaren Bildschirms gewesen.

Sie können das Verhalten anderer Steuerelemente durch das Bearbeiten von Eigenschaften in Ihren Steuerelementen ändern. Dadurch haben Sie eine großartige Möglichkeit, Ihre Benutzererfahrung zu gestalten. Lassen Sie Ihre Übungs-App offen. Im nächsten Modul erfahren Sie, wie Sie Ihre App verbessern können, indem Sie bedingte Formatierung anwenden.