視差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.

重要な API:ParallaxView クラスVerticalShift プロパティHorizontalShift プロパティImportant 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 Design SystemParallax and the Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 視差は、アプリにモーション、深度、スケールを追加する Fluent Design System コンポーネントです。Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. 詳しくは、UWP 用の Fluent Design の概要に関するページをご覧ください。To learn more, see the Fluent Design for UWP 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. その実例として、コンテンツの 2 つのレイヤー (リストと背景画像) を見てみましょう。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 プロパティ (水平スクロール用) を 0 より大きい値に設定します。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 を含んでいる要素 (ListViewRichTextBox など) であることがj必要です。For 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. 背景要素には、Image など、どのような UIElement でも使用できます。また、追加の 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. Grid パネルや Canvas パネルを使用すると、項目を相互に重ねることができ、それらの項目は 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