michielpost.nl

Background Parallax for your Windows 8 app

04-09-2012

Every Windows 8 apps needs a background parallax effect like on the Windows 8 startscreen. Your Windows 8 app is not complete without it.

John Michael Hauck created a really easy solution to create this effect in your app. With a simple converter:
http://w8isms.blogspot.nl/2012/06/metro-parallax-background-in-xaml.html

The Parallax effect in the Q42.WinRT library builds upon this code, but I created a parameter for the "factor" constant. This way, you can play with the speed of the parallax. You can even have multiple parallax background effects which can all have different speeds! That must be an interesting app.

How to use the background parallax?
First add this to the top of your page:
xmlns:q42converters="using:Q42.WinRT.Converters"

Create a resource for the converter:
<Page.Resources>
  <q42converters:ParallaxConverter x:Key="Parallax" />
</Page.Resources>


Use the converter on an image:
    <Image Source="/Assets/bg_paralax.png"
               HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="None" >
            <Image.RenderTransform>
                <CompositeTransform
                    TranslateX="{Binding ElementName=MainScrollViewer, Path=HorizontalOffset, Converter={StaticResource Parallax}, ConverterParameter=-0.10}" />
            </Image.RenderTransform>
        </Image>

The ConverterParameter=-0.10 is optional. The default value is -0.10.

MainScrollViewer is the element name of the scrollviewer of your page.

Download the sample app for the Q42.WinRT toolkit to see the Background Parallax in action:
http://github.com/Q42/Q42.WinRT

Comments


218I simply want to say I am new to boigglng and actually liked you're web site. Most likely Ie28099m want to bookmark your site . You really come with wonderful articles and reviews. Cheers for revealing your web site. 29-11-2015
218I simply want to say I am new to boigglng and actually liked you're web site. Most likely Ie28099m want to bookmark your site . You really come with wonderful articles and reviews. Cheers for revealing your web site.


20bexcellent post, very informative. I <a href="http://efbiyhon.com">woendr</a> why the other specialists of this sector do not notice this. You must continue your writing. I'm confident, you've a great readers' base already! 30-11-2015
20bexcellent post, very informative. I <a href="http://efbiyhon.com">woendr</a> why the other specialists of this sector do not notice this. You must continue your writing. I'm confident, you've a great readers' base already!


12-01-2017
http://loveawake.ru - ?????????? ??? ??????????


21-04-2017
??????????? ????????????? ???????! ???????????? ????? ? ???????? ????????? ??? ??????????? ????? ?????? ?? ???? dosug-elitei@mail.ru


New Comment

Name
E-mail (not published)
Comment
Enter the code shown: