locked
Large image which spans off screen... Why is off screen portion not rendering? RRS feed

  • Question

  • I am trying to use the code here: http://w8isms.blogspot.nl/2012/06/metro-parallax-background-in-xaml.html to create a parralax background effect. I have an Image control whos width spans far off the screen. When using the CompositTransform to slide the background from right to left it is always completely black right from the point the image is no longer on screen. If I tilt the simulator to portait and run the app the black line is again right where the image goes off screen. What could be happening here, why is the off screen portion of the image not rendering correctly?
    Friday, October 5, 2012 3:47 PM

Answers

  • Try placing your background within a Canvas as I did in the sample app with the trees.

            <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>

    I updated the blog post here: http://w8isms.blogspot.nl/2012/09/parallax-background-in-xaml-revisited.html


    John Michael Hauck

    • Proposed as answer by JohnMichaelHauck8 Friday, October 5, 2012 7:30 PM
    • Marked as answer by bccollin Friday, October 5, 2012 8:21 PM
    Friday, October 5, 2012 7:30 PM

All replies

  • Try placing your background within a Canvas as I did in the sample app with the trees.

            <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>

    I updated the blog post here: http://w8isms.blogspot.nl/2012/09/parallax-background-in-xaml-revisited.html


    John Michael Hauck

    • Proposed as answer by JohnMichaelHauck8 Friday, October 5, 2012 7:30 PM
    • Marked as answer by bccollin Friday, October 5, 2012 8:21 PM
    Friday, October 5, 2012 7:30 PM
  • Thanks that worked, could you please explain why this happened and why the canvas solves it?
    Friday, October 5, 2012 8:21 PM