UWP

ParallaxView Control In UWP

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. In a UWP app, we can use the ParallaxView control to create a parallax effect. For ParallaxView control, we can set the VerticalShift (vertical scrolling) and HorizontalShift (horizontal scrolling).

Reading this article, you can learn how to use ParallaxView Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

Step 1

Open Visual Studio 2017. Go to Start -> New Project-> Windows Universal (under Visual C#) -> Blank App (Universal Windows). Give a suitable name for your app (UWPParallaxView) and click OK.

 

After choosing the target and minimum platform version that your Windows Universal application will support, the Project creates App.xaml and MainPage.xaml.

 

Step 2

Add the following controls in design window for ParallaxView control view. Add an image in Assets folder for ParallaxView background image.

 

Add the TextBlock Controls and change the Name and Text property. Add the ParallaxView control with Image Control and set the Source and VerticalShift properties for vertical scrolling,

  1. <ParallaxView Source="{x:Bind LVParallax}" VerticalShift="50">  
  2.    <Image x:Name="BGImage1" Source="Assets/Blue Flowers.jpg" Stretch="UniformToFill"/>  
  3. </ParallaxView> 
 

Add ListView Control and set the Content. 

  1. <ListView x:Name="LVParallax" VerticalContentAlignment="Top">  
  2.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  3.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  4.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  5.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  6.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  7.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  8.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  9.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  10.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  11.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  12.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  13.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  14.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  15.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  16.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  17.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  18.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  19.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  20.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  21.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  22.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  23.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  24.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  25.     <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  26. </ListView>  

 For horizontal scrolling, add one more ParallaxView control with Image Control, set the Source and HorizontalShift properties and add ListView Control and set the Content.

  1. <ParallaxView Source="{x:Bind LVParallaxHor}" HorizontalShift="50">  
  2.     <Image x:Name="BGImage2" Source="Assets/Blue Flowers.jpg" Stretch="UniformToFill" />   
  3. </ParallaxView>  

Add ListView Control and set the Horizontal Scroll Viewer properties and Content.

  1. <ListView x:Name="LVParallaxHor" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled" >  

Automatically, the following code will be generated in XAML code view while we are done in the design view.

  1. <Page x:Class="UWPParallaxView.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPParallaxView" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="138,129,0,0">  
  3.         <Grid Margin="57,129,989,143">  
  4.             <ParallaxView Source="{x:Bind LVParallax}" VerticalShift="50">  
  5.                 <Image x:Name="BGImage1" Source="Assets/Blue Flowers.jpg" Stretch="UniformToFill" /> </ParallaxView>  
  6.             <ListView x:Name="LVParallax" VerticalContentAlignment="Top">  
  7.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  8.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  9.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  10.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  11.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  12.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  13.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  14.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  15.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  16.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  17.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  18.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  19.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  20.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  21.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  22.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  23.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  24.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  25.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  26.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  27.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  28.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  29.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  30.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  31.             </ListView>  
  32.         </Grid>  
  33.         <TextBlock x:Name="tblHorizontal" HorizontalAlignment="Left" Margin="505,97,0,0" Text="Horizontal Shift" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" />  
  34.         <Grid Margin="470,135,576,137">  
  35.             <ParallaxView Source="{x:Bind LVParallaxHor}" HorizontalShift="50">  
  36.                 <Image x:Name="BGImage2" Source="Assets/Blue Flowers.jpg" Stretch="UniformToFill" /> </ParallaxView>  
  37.             <ListView x:Name="LVParallaxHor" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled">  
  38.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  39.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  40.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  41.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  42.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  43.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  44.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  45.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  46.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  47.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  48.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  49.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  50.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  51.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  52.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  53.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  54.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  55.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  56.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  57.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  58.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  59.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  60.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  61.                 <x:String>Parallax is a visual effect where items closer to the viewer move faster than items in the background.</x:String>  
  62.             </ListView>  
  63.         </Grid>  
  64.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="324,47,0,0" Text="Parallax View in UWP" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />  
  65.         <TextBlock x:Name="tblVertical" HorizontalAlignment="Left" Margin="99,94,0,0" Text="Vertical Shift" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="18" /> </Grid>  
  66. </Page>  

Step 3

Deploy your app on local machine. The output of the UWPParallaxView is shown below. 
For vertical scrolling,
 
For horizontal scrolling,
 
Summary

Now, you have successfully tested ParallaxView control in XAML and UWP environment using Visual Studio 2017.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs