Parallax example - Height question

How-to Discussions
1

Hi,

Learning… In the Parallax pages example, if I want to have the ‘hidden page’ (swipe to read brings the page up) offset to have the page peek out, i’m guessing i’d just remove some height.

So, see below - this seems to do the trick - by adding “-190” to the panel height property, the page correctly peeks out / juts up.

But - it slows / degrades performance to where the dragging / navigating is almost a standstill.

Why, and is there a better way for me to have this page offset to be visible?

Thanks!

                        <StackPanel>
				<Panel Height="height(this)-190" />
				<StackPanel Color="#eee" Margin="-1,0" ItemSpacing="10" Padding="10">
					<Shadow ux:Name="contentShadow" Size="20" Distance="10" Angle="-90" Color="#0000" />
					
					<LoremIpsum Margin="15,0" />
				</StackPanel>
			</StackPanel>
2

Height is a property that affect layout calculations, and setting it to a dynamically calculated value in a UX expression is going to affect performance when you have to calculate that height of two elements simultaneously.

However, you can achieve what you need by simply adjusting that Margin right there:

<StackPanel>
	<Panel Height="height(this)" />
	<StackPanel Color="#eee" Margin="-1,-90,0,0" ItemSpacing="10" Padding="10">