在示例应用模板中设置主题

画布应用最吸引人的功能是能够根据用户或组织的品牌和喜好自定义用户界面。 主题设置策略使我们能够创建与组织品牌相匹配的应用。 主题包含一组样式,这些样式定义控件和组件的多个设计属性,如颜色、字体和边框。

在本文中,我们将了解如何使用全局变量来定义主题,以及如何通过只更新全局变量在整个应用中轻松更改颜色和属性。

观看此视频以了解如何在示例应用模板中设置主题:

先决条件

要完成本课程,我们需要能够在 Microsoft Teams 中创建可作为指定 Microsoft 365 订阅的一部分提供的应用。 您还需要在您的团队中安装适用于 Microsoft Teams 的里程碑示例应用模板。 您可以通过 https://aka.ms/TeamsMilestones 在团队中安装它。

定义主题设置策略

在此示例中,我们将了解如何使用全局变量来定义颜色和样式, 以在里程碑应用中设置主题。 在加载屏幕OnVisible 属性中定义了以下全局变量。

  • 用于定义颜色以便能够轻松引用颜色的 gblAppColors
  • 用于为移动应用和 Web 应用定义不同字号的 gblAppSizes
  • 使用 gblAppColors 的每个控件的 gblAppStyles 属性
  • 当 Teams 主题为深色时设置为 true 以便所有控件适应深色主题的 gblThemeDark
  • 当 Teams 主题为高对比度时设置为 true 以便所有控件都适应高对比度的 gblThemeHiCo

测试主题设置策略

已定义两个隐藏屏幕用于测试主题设置策略:

  • 隐藏的管理屏幕 - 为此屏幕定义了 tglAdmin_DarkModetglAdmin_ContrastMode 这两个切换开关。 此屏幕有助于快速测试深色和对比度模式,而无需更改团队主题来进行测试

    隐藏的管理员屏幕

  • 隐藏的控件屏幕 - 该屏幕具有使用 gblAppStyles 设置属性的每个控件。

    • 有助于测试主题更改。

    • 有助于复制特定控件并将其粘贴到所需的屏幕上,以便无需重复键入控件的公式。

      隐藏的控件屏幕

将主题设置变量用于示例应用模板

  1. 要了解如何在“里程碑”应用中使用主题设置,请在树视图中选择项目屏幕以打开屏幕,然后选择 + 新建项目

  2. 选择 + 新建项目Color 属性。

    请注意,该公式从加载屏幕的 OnVisible 属性中引用 gblAppStyles>ButtonTransparent>颜色公式。

    所以现在,如果应用的主题是高对比度,那么将使用 gblAppColors>HighContrastHyperlinks 公式中定义的颜色。

  3. 另一个例子是查看主要和次要按钮。

    • 在编辑器中选择“项目屏幕”。

    • 按下 Alt 键并选择“项目屏幕”上的筛选器图标。

      此时将打开“筛选工作项”弹出窗口。 注意以下两个按钮:清除应用

      “清除”和“应用”按钮

      应用是主按钮的一个示例,清除是辅助按钮的一个示例。

  4. 选择应用按钮,然后选择与边框/粗细/颜色相关的属性,并注意定义的公式。

    选择颜色属性

  5. 应用按钮定义为主要按钮,并使用在加载屏幕>OnVisible>ButtonPrimary 公式上定义的所有属性。

    根据 ButtonPrimary 公式中选择的主题和颜色变量,按钮的样式属性将得到更新。

    同样,清除被定义为辅助按钮,并使用在 gblAppStyles>ButtonSecondary 中定义的所有属性。

    备注

    应用的另一种可能的扩展是将字体添加为属性,要么是添加为要在所有控件中使用的一个变量,要么为每个控件添加一次(与为主要按钮或辅助按钮单独定义其他样式属性的方式一样)。 整个“里程碑”应用中的字体是 Segoe UI,并且确定不需要设置字体主题。

在示例应用模板中更新主题

在本节中,我们将了解如何更改特定控件的属性以及如何在各个屏幕上更新控件。 在我们的示例中,我们将更新主要按钮的 Fill 属性,并查看按钮颜色在深色模式和默认模式下如何变化。

  1. 转到加载屏幕,在下拉菜单中选择 OnVisible 属性。

  2. 展开编辑栏并向下滚动到 ButtonPrimary>Fill 函数。

  3. 将最后两个参数更新为 Red 和 DarkRed。

    更新 fill 属性

  4. 转到另一个屏幕,然后返回到“加载屏幕”以运行 OnVisible 函数。

  5. 转到项目屏幕,选择筛选按钮以打开“筛选器”弹出窗口,并注意“应用”按钮的颜色现在为 DarkRed。

    “应用”按钮现在为 DarkRed

  6. 转到隐藏的管理屏幕,按住键盘上的 Alt键,然后选择打开深色模式切换开关。

    切换深色模式

  7. 再次转到“加载屏幕”,让函数加载,然后返回到“项目”屏幕。 请注意,屏幕现在处于深色模式(深色背景),“应用”按钮颜色现在已更改为红色

    红色按钮和深色模式

  8. 同样,更改 SecondaryButton 的属性会更改辅助按钮的颜色,例如清除按钮。

    备注

    如前所示,直接更新 fill 函数是测试主题设置的快速方法。 如果不仅 Primary 按钮 控件的颜色需要更改,所有其他使用它的控件也需要更改颜色,那么变量 gblAppColors 下的调色板应该更新为具有所需颜色和名称且对您的组织最有意义的公式。 例如,companynameDefaultHeader: ColorValue("#30D5C8") 将是蓝绿色的公式。