视差
视差是一种视觉效果,即靠近观察者的物体比背景中的物体移动得更快。 视差可产生一种深度、透视和移动感。 在 UWP 应用中,你可以使用 ParallaxView 控件来创建视差效果。
Windows UI 库 API:ParallaxView 类、VerticalShift 属性、HorizontalShift 属性
示例
WinUI 2 库 | |
---|---|
如果已安装 WinUI 2 库 应用,请单击此处 打开应用,并查看 ParallaxView 的实际应用。 |
视差和 Fluent 设计系统
Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 视差是 Fluent 设计系统的一个组成部分,它将动画、深度和比例添加到你的应用。 若要了解详细信息,请参阅 Fluent Design 概述。
它在用户界面中的工作原理
在 UI 中,你可以在 UI 滚动或平移时,通过以不同的速率移动不同的对象来创建视差效果。 要进行演示,请让我们查看两层内容,分别是列表和背景图像。 该列表位于该背景图像的顶部,这已经给人以列表可能靠观察者更近的错觉。 现在,为了实现视差效果,我们希望靠我们最近的对象比远处的对象移动得“更快”。 当用户滚动界面时,列表比背景图像移动得更快,从而产生深度错觉。
使用 ParallaxView 控件创建视差效果
要创建视差效果,你可以使用 ParallaxView 控件。 该控件将前景元素(如列表)的滚动位置与背景元素(如图像)关联到一起。 当你滚动浏览前景元素时,它会将背景元素动画化,形成视差效果。
要使用 ParallaxView 控件,你需要提供源元素、背景元素,并将 VerticalShift(针对垂直滚动)和/或 HorizontalShift(针对水平滚动)属性设置为大于零的值。
源属性参考前景元素。 为了让视差效果出现,前景应为 ScrollViewer 或一个包含 ScrollViewer 的元素,例如 ListView 或 RichTextBox。
要设置背景元素,你需要将该元素添加为 ParallaxView 控件的子元素。 背景元素可以是任何 UIElement,如图像或包含其他 UI 元素的面板。
要创建视差效果,ParallaxView 必须位于前景元素之后。 网格和画布面板让你能够以相互叠加的形式放置项目,以便它们与 ParallaxView 控件很好地配合使用。
该示例创建了列表的视差效果:
<Grid>
<ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50">
<!-- Background element -->
<Image x:Name="BackgroundImage" Source="Assets/turntable.png"
Stretch="UniformToFill"/>
</ParallaxView>
<!-- Foreground element -->
<ListView x:Name="ForegroundElement">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
<x:String>Item 4</x:String>
<x:String>Item 5</x:String>
<x:String>Item 6</x:String>
<x:String>Item 7</x:String>
<x:String>Item 8</x:String>
<x:String>Item 9</x:String>
<x:String>Item 10</x:String>
<x:String>Item 11</x:String>
<x:String>Item 13</x:String>
<x:String>Item 14</x:String>
<x:String>Item 15</x:String>
<x:String>Item 16</x:String>
<x:String>Item 17</x:String>
<x:String>Item 18</x:String>
<x:String>Item 19</x:String>
<x:String>Item 20</x:String>
<x:String>Item 21</x:String>
</ListView>
</Grid>
ParallaxView 自动调整图像的大小,以便它适合视差操作,让你无需担心图像滚动到视线之外。
自定义视差效果
VerticalShift 和 HorizontalShift 属性让你可以控制视差效果的程度。
- VerticalShift 属性指定在整个视差操作期间,我们想要背景垂直移动多远。 值 0 表示背景根本不移动。
- HorizontalShift 属性指定在整个视差操作期间,我们想要背景水平移动多远。 值 0 表示背景根本不移动。
更大的值可创建更显著的效果。
有关自定义视差方式的完整列表,请参阅 ParallaxView 类。
应做事项和禁止事项
- 在有背景图像的列表中使用视差
- 当 ListViewItems 包含图像时,考虑在 ListViewItems 中使用视差
- 请勿到处使用它,过度使用可削弱它的影响力
相关文章
反馈
https://aka.ms/ContentUserFeedback。
即将发布:在整个 2024 年,我们将逐步淘汰作为内容反馈机制的“GitHub 问题”,并将其取代为新的反馈系统。 有关详细信息,请参阅:提交和查看相关反馈