ParallaxService

Warning

The ParallaxService is no longer available in the Windows Community Toolkit. Please use the ParallaxView. Read the Moving to ParallaxView section for more info.

The ParallaxService class allows to create a parallax effect for items contained within an element that scrolls like a ScrollViewer or ListView.

Syntax

<Page ...
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"/>
<ScrollViewer>
    <Image Source="ms-appx:///Assets/Image.png"
            animations:ParallaxService.VerticalMultiplier="0.5" 
            animations:ParallaxService.HorizontalMultiplier="0.5"/>
    <!-- Other Controls -->
</ScrollViewer>

ParallaxService.SetHorizontalMultiplier(MyUIElement, 0.5)
ParallaxService.SetVerticalMultiplier(MyUIElement, 0.5)

MyUIElement.SetValue(ParallaxService.VerticalMultiplierProperty, 0.5)
MyUIElement.SetValue(ParallaxService.HorizontalMultiplierProperty, 0.5)

Sample Output

Properties

Property	Type	Description
HorizontalMultiplier	double	Set HorizontalMultiplier
VerticalMultiplier	double	Get VerticalMultiplier

Methods

Methods	Return Type	Description
GetHorizontalMultiplier(UIElement)	double	Gets how fast the parallax effect should scroll horizontally
GetVerticalMultiplier(UIElement)	double	Gets how fast the parallax effect should scroll vertically
SetHorizontalMultiplier(UIElement, Double)	void	Sets how fast the parallax effect should scroll horizontally
SetVerticalMultiplier(UIElement, Double)	void	Sets how fast the parallax effect should scroll vertically

Sample Project

ParallaxService Sample Page Source. You can see this in action in Windows Community Toolkit Sample App

Moving to ParallaxView

The Windows 10 Fall Creators Update SDK now includes the ParallaxView control among other new controls and APIs. The ParallaxService and ParallaxView share the same concepts and provide the same functionality. In fact, the ParallaxView adds even more functionality and can be used in even more scenarios.

However, the way the two are used is different. Unlike the ParallaxService, the ParallaxView is a control hosting the background element. 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. 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. To create a parallax effect, the ParallaxView must be behind the foreground element.

Here is an example of using the ParallaxView

<Grid>
    <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> 

        <!-- Background element --> 
        <Image x:Name="BackgroundImage" Source="mybackgroundimage.png"
               Stretch="UniformToFill"/>
    </ParallaxView>

    <!-- Foreground element -->
    <ListView x:Name="ForegroundElement" ItemsSource="{x:Bind Items}">       
    </ListView>
</Grid>

Requirements

Device family	Universal, 10.0.15063.0 or higher
Namespace	Microsoft.Toolkit.Uwp.UI.Animations
NuGet package	Microsoft.Toolkit.Uwp.UI.Animations