Übung – Benutzeroberfläche für eine neue Canvas-App erstellen und anpassen

  • 10 Minuten

Sie haben hoffentlich wie wir mit unserer Contoso-Kaffeemaschinen-App geübt. Wenn nicht, machen Sie sich keine Sorgen! In dieser Übung erstellen wir eine App, um alle neuen Fähigkeiten auszuprobieren, die wir uns in diesem Lernmodul angeeignet haben.

Wechseln Sie zur Power Apps-Startseite, und klicken Sie dann auf Erstellen und Leere App. Wählen Sie dann Leere Canvas-App und den Tablet-Formfaktor aus. Führen Sie dann folgen folgende Schritte aus:

  1. Fügen Sie ein Rechteck ein, und ändern Sie die Größe so, dass es den oberen Rand Ihres Bildschirms mit einer Höhe von 80 abdeckt.

  2. Fügen Sie ein Bild ein, und ändern Sie die Größe so, dass es in Ihr Rechteck oben links auf Ihrem Bildschirm passt.

  3. Ändern Sie die Eigenschaft „Image“ in:

    User().Image

  4. Fügen Sie eine Textbeschriftung ein, und positionieren Sie sie in der Kopfzeile rechts neben dem Bild.

  5. Ändern Sie die Eigenschaft Text in:

    "Welcome, " & User().FullName

  6. Ändern Sie die Größe der Textbeschriftung so, dass sie ohne mehrere Zeilen in den Text passt.

  7. Fügen Sie in Ihre App ein Texteingabe-Steuerelement ein. Positionieren Sie es irgendwo unter dem Kopfzeile-Rechteck.

  8. Fügen Sie in Ihre App ein Zurücksetzen-Symbol ein. Positionieren Sie es rechts vom Texteingabe-Steuerelement.

  9. Ändern Sie die Zurücksetzen-Symbol-Eigenschaft OnSelect in:

    Reset(TextInput1)

    Hinweis

    Die Reset-Funktion ändert die Texteingabe auf den als Standardwert eingegebenen Wert, in diesem Fall „Texteingabe“.

  10. Wenden Sie ein Thema auf Ihre App an, indem Sie App oder Screen1 aus der Strukturansicht auswählen. Klicken Sie dann auf eine Option aus dem Dropdownmenü Thema auf der Befehlsleiste. Ihre App sollte nun der App unten ähneln (wir haben als Thema Dunkelblau ausgewählt).

    Screenshot des App-Themas

  11. Setzen Sie nun Ihre App in den Vorschaumodus. Geben Sie Text in das Texteingabe-Steuerelement ein und wählen Sie dann das Symbol „Zurücksetzen“ aus. Ihr Text sollte zu „Texteingabe“ zurückgewechselt haben.

  12. Versuchen Sie als Nächstes, Ihre App so anzuzeigen, wie jemand es auf einem Samsung Galaxy Tab A7 tun würde.

  13. Versuchen Sie als Nächstes, die App als iPhone 14 anzuzeigen und die Ausrichtung anzupassen.

Glückwünsche zu Ihren neuen Fähigkeiten!