視差Parallax

視差是一種視覺效果,讓較靠近檢視者的項目移動的比背景中其他項目快。Parallax is a visual effect where items closer to the viewer move faster than items in the background. 視差能夠製造深度、透視和移動的感覺。Parallax creates a feeling of depth, perspective, and movement. 在 UWP 應用程式中,您可以使用 ParallaxView 控制項建立視差效果。In a UWP app, you can use the ParallaxView control to create a parallax effect.

WINDOWS UI 程式庫 api: ParallaxView 類別VerticalShift 屬性HorizontalShift 屬性Windows UI Library APIs: ParallaxView class, VerticalShift property, HorizontalShift property

平臺 apiParallaxView 類別VerticalShift 屬性HorizontalShift 屬性Platform APIs: ParallaxView class, VerticalShift property, HorizontalShift property

範例Examples

XAML 控制項庫XAML Controls Gallery
XAML controls gallery

如果您已安裝 XAML 控制項庫應用程式,請按一下此處以開啟應用程式並查看 ParallaxView 運作情形If you have the XAML Controls Gallery app installed, click here to open the app and see the ParallaxView in action.

視差和 Fluent 設計系統Parallax and the Fluent Design System

Fluent Design 系統能協助您建立結合光線、深度、動作、材質及縮放比例的現代化前衛 UI。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Parallax 是將動作、深度及縮放比例加入應用程式中的 Fluent 設計系統元件。Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. 若要深入了解,請參閱 Fluent Design 概觀To learn more, see the Fluent Design overview.

使用者介面運作方式How it works in a user interface

在 UI 中建立視差效果的做法是在 UI 捲動或平移時,以不同的速率移動不同的物件。In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. 為了示範,讓我們看看兩個層級的內容,也就是清單和背景影像。To demonstrate, let's look at two layers of content, a list and a background image. 清單位在背景影像上方,這已經造成清單可能比較靠近檢視者的錯覺。The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. 現在,為了達成視差效果,我們想要最接近我們的物件,使其「更快」行進于距離較遠的物件。Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. 當使用者捲動介面時,清單移動速度比背景影像快,因此造成深度錯覺。As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.

一個帶有背景影像和清單的視差範例

使用 ParallaxView 控制項產生視差效果Using the ParallaxView control to create a parallax effect

若要建立的視差效果,請使用 ParallaxView 控制項。To create a parallax effect, you use the ParallaxView control. 此控制項會將前景元素 (例如清單) 的捲動位置,繫結至背景元素 (例如影像)。This control ties the scroll position of a foreground element, such as a list, to a background element, such as an image. 當您捲動前景元素時,背景元素會有動畫效果,以產生視差效果。As you scroll through the foreground element, it animates the background element to create a parallax effect.

若要使用 ParallaxView 控制項,請提供來源元素、背景元素,並將 VerticalShift (針對垂直捲動) 和/或 HorizontalShift (針對水平捲動) 屬性設定為大於零的值。To use the ParallaxView control, you provide a Source element, a background element, and set the VerticalShift (for vertical scrolling) and/or HorizontalShift (for horizontal scrolling) properties to a value greater than zero.

  • Source 屬性會參考前景元素。The Source property takes a reference to the foreground element. 為了讓視差效果發生,前景應該是 ScrollViewer 或包含 ScrollViewer 的元素,例如 ListViewRichTextBoxFor the parallax effect to occur, the foreground should be a ScrollViewer or an element that contains a ScrollViewer, such as a ListView or a RichTextBox.

  • 若要設定背景元素,請將該元素新增成為 ParallaxView 控制項的子系。To set the background element, you add that element as a child of the ParallaxView control. 背景元素可以是任何的 UIElement,例如 Image,或包含其他 UI 元素的面板。The background element can be any UIElement, such as an Image or a panel that contains additional UI elements.

若要建立視差效果,ParallaxView 必須在前景元素的後方。To create a parallax effect, the ParallaxView must be behind the foreground element. GridCanvas 面板可讓您將項目以互相交疊的方式分層,讓它們能夠搭配 ParallaxView 控制項運作。The Grid and Canvas panels let you layer items on top of each other, so they work well with the ParallaxView control.

此範例會為清單產生視差效果:This example creates a parallax effect for a list:

<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 會自動調整影像的大小,使其適用于視差作業,因此您不需要擔心影像滾動的顯示。The ParallaxView automatically adjusts the size of the image so it works for the parallax operation so you don't have to worry about the image scrolling out of view.

自訂視差效果Customizing the parallax effect

VerticalShift 與 HorizontalShift 屬性可讓您控制視差效果的程度。The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.

  • VerticalShift 屬性指定我們要背景在整個視差作業期間垂直移位多遠的距離。The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. 值為0表示背景完全不會移動。A value of 0 means the background doesn't move at all.
  • HorizontalShift 屬性指定我們要背景在整個視差作業期間水平移位多遠的距離。The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. 值為0表示背景完全不會移動。A value of 0 means the background doesn't move at all.

值愈大,效果愈大。Larger values create a more dramatic effect.

如需自訂視差方式清單,請查看 ParallaxView 類別。For the complete list of ways to customize parallax, see the ParallaxView class.

可行與禁止事項Do's and don'ts

  • 在有背景影像的清單中使用視差Use parallax in lists with a background image
  • 當 ListViewItems 包含影像時,考慮在 ListViewItems 中使用視差Consider using parallax in ListViewItems when ListViewItems contain an image
  • 請勿在任何地方使用它,過度使用可能會降低其影響Don't use it everywhere, overuse can diminish its impact