控件品牌打造

  • 6 分钟

如果现成的 Power Apps 主题与应用所需的外观不符，则可以自定义许多控件属性。 通过调整一些控件属性（如 Fill、HoverColor 和 BorderColor），可以完全更改控件的外观。 此外，Power Apps 还支持自定义字体。

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

典型属性

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

  • Fill - 背景色

  • Color - 文本颜色

  • BorderColor - 控件边框的颜色

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

悬停属性

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

  • HoverFill -- 控件的背景色

  • HoverColor - 字体颜色

禁用属性

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

  • DisabledFill - 背景颜色

  • DisabledColor - 文本颜色

颜色设置只受主题控制

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

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

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

在下方显示的日期选取器控件图像中，我们将 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”。

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