视差

  • 项目

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

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

平台 API：ParallaxView 类、VerticalShift 属性、Horizo​​ntalShift 属性

示例

WinUI 2 库
WinUI 库

如果已安装 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 中使用视差
  • 请勿到处使用它，过度使用可削弱它的影响力