視差

視差は、視聴者に近いアイテムが背景のアイテムよりも速く移動する視覚効果です。 視差は、奥行き、遠近感、動き感を生み出します。 XAML アプリでは、ParallaxView コントロールを使用して視差効果を作成できます。

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

視差と「Fluent Design System」

Fluent Design System は、ライト、深度、モーション、マテリアル、スケールを組み込んだモダンで大胆な UI を作成するのに役立ちます。 Parallax は、アプリに動き、深度、スケールを追加する Fluent Design System のコンポーネントです。 詳しくは、Fluent Design の概要に関するページをご覧ください。

ユーザー インターフェイスでの動作

UI では、UI がスクロールまたはパンしたときに異なる速度で異なるオブジェクトを移動することで、視差効果を作成できます。 デモを行うために、リストと背景画像という 2 つのコンテンツレイヤーを見てみましょう。 リストは背景画像の上に配置され、リストが視聴者に近い可能性があることを既に示しています。 次に、視差効果を実現するために、最も手前に表示されているオブジェクトを、遠くに表示されているオブジェクトよりも "速く" 動かします。 ユーザーがインターフェイスをスクロールすると、リストは背景画像よりも速い速度で移動し、深度の錯覚を生み出します。

ParallaxView コントロールを使用して視差効果を作成する

視差効果を作成するには、ParallaxView コントロールを使用します。 このコントロールは、前景要素 (リストなど) のスクロール位置を背景要素 (画像など) に関連付けます。 前景要素をスクロールすると、背景要素がアニメーション化され、視差効果が作成されます。

ParallaxView コントロールを使用するには、Source 要素と背景要素を指定し、VerticalShift (垂直スクロールの場合) プロパティまたは HorizontalShift (水平スクロールの場合) プロパティを 0 より大きい値に設定します。

• Source プロパティは、前景要素への参照を受け取ります。 視差効果が発生するには、前景は ScrollViewer、または ListView や RichTextBox などの ScrollViewer を含む要素である必要があります。
• 背景要素を設定するには、その要素を ParallaxView コントロールの子として追加します。 背景要素には、Image や追加の UI 要素を含むパネルなど、任意の UIElement を指定できます。

視差効果を作成するには、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 で視差を使用することを検討してください
• あらゆる場所で視差を使用しないでください。過剰に使用すると、その効果が低減する可能性があります。

関連資料

• ParallaxView クラス