为模型驱动应用设计自定义页面

项目
03/16/2023

本文提供设计用于模型驱动应用的自定义页面的技巧。

重要

自定义页面是一项具有重大产品更改的新功能，目前有很多已知限制，自定义页面已知问题中进行了概括。

自定义页面中支持的控件

自定义页面创作目前支持画布应用控件的子集。下表列出了当前支持的控件。

Control	控件类型	备注
标签¹	显示
文本框¹	输入
日期选取器¹	输入
按钮¹	输入
组合框¹	输入
复选框¹	输入
切换¹	输入
单选按钮组¹	输入
滑块¹	输入
评级¹	输入
垂直容器	布局	新的响应式水平布局容器
水平容器	布局	新的响应式水平布局容器
富文本编辑器	输入
库	列表
图标	传媒
图像	传媒
编辑窗体	输入
显示窗体	输入
代码组件	自定义	向自定义页面添加代码组件
画布组件（预览）	自定义	向自定义页面添加画布组件

¹ 控件是一种新的现代控件。此控件是为 Teams 中的画布应用引入的。此控件基于 Power Apps Component Framework 包裹的 Fluent UI 库。

自定义页面的自定义组件支持

您可以将低代码（画布组件）和专业代码（代码组件）自定义 UX 组件添加到您的环境中，让它们可供所有制作者使用。有关自定义页面特定的 UX 扩展性的文章，请参阅将画布组件添加到模型驱动应用的自定义页面和将代码组件添加到模型驱动应用的自定义页面。

一般来说，低代码扩展性方法构建、测试更简单，维护成本更低。我们建议先评估画布组件，然后仅在需要更复杂和高级的自定义时才使用代码组件。

详细信息：

通过容器控件启用响应式布局

响应式自定义页面布局通过构建水平布局容器和垂直布局容器控件的层次结构来定义。这些控件位于插入选项卡上布局下的画布应用程序设计器中。

在应用对象上设置最小屏幕高度和宽度以防止出现页面级滚动条，而是使用垂直主体滚动条。

MinScreenHeight=200
MinScreenWidth=200

或者，可以在设置 > 显示中调整自定义页面设计大小，将大小设置为自定义。然后将宽度和高度设置为更典型的桌面自定义页面大小，如宽度 1080 和高度 768。在将控件添加到屏幕后更改此设置可能会导致某些布局属性被重置。

设置最顶层的容器来填充整个空间并根据可用空间重设大小。

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

灵活高度容器的水平换行

要支持页面从桌面向下调整到窄宽度，在具有灵活高度的水平容器上启用这些属性。如果没有这些设置，页面会在变窄时裁剪控件。

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

直接位于此容器下的子容器或控件应设置为最小宽度，以使页面适合 300 像素的宽度。考虑容器或控件以及父容器上的边距。

灵活宽度容器的垂直换行

要支持页面从桌面向下调整到窄宽度，在具有灵活宽度的垂直容器上启用这些属性。如果没有这些设置，页面会在变窄时裁剪控件。

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

直接位于此容器下的子容器或控件应设置为最小高度，以使页面适合 300 像素的宽度。考虑容器或控件以及父容器上的边距。

详细信息：构建响应式布局。

具有固定页眉、灵活正文、固定页脚的垂直容器

在垂直容器上，将对齐(水平) 设置为拉伸
在父垂直容器中插入三个水平容器控件
在第一和第三个子水平容器控件上，将拉伸高度设置为关，并将高度减小到所需的空间，如高度=80。

带有两个均衡子容器的水平容器

在父水平容器上，将对齐(垂直) 设置为拉伸。
在父水平容器中插入两个垂直容器控件。

要与模型驱动应用控件对齐的样式自定义页面控件

通过从现代应用程序设计器创建自定义页面，这些功能使用默认值。

自定义页面的主题。自定义页面中使用的控件的主题值会自动设置为与统一接口的默认蓝色主题相匹配。此默认主题在工作室和应用程序运行时都使用。明确主题选择已从自定义页面创作体验中删除。
控件需要使用不同的字体大小，这基于它们在页面层次结构中的位置。

备注

自定义页面文本的放大比例为 1.33，因此您需要将目标字体大小除以 1.33 来得到所需的大小。

标签类型目标字体大小要使用的字体大小

页面标题 17 12.75

普通标签 14 10.52

小标签 12 9.02

标签类型	目标字体大小	要使用的字体大小
页面标题	17	12.75
普通标签	14	10.52
小标签	12	9.02

主要和次要按钮控件需要以下样式更改：

主要按钮

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

次要按钮

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

自定义页面遵循托管模型驱动应用使用的相同选项卡导航设计。视觉上对齐的语义 HTML 结构可帮助用户在使用键盘或屏幕阅读器时在自定义页面之间无缝导航。请注意，与独立画布应用不同，自定义页面控件和其他 UX 元素不需要明确的选项卡编号分配。现代控件没有 TabIndex 属性，利用语义 HTML 结构进行导航。

各种元素，如控件、画布和代码组件、容器等，可以根据它们在自定义页面布局中的位置切换。选项卡导航按照 Z 顺序导航。在选项卡移出到文档对象模型 (DOM) 树中的下一个元素之前，会最先导航到较大的分组元素（如组件、容器）中的各个选项卡停止点。

这里是一个示例导航，其中的页面包含控件、代码以及画布组件和容器。