通过

视差

视差是一种视觉效果，在这种效果中，离观看者较近的项目比背景中的项目移动得更快。 视差营造出一种深度感、透视感和运动感。 在 XAML 应用中，可以使用 ParallaxView 控件创建视差效果。

打开 WinUI 3 展示应用并查看 ParallaxView 的效果

WinUI 3 示例集应用程序包括大多数 WinUI 3 控件、特性和功能的交互式示例。 从 Microsoft 应用商店获取应用或在 GitHub 上获取源代码

Parallax 和 Fluent Design 系统

Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 视差是 Fluent Design System 的一个组件，可为应用添加动态、深度和规模。 要了解详细信息，请参阅 Fluent Design 概述。

如何在用户界面上运行

在 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 类。

Recommendations

  • 在有背景图像的列表中使用视差技术
  • 当 ListViewItems 包含图像时，请考虑在 ListViewItems 中使用视差功能
  • 请勿到处使用它，过度使用可削弱它的影响力

UWP 和 WinUI 2

重要

本文中的信息和示例是针对使用 Windows App SDK 和 WinUI 3 的应用优化的，但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例，请参阅 UWP API 参考。

本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

  • Last updated on