视差

视差是一种视觉效果,即靠近观察者的物体比背景中的物体移动得更快。 视差可产生一种深度、透视和移动感。 在 UWP 应用中,你可以使用 ParallaxView 控件来创建视差效果。

Windows UI 库 API:ParallaxView 类VerticalShift 属性Horizo​​ntalShift 属性

平台 APIParallaxView 类VerticalShift 属性Horizo​​ntalShift 属性

示例

WinUI 2 库
WinUI Gallery

如果已安装 WinUI 2 库 应用,请单击此处 打开该应用并查看 ParallaxView 的操作

视差和 Fluent 设计系统

Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 视差是 Fluent 设计系统的一个组成部分,它将动画、深度和比例添加到你的应用。 若要了解详细信息,请参阅 Fluent Design 概述

它在用户界面中的工作原理

在 UI 中,你可以在 UI 滚动或平移时,通过以不同的速率移动不同的对象来创建视差效果。 要进行演示,请让我们查看两层内容,分别是列表和背景图像。 该列表位于该背景图像的顶部,这已经给人以列表可能靠观察者更近的错觉。 现在,为了实现视差效果,我们希望靠我们最近的对象比远处的对象移动得“更快”。 当用户滚动界面时,列表比背景图像移动得更快,从而产生深度错觉。

An example of parallax with a list and background image

使用 ParallaxView 控件创建视差效果

要创建视差效果,你可以使用 ParallaxView 控件。 该控件将前景元素(如列表)的滚动位置与背景元素(如图像)关联到一起。 当你滚动浏览前景元素时,它会将背景元素动画化,形成视差效果。

要使用 ParallaxView 控件,你需要提供源元素、背景元素,并将 VerticalShift(针对垂直滚动)和/或 HorizontalShift(针对水平滚动)属性设置为大于零的值。

  • 源属性参考前景元素。 为了让视差效果出现,前景应为 ScrollViewer 或一个包含 ScrollViewer 的元素,例如 ListViewRichTextBox

  • 要设置背景元素,你需要将该元素添加为 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 中使用视差
  • 请勿到处使用它,过度使用可削弱它的影响力