共用方式為

視差

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

開啟 WinUI 3 資源庫應用程式，並查看 ParallaxView 的運作方式

WinUI 3 Gallery 應用程式包含大部分 WinUI 3 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

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 類別。

Recommendations

  • 在有背景影像的清單中使用視差
  • 當 ListViewItems 包含影像時，考慮在 ListViewItems 中使用視差
  • 不要到處使用該功能，過度使用會削弱其影響力

UWP 和 WinUI 2

這很重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

  • Last updated on