共用方式為

視差

  • 發行項

Parallax 是一種視覺效果，讓靠近觀看者的項目比背景中的項目移動得更快。 Parallax 能營造深度、透視和運動的感覺。 在 UWP 應用程式中，可以使用 ParallaxView 控制項建立視差效果。

WinUI API：ParallaxView 類別、VerticalShift 屬性、HorizontalShift 屬性

平臺 API： ParallaxView 類別、 VerticalShift 屬性、 HorizontalShift 屬性

範例

WinUI 2 程式庫
WinUI 程式庫

如果您已安裝 WinUI 2 程式庫應用程式，請按一下此處以開啟應用程式並查看 ParallaxView 的運作情形。

Parallax 和 Fluent Design 系統

Fluent Design 系統能協助您建立結合光線、深度、動作、材質及縮放比例的現代化前衛 UI。 Parallax 是一個 Fluent Design System 元件，可為您的應用程式添加運動、深度和縮放等效果。 若要深入了解，請參閱 Fluent Design 概觀。

它在使用者介面中的運作方式

在 UI 中，您可以透過在 UI 捲動或平移時，以不同的速率移動不同的物件來建立視差效果。 作為示範，讓我們來看看兩層內容：清單和背景影像。 該清單放置在背景影像的頂端，這會給人一種該清單可能更接近觀看者的錯覺。 現在，為了實現視差效果，我們希望離我們最近的物體比距離較遠的物體移動得「更快」。 當使用者捲動介面時，清單移動的速度會比背景影像更快，從而產生深度錯覺。

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

使用 ParallaxView 控制項建立視差效果

若要建立視差效果，請使用 ParallaxView 控制項。 此控制項會將前景元素 (例如清單) 的捲動位置，繫結至背景元素 (例如影像)。 當您捲動前景元素時，背景元素會有動畫效果，以產生視差效果。

要使用 ParallaxView 控制項，您需要提供一個 Source 元素、一個背景元素，並將 VerticalShift (用於垂直捲動) 和/或 HorizontalShift (用於水平捲動) 屬性設為大於零的值。

  • Source 屬性會取得前景元素的參考。 為了產生視差效果，前景應該是 ScrollViewer 或包含 ScrollViewer 的元素，例如 ListView 或 RichTextBox。

  • 若要設定背景元素，請將該元素新增為 ParallaxView 控制項的子元素。 背景元素可以是任何 UIElement，例如 Image 或包含其他 UI 元素的面板。

若要建立視差效果，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 中使用視差
  • 不要到處使用該功能，過度使用會削弱其影響力