Parallax Background in XAML Revisited





5.00/5 (1 vote)
Parallax background in XAML revisited
Adapted from the original post Metro Parallax Background in XAML.
Those who are super observant may have noticed that as you scroll through the tiles in the Windows 8 start screen, the background moves at about 1/10th the speed as the foreground. I've heard some people call this a "parallax background". No matter what we call it, I'm sure we all want it in our own Windows 8 app. This post explains one relatively simple way to accomplish this.
I am assuming that the foreground content is stored within a horizontal scrolling ScrollViewer
. Let's give this ScrollViewer
a name, like MyScrollViewer
. In this demo, the content of the foreground is the front row of trees. The background can be anything: an Image
, a Canvas
, or in the case of this demo, more (smaller) trees.
I've added a RenderTransform
to the background trees that allows me to translate (move) the starting position (x) of the background. I could set the TranslateX
of the transform to a constant, or bind it to any value I wish. What I want to do is bind the TranslateX
to the HorizontalOffset
property of MyScrollViewer
.
If I do this, the background will move at the same speed and in the opposite direction of the ScrollViewer
. This is because as we scroll to the right and the foreground trees move left, HorizontalOffset
increases. Increasing the value of TranslateX
causes the background text to move right.
To slow down the background and reverse its direction, we need to multiply HorizontalOffset
by something like -0.1
before assigning it to TranslateX
. For this, we write a converter called ParallaxConverter
and apply the converter to the binding.
using System;
using Windows.UI.Xaml.Data;
namespace ParallaxBackgroundLibrary
{
public class ParallaxConverter : IValueConverter
{
const double _factor = -0.10;
public object Convert(object value, Type targetType, object parameter, string language)
{
double factor;
if (!Double.TryParse(parameter as string, out factor))
{
factor = _factor;
}
if (value is double)
{
return (double)value * factor;
}
return 0;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
double factor;
if (!Double.TryParse(parameter as string, out factor))
{
factor = _factor;
}
if (value is double)
{
return (double)value / factor;
}
return 0;
}
}
}
If you look closely at the converter, it accepts a parameters in case you are not particularly pleased with my selection of -0.1
. You can also use the parameter to create even more depth in your application by supporting two or more backgrounds with different converter factors. The demo code below demonstrates the use of the converter parameter by constructing two background rows of trees that move at different speeds as you pan left and right.
<Page
x:Class="ParallaxBackgroundDemoApp.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParallaxBackgroundDemoApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pbl="using:ParallaxBackgroundLibrary"
mc:Ignorable="d">
<Page.Resources>
<pbl:ParallaxConverter
x:Key="ParallaxConverter" />
</Page.Resources>
<Grid>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop
Color="#FF5A8302"
Offset="0" />
<GradientStop
Color="#FFEEEE00"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Canvas>
<local:Trees>
<local:Trees.RenderTransform>
<CompositeTransform
TranslateX="{Binding ElementName=MyScrollViewer,
Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}"
ScaleX="0.25"
ScaleY="0.25" />
</local:Trees.RenderTransform>
</local:Trees>
</Canvas>
<Rectangle
Fill="Black"
Opacity="0.2" />
<Canvas>
<local:Trees>
<local:Trees.RenderTransform>
<CompositeTransform
TranslateX="{Binding ElementName=MyScrollViewer, Path=HorizontalOffset,
Converter={StaticResource ParallaxConverter}, ConverterParameter=-0.2}"
ScaleX="0.5"
ScaleY="0.5" />
</local:Trees.RenderTransform>
</local:Trees>
</Canvas>
<Rectangle
Fill="Black"
Opacity="0.2" />
<ScrollViewer
x:Name="MyScrollViewer"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto">
<local:Trees />
</ScrollViewer>
</Grid>
</Page>
That’s it.
ParallaxBackground
binary (basically just the converter) resides here: http://nuget.org/packages/parallaxbackground/.ParallaxBackground
source (complete with the demo trees application) resides here: http://parallaxbackground.codeplex.com/