Post
Ask Question

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.


Similar Articles