控件品牌打造

已完成

如果现成的 Power Apps 主题与应用所需的外观不符,则可以自定义许多控件属性。 通过调整一些控件属性(如 FillHoverColorBorderColor),可以完全更改控件的外观。 此外,Power Apps 还支持自定义字体。

Power Apps 允许您以多种方式输入颜色,因此,只要您有 RGBA 值或十六进制颜色值,或者颜色与 Color.[your selected color] 提供的一种标准 HTML 颜色相匹配,就可以定义此颜色。 随后,您可以在应用中的任何位置将此颜色用作自定义颜色。 以下是大多数控件的常见颜色属性。

典型属性

这些属性在用户未与控件交互时起作用。

  • Fill - 背景色

  • Color - 文本颜色

  • BorderColor - 控件边框的颜色

  • BorderStyle - 控件边框的样式,可以是实线、虚线、点线或者无边框

悬停属性

用户在用户将鼠标悬停在控件上时会看到悬停属性。 鼠标悬停在控件上时,所有这些属性均适用。

  • HoverFill -- 控件的背景色

  • HoverColor - 字体颜色

禁用属性

这些属性在控件处于禁用状态时起作用。 默认情况下,您会看到浅灰色配色方案,用于让用户知道控件存在但不可访问。 仅当控件的 DisplayMode 属性设置为禁用时,才会显示此颜色方案。

  • DisabledFill - 背景颜色

  • DisabledColor - 文本颜色

颜色设置只受主题控制

部分颜色设置无法更改,并且特定于所选主题。 例如,日期选取器控件。

如果要向应用添加日期选取器控件,则会发现您可以选择更改字体的 Color 属性,即边框(颜色以及样式和厚度)以及背景色。 所有这些选项都可以在命令栏界面中使用。

此外,您还可以通过公式 (fx) 输入字段调整这些和其他属性。 您可以在可更改属性中看到一些内容,包括 IconBackgroundIconFill(日历图标的颜色)。 但是,如果将应用置于预览模式,则无法更改日历中已经选定的主题颜色。

在下方显示的日期选取器控件图像中,我们将 Color 设置成了显示红色文本,将 Border color 调整为绿色(甚至将 Border style 调整为了虚线),我们还将 IconBackground 更改为了绿色。 将应用置于预览模式时,日历颜色会显示当前应用到应用的蓝色主题。

“日期选取器”的屏幕截图。

Font 属性

任何显示文本的控件上都提供 Font 属性。 插入/选择包含 Font 属性的控件时,命令栏选项会显示一个下拉列表,其中显示已在 Power Apps 中编程的 14 种常见字体,但是,也可以显示其他 Microsoft 产品中提供的许多字体类型。 例如,如果要显示字体:Algerian,则可以在该控件的 Font 属性中键入“Algerian”。

Font 属性的屏幕截图。

如何在应用中应用自定义品牌

请记住,Power Apps 会将颜色识别为一种数据类型。 如果我们将变量定义为类型:颜色,则可以在应用中想要呈现该颜色的任何位置使用该变量。 同样,对于字体,我们可以定义一个 Power Apps 解读为变量的字体类型。

将所需颜色/字体值定义为变量后,就可以将这些值插入到与颜色有关的控件属性中。 要做到这一点,最好使用指定公式。 公式是一种应用属性,从树视图面板中选择应用时即可访问此属性。 在下面的示例中,我们要演示如何在使用 Contoso 咖啡机应用时定义一些品牌颜色。

  1. 在 Home Screen 中,从树视图面板中选择应用。 请注意,StartScreen 属性会出现在公式下拉列表中。

  2. 选择属性下拉列表并查找/选择公式

  3. Contoso Electronics 具有三种主颜色,包括深青色、浅青色以及白色。 由于 Power Apps 已经定义了白色,所以我们只需定义其他两种颜色即可。 可以为 Power Apps 将上述颜色定义为:

    nfBrandingLight = RGBA(3, 131, 135, 1);

    nfBrandingDark = ColorValue("#334A5F");

    命名公式时,我们使用前缀“nf”,加上等号 (=),然后再加一个 Power Apps 可以理解的颜色值,最后在末尾放一个分号。 如果您在应用>公式中输入了类似代码,就可以在应用中需要该颜色的任何位置使用该公式值。

  4. 在我们的应用中,转到标题矩形的 Fill 属性并输入“nfBrandingDark”。

  5. 转到按钮控件并将 Fill 属性更新为“nfBrandingLight”。

在品牌打造部分的最后需要指出,如果某个控件外观完全符合预期效果,请复制该控件,并将其作为模板放在隐藏屏幕中。 之后,您可以复制该控件并在应用的其他位置加以使用。