Einem Steuerelement ein Markenkennzeichen hinzufügen
Wenn ein vorgefertigtes Power Apps-Design nicht dem gewünschten Erscheinungsbild Ihrer App entspricht, können Sie viele der Eigenschaften der Steuerelemente anpassen. Durch Anpassen einiger weniger Eigenschaften wie Fill, HoverColor und BorderColor können Sie das Aussehen des Steuerelements vollständig verändern. Zudem können Sie mit Power Apps Anpassungen an Schriftarten vornehmen.
Mit Power Apps können Sie Farben auf verschiedene Arten eingeben, wenn Ihnen also ein RGBA-Wert oder ein Hex-Farbwert zur Verfügung steht oder Ihre Farbe mit einer der Standard-HTML-Farben übereinstimmt, die mit Color.[your selected color] verfügbar sind, können Sie diese Farbe festlegen. Sie können diese Farbe dann in Ihrer App an einer beliebigen Stelle als benutzerdefinierte Farbe verwenden. Hier finden Sie die allgemeinen Farbeigenschaften für die meisten Steuerelemente.
Typische Eigenschaften
Diese Eigenschaften sind wirksam, wenn der Benutzer nicht mit dem Steuerelement interagiert.
Fill – die Hintergrundfarbe
Color – die Textfarbe
BorderColor – die Farbe des Rahmens eines Steuerelements
BorderStyle – Der Stil des Rahmens des Steuerelements: durchgezogen gestrichelt, gepunktet oder gar nicht vorhanden
Eigenschaften beim Bewegen der Maus auf ein Objekt
Benutzern werden Eigenschaften angezeigt, wenn sie mit dem Mauszeiger auf das Steuerelement zeigen. All dies gilt, wenn die Maus auf das Steuerelement zeigt.
HoverFill – die Hintergrundfarbe des Steuerelements
HoverColor – die Schriftfarbe
Deaktivierte Eigenschaften
Diese Eigenschaften sind wirksam, wenn ein Steuerelement deaktiviert ist. Standardmäßig wird Ihnen ein hellgraues Farbschema angezeigt, um den Benutzer darüber zu informieren, dass ein Steuerelement vorhanden, aber nicht zugänglich ist. Dieses Farbschema wird nur angezeigt, wenn die Eigenschaft DisplayMode des Steuerelements auf Deaktiviert gesetzt ist.
DisabledFill – die Hintergrundfarbe
DisabledColor – die Textfarbe
Farbeinstellungen lassen sich nur über das Design steuern
Es gibt einige Farbeinstellungen, die nicht geändert werden können und für das von Ihnen ausgewählte Design spezifisch sind. Beispielsweise sehen Sie hier ein Datumsauswahl-Steuerelement.
Beim Hinzufügen eines Datumsauswahl-Steuerelements zu Ihrer App, stellen Sie fest, dass Sie die Eigenschaft Color der Schriftart, den Rahmen (Farbe, aber auch Stil und Dicke) und die Hintergrundfarbe ändern können. Alle diese Optionen sind in der Schnittstelle auf der Befehlsleiste verfügbar.
Zudem können Sie diese und weitere Eigenschaften über das Formel-Eingabefeld (fx) anpassen. Zu den veränderbaren Eigenschaften gehören unter anderem IconBackground und IconFill (die Farbe des Kalender-Symbols). Wenn Sie die App aber in den Vorschaumodus versetzen, können Sie die Farben im Kalender nicht weg von der ausgewählten Designfarbe ändern.
Im unten gezeigten Bild des Steuerelements Datumsauswahl haben wir die Farbe so eingestellt, dass roter Text angezeigt wird. Wir haben die Rahmenfarbe auf Grün angepasst (und den Rahmenstil gestrichelt gemacht), und wir haben den IconBackground in Grün geändert. Wenn wir die App in den Vorschaumodus versetzen, zeigt die Kalenderfarbe das blaue Design an, das derzeit auf unsere App angewendet wird.
Font-Eigenschaft
Die Font-Eigenschaft ist für jedes Steuerelement verfügbar, das Text anzeigt. Wenn Sie ein Steuerelement mit der Eigenschaft „Font“ einfügen/auswählen, zeigt Ihre Befehlsleistenoption ein Dropdownmenü mit 14 gängigen Schriftarten an, die bereits in Power Apps programmiert sind. Es ist jedoch möglich, viele andere Arten von Schriftarten anzuzeigen, die in anderen Microsoft-Produkten verfügbar sind. Wenn Sie zum Beispiel die Schriftart „Algerian“ anzeigen möchten, können Sie „Algerian“ in die Eigenschaft „Font“ für dieses Steuerelement eingeben.
Benutzerdefiniertes Branding auf Ihre App anwenden
Bedenken Sie, dass Power Apps Farbe als Datentyp erkennt. Wenn wir eine Variable als Typ: Farbe festlegen, können wir diese Variable überall in unserer App verwenden, wo wir diese Farbe darstellen möchten. Ebenso können wir für Schriftarten einen Schriftarttyp festlegen, der Power Apps als Variable versteht.
Wenn wir gewünschte Farb-/Schriftartenwerte als Variablen festlegen, können wir diese Werte in unsere Steuereigenschaften einfügen, die mit Farben zu tun haben. Eine gute Möglichkeit dazu ist die Verwendung benannter Formeln. Formeln ist eine App-Eigenschaft, auf die Sie zugreifen können, wenn Sie im Bereich StrukturansichtApp auswählen. Im folgenden Beispiel zeigen wir Ihnen, wie Sie einige Branding-Farben festlegen, während Sie unsere Contoso-Kaffeemaschinen-App verwenden.
Wählen Sie auf dem Home Screen App aus dem Bereich Strukturansicht aus. Beachten Sie, dass die Eigenschaft StartScreen im Formel-Dropdownmenü angezeigt wird.
Wählen Sie das Dropdownmenü „Eigenschaften“ aus. Suchen Sie dann nach Formeln, und wählen Sie diese Option aus.
Contoso Electronics verfügt über drei Primärfarben, dazu gehören ein dunkles Blaugrün und ein helles Blaugrün sowie Weiß. Da Power Apps Weiß bereits definiert hat, müssen wir nur noch die beiden anderen Farben festlegen. Diese Farben können für Power Apps wie folgt definiert werden:
nfBrandingLight = RGBA(3, 131, 135, 1);nfBrandingDark = ColorValue("#334A5F");Wir haben das Präfix „nf“ für die benannte Formel verwendet, dann das Gleichheitszeichen (=) verwendet und dann einen Farbwert hinzugefügt, der für Power Apps verständlich ist, und schließlich am Ende ein Semikolon platziert. Wenn Sie Ihren Code einfach so in App>Formeln eingeben, können Sie diesen Formelwert dann überall in Ihrer App verwenden, wo Sie diese Farbe brauchen.
Wechseln Sie in unserer App zur Eigenschaft Fill Ihrer Kopfzeilen-Rechtecke, und geben Sie „nfBrandingDark“ ein.
Wechseln Sie zu Ihren Schaltflächensteuerelementen, und aktualisieren Sie die Eigenschaft Fill zu „nfBrandingLight“.
Ein letzter Gedanke zum Branding: Sobald Sie über ein Steuerelement verfügen, das genau so aussieht, wie Sie es möchten, kopieren Sie dieses Steuerelement und platzieren Sie es als Vorlage auf einem ausgeblendeten Bildschirm. Dann können Sie das Steuerelement kopieren und an anderer Stelle in Ihrer App verwenden.