可以在 Experience Builder 中更改每个微件的默认样式设置以自定义属性，例如大小、位置、动画、背景、边框和框阴影。 微件配置面板中样式选项卡的选项会有所不同，具体取决于您将微件添加到的页面类型或其父容器（例如行、列或格网）所施加的约束，这些约束会自动控制大小和位置。
可以为微件大小和位置设置明确的值，而不是在画布周围拖动微件来移动和调整其大小。 大小和位置设置通过宽度、高度和位置来定义微件在页面上的位置。您可以以像素 (px) 或百分比 (%) 为单位指定这些值。 有关适用于已添加到全屏页面或滚动页面的微件的大小和位置设置，请参阅以下部分。
警告：
将微件从一个容器移动到另一个容器会根据目标容器将其大小和位置重置为默认值。 从待处理列表中添加配置的微件时也是如此。
提示：
为了帮助您对齐并精确定位微件，在画布上拖动微件或在固定布局（例如全屏页面、窗口、侧边栏和列表）中手动移动微件并调整其大小时，将显示捕捉线和距离值。 值表示从微件到其容器侧边和附近微件的距离（如果距离可计算）。 （无法计算位置使用百分比、大小设置使用像素的微件。）显示捕捉线之后，对应的微件将跨已发布体验中的所有屏幕分辨率一起捕捉。
大多数微件通用的其他样式设置包括以下内容：
- 旋转 - 将微件旋转指定角度（以度为单位）。 正值顺时针旋转微件；负值逆时针旋转微件。
- 保留在父容器中 - 防止嵌套微件被拖动到其父微件的边界之外。
- 动画 - 使用飞入、旋转和淡入等效果设置引人注目的动画样式。 您还可以设置过渡模式以在剖面视图之间移动。
- 背景 - 通过选择填充颜色或图像来设置微件的背景。 您可以使用快速样式按钮从与应用程序主题风格一致的预设设计中进行选择。 如果选择图像，则可以使用适合、填充、居中、平铺或拉伸将其放置在微件的边框内。 如果选择适合，则该微件将在图像周围显示背景填充颜色。
- 边框 - 通过选择微件的颜色、样式（如虚线或点划线）和宽度（以像素为单位）来设置其边框。 更改半径大小（按像素或百分比）以调整微件的角。 您可以对所有角使用相同的半径，也可以分别指定每个角的半径大小。 您可以使用快速样式按钮从与应用程序主题风格一致的预设设计中进行选择。
- 框阴影 - 在微件周围添加阴影效果。 您可以使用快速样式按钮从预设设计中选择，或使用以下设置：
- 偏移 X - 设置阴影的水平距离。 负值将阴影放置在微件的左侧，正值将阴影放置在微件的右侧。
- 偏移 Y - 设置阴影的垂直距离。 负值将阴影放在微件上方，正值将阴影放在微件下方。
- 模糊半径 - 向阴影应用模糊效果。
- 传播半径 - 调整阴影的大小。
- 颜色 - 选择阴影颜色。
注：
您选择的主题将影响配置选项中的颜色选择。 如果要使用不属于应用程序主题的颜色，则可以单击更多选择自定义颜色。
全屏页面布局
向应用程序添加全屏页面时，可以在自由布局中组织微件。 如果在画布周围拖动微件以移动微件或调整其大小，则样式面板中的大学校和位置设置会相应更新。
大小设置是容器宽度和高度的组合。 您可以通过以下三种模式设置微件的宽度和高度值：
- 自定义 - 设置特定值。
- 拉伸 - 根据微件容器的大小自动设置微件大小。
- 自动 - 根据微件内容自动设置微件大小。 此模式可用于显示动态内容的微件。 （此模式可能不适用于嵌套在布局容器中的微件，例如默认自动控制宽度的列。 例如，嵌套在“列”微件的图像微件的宽度设置仅包含拉伸和自定义模式。）
注：
如果将宽度设置为拉伸或自定义，则可以选择在拖动边缘调整微件大小时保持纵横比。
微件位置由其边缘（上、下、左、右）到容器的距离定义。 例如，您可以指定微件左边缘和上边缘与其父容器的左边缘和上边缘的偏移距离。 添加微件时，可以在相应位置的输入框中输入值。 要指定对边的距离，请单击更改为自动（或单击逻辑示意图另一侧的更改为自定义）。
不同的大小模式对应不同的位置配置。 例如，如果将宽度设置为自定义或自动，则可以通过更改左边缘或右边缘的距离值来设置位置，并自动设置其他值。 如果将宽度设置为拉伸，则可以通过更改左和右边缘的距离值来设置其位置，而宽度将根据容器宽度的剩余长度自动设置。 高度设置的操作方式类似，分别对应于上边缘和下边缘。
提示：
您也可以通过单击样式面板顶部工具栏上的按钮来更改位置。 例如，可以将微件定位在其父容器的水平中心，这将自动设置左右位置值（隐藏逻辑示意图中的距离输入框）。
两个设置均包括以下单位选项：
- px - 以像素为单位的绝对值
- % - 容器的宽度和高度的百分比
滚动页面上的块
将滚动页面添加到应用程序时，将在块中组织其布局。 块将使用与“行”微件中所用布局相似的多列格网布局。
块具有以下大小和位置设置：
- 宽度 - 按页面百分比设置固定宽度。
- 高度 - 以像素为单位设置高度值或选择自动以自动设置块高度。
- 偏移 X - 以像素为单位设置水平偏移。
- 偏移 Y - 以像素为单位设置垂直偏移。
提示：
单击微件工具栏上的图钉按钮以使微件在滚动页面上可见。
嵌套在块中的微件
在块的格网布局中，添加到块的微件的宽度范围可为 1 到 12 列。 您只能为嵌套在块中的微件指定高度值；其宽度由格网控制。
高度模式共有三种类型：
- 拉伸 - 根据父容器的高度自动设置微件高度。 这是默认设置。
- 自动 - 根据微件内容自动设置微件高度。
- 自定义 - 设置以像素或容器高度百分比为单位的特定高度值。
当您选择自动或自定义，则可以选择以下对齐选项之一：
- 顶部 - 将微件与块的顶部垂直对齐。
- 底部 - 将微件与块的底部垂直对齐。
- 居中 - 将微件与块的中心垂直对齐。
格网项目
在格网微件或格网页面中嵌套的微件变为格网项目。 大小和位置设置不适用于格网项目。 要更改格网中微件的大小，可以调整格网微件本身的大小，然后拖动格网项目之间的边框。
在格网微件或格网页面设置中，可选中允许扩展包含展开按钮，用户可单击这些按钮暂时将各个格网项目设置为占据整个格网区域。 默认情况下，选中允许扩展会显示每个项目的展开按钮。 但是，可针对各个微件覆盖此设置。 允许扩展复选框还会在每个格网项目设置的样式选项卡上显示。 如果您想要用户能够展开一些格网项目，但无法展开其他项目，这非常有用。
动画
使用动画自定义微件和窗口在用户加载和导航应用程序时的显示方式。使用飞入、旋入、放大和缩小等效果设置引人注目的动画样式。 您还可以设置过渡模式以在剖面视图之间移动。 使用提供的动画设置，您可以构建以下示例体验：
- 加载应用程序时，一个窗口旋转弹出。
- 用户向下滚动页面时，微件飞入。
- 当用户在“部分”微件中导航内容时，后续视图将推送前一个视图。
- 当用户将鼠标悬停在“卡片”微件上时，描述淡入。
支持以下级别的动画（动画以较高级别至较低级别的顺序列出）。
注：
较低级别的动画将覆盖较高级别的动画。 例如，如果某一微件被添加到“行”微件中，且添加微件的动画设置被设为无，则将播放该行的动画。 否则，将播放添加微件的动画。
- 页面和窗口级别 - 受框架支持，并在页面和窗口设置中可用，此级别用于控制页面或窗口的动画以及直接添加到页面或窗口的所有微件（第一级别微件）。
注：
第一级别微件不包含嵌套在布局微件中的微件。 基于轮廓线识别嵌套的微件。
- 容器级别 - 受框架支持，在“块”、“固定面板”、“侧边栏”、“行”、“列”、“格网”和“部分”微件的样式选项卡中可用，此级别用于控制容器显示方式的动画以及其中直接添加的微件（不包括嵌套微件）。 此级别还控制在“部分”微件中切换视图的动画。
- 单个微件级别—受框架支持，并且在微件的样式选项卡上可用，此级别用于控制每个微件的显示方式。
- 内部微件级别 - 由微件本身支持，且在微件设置的内容选项卡上可用，此级别用于控制微件内用户交互的动画。 例如，当用户切换到另一个书签时，“书签”微件播放过渡效果，同时“卡片”微件提供悬停动画以显示详细信息。
“部分”微件中包含两个动画设置。 进入动画设置用于控制“部分”面板的外观效果，过渡则用于控制其视图动画。 视图选项卡上的设置用于控制视图面板的过渡方式。 微件选项卡上的设置用于控制视图中微件的显示方式。 当“部分”微件的内容显示在页面上时（页面加载时或滚动到页面时），当前视图的微件动画将与进入动画一起播放。 在视图之间切换时，将在视图动画播放之后播放微件动画。
动画设置
要打开动画设置面板，请单击缩略图或更改按钮。 单击动画缩略图（例如浮入或放大）将其选中并在画布上预览动画。 （可选）配置以下其他设置：
- 效果 - 提供连续的自然微效果选项，例如柔和、摆动和缓慢。
- 方向 - 定义诸如飞入和划入等应用效果的移动方向（从顶部、底部、左侧或右侧）。
布局容器（块、固定面板、侧边栏、行、列和格网）的动画设置还包括一个包含微件设置，可以指定直接添加到容器的微件动画。 除了效果和方向之外，还可以为包含微件配置以下设置：
- 开始 - 定义包含微件动画相对于容器微件动画的开始时间。 选择与先前一样可将包含微件的动画与容器微件同时播放。 选择在先前之后可在播放完任何容器微件动画后播放包含微件的动画。
- 播放动画 - 定义当存在多个包含微件时如何播放动画。
- 同时 - 同时播放包含微件的所有动画。
- 逐个 - 逐个播放包含微件的所有动画。
可通过单击预览按钮预览动画。