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.


<Page ...
    <Image Source="ms-appx:///Assets/Image.png"
    <!-- Other Controls -->
ParallaxService.SetHorizontalMultiplier(MyUIElement, 0.5)
ParallaxService.SetVerticalMultiplier(MyUIElement, 0.5)
MyUIElement.SetValue(ParallaxService.VerticalMultiplierProperty, 0.5)
MyUIElement.SetValue(ParallaxService.HorizontalMultiplierProperty, 0.5)

Sample Output



Property Type Description
HorizontalMultiplier double Set HorizontalMultiplier
VerticalMultiplier double Get VerticalMultiplier


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

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

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

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


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