打造控件品牌

  • 6 分钟

如果内置 Microsoft Power Apps 主题与应用所需的外观不匹配，则可以自定义许多控件属性。 调整 Fill、HoverColor 和 BorderColor 等属性会显著改变控件的外观。 此外，Power Apps 还支持自定义字体配置。

Power Apps 允许多种颜色输入法。 您可以使用 RGBA 值、十六进制代码或标准 HTML 颜色名称通过 Color.[您选择的颜色] 指定颜色。 然后，可以在您的整个应用中重复使用这些自定义颜色值。 以下列表介绍了控件最常见的颜色相关属性。

典型属性

这些属性在未与控件交互时适用：

  • Fill - 控件的背景颜色

  • Color - 文本颜色

  • BorderColor - 控件边框的颜色

  • BorderStyle - 边框的样式（实线、虚线、点线或者无边框）

悬停属性

这些属性在用户将鼠标悬停在控件上时起作用：

  • HoverFill - 悬停时的背景颜色

  • HoverColor - 悬停时的字体颜色

禁用属性

这些属性在控件的 DisplayMode 设置为 Disabled 时适用。 默认情况下，Power Apps 使用浅灰色配色方案指示控件存在，但当前不可交互。

  • DisabledFill - 禁用时的背景颜色

  • DisabledColor - 禁用时的文本颜色

主题控制的颜色设置

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

如果要向应用添加“日期选取器”控件，则会发现您可以选择更改字体的 Color 属性、BorderColor、BorderStyle、BorderThickness 以及 Fill 颜色。 所有这些选项都可以在命令栏界面中使用。

您可以通过公式 (fx) 输入字段调整这些属性和其他属性。 您可以在可更改属性中看到一些内容，包括 IconBackground 和 IconFill（日历图标的颜色和字体）。 但是，在预览模式下，内部日历颜色仍受主题控制。

在下方显示的日期选取器控件图像中，我们已将 Color 设置为显示红色文本，将 BorderColor 调整为绿色，将 BorderStyle 调整为虚线，以及将 IconBackground 更改为绿色。 将应用置于预览模式时，日历颜色仍会显示当前应用到应用的蓝色主题。

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

Font 属性

任何显示文本的控件都支持 Font 属性。 命令栏提供了一个下拉列表，其中包含 Power Apps 支持的 14 种标准字体。 您还可以手动输入任何支持的字体的名称。 例如，若要使用 Algerian 字体，请在“Font”属性中键入 "Algerian"。

Font 属性的屏幕截图。

在整个应用中应用自定义品牌

Power Apps 将颜色识别为数据类型。 您可以将颜色或字体定义为变量，并在整个应用中引用它们。 建议的方法是使用命名公式，在树视图面板中选择应用时可访问该公式。

若要为 Contoso Coffee Machines 应用定义品牌颜色：

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

    “树视图”的屏幕截图，其中突出显示了“应用”和“StartScreen”属性。

  2. 打开属性下拉列表并查找/选择 Formulas。

    “属性”下拉列表的屏幕截图，其中突出显示了“Formulas”属性。

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

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

    nfBrandingDark = ColorValue("#334A5F");

    在这里，nf 表示“命名公式”。 现在，可以在应用中指定颜色的任何位置使用这些值。

    “Formulas”属性的屏幕截图，其中包含编辑栏中的 Power Fx 颜色公式。

  4. 在我们的应用中，将标头矩形的 Fill 属性设置为 nfBrandingDark。

  5. 将按钮控件的 Fill 属性设置为 nfBrandingLight。

若要简化重用，一旦控件的外观与您的品牌匹配，就将其复制到隐藏屏幕，并在整个应用中将其用作模板。