Need help with Parallax Pages example

How-to Discussions
1

Hello!
I was digging Parallax Pages example https://www.fusetools.com/examples/parallax-pages and I am lost.

How can I place different texts on each page in LoremIpsum sections? These are when you scroll up on each page.

There is LoremIpsum.ux file and it is inserted in Parallax class.
I suppose that I need different file on each page - but I can’t fugure this out.

I have tried to insert files through ux:Properties, but for some reason it didn’t work.

Can anyone help me? Thanks.

2

Hi;

I would look into using Templates: https://www.fusetools.com/docs/fuse/reactive/each#using-code-each-code-with-code-ux-template-code

You are interested in changing the part of the UX that displays the LoremIpsum page:

<StackPanel>
	<Panel Height="height(this)" />
	<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>

You can databind the TemplateKey property on an Each tag in order to select the template each slide is to show.

3

Thank you, Liam! I have tryed and it works! You are the best. Love your product.

But I don’t understand why it is possible to get various pics on background by using

<FileSource ux:Property="ImageFile" />,

but when I try

<FileSource ux:Property="CustomLoremFile" />

and then <ux:Include File="{ReadProperty CustomLoremFile}" />

that doesn’t work. Why?

4

Hi,

ux:Include is only for directly including UX files at compile time. Since UX is a compiled language, there is no way to include an UX file by name at runtime.

Another, perhaps easier-to-use approach would be to make each page a Container. This lets you put the children anywhere you want inside of the page. Below, I’ve rewritten the ParallaxPage component to be a Container that places its children where the Lorem Ipsum text was previously.

<Container ux:Class="ParallaxPage" Subtree="contentParent">
	<string ux:Property="TitleText" />
	<float4 ux:Property="ThemeColor" />
	<FileSource ux:Property="ImageFile" />

	<Page ux:Binding="Children">
		<ScrollView ux:Name="scrollView" ClipToBounds="true">
			<ScrollViewMotion Overflow="Clamp" />
			<ScrollingAnimation From="0" To="height(this)">
				<Move Target="coverBackground" Y="-80" Duration="1" />
				<Move Target="title" Y="-120" Duration="1" />
				<Change contentShadow.Color="#0007" Duration="1" />
			</ScrollingAnimation>
			
			<StackPanel>
				<Panel Height="height(this)" />
				<StackPanel Color="#eee" Margin="-1,0" ItemSpacing="10" Padding="10">
					<Shadow ux:Name="contentShadow" Size="20" Distance="10" Angle="-90" Color="#0000" />
					
					<Panel ux:Name="contentParent" />
				</StackPanel>
			</StackPanel>
		</ScrollView>
		
		<Panel ux:Name="cover" ClipToBounds="true">
			<EnteringAnimation>
				<Move Target="title"           X="-0.2" RelativeTo="ParentSize" />
				<Move Target="swipeUpText"     X="1"    RelativeTo="ParentSize" />
				<Move Target="coverBackground" X="0.4"  RelativeTo="ParentSize" />
			</EnteringAnimation>
			<ExitingAnimation>
				<Move Target="title"           X="0.2"  RelativeTo="ParentSize" />
				<Move Target="swipeUpText"     X="-1"   RelativeTo="ParentSize" />
				<Move Target="coverBackground" X="-0.4" RelativeTo="ParentSize" />
			</ExitingAnimation>
			
			<Text ux:Name="title" Value="{ReadProperty TitleText}"
			      Alignment="Center" Color="#fff" Font="RobotoThinItalic" FontSize="60" />
			
			<Text ux:Name="swipeUpText" Alignment="BottomCenter" Color="#fff" Margin="0,0,0,25">
				Swipe up to read
			</Text>
			<WhileFalse>
				<Cycle Target="swipeUpText.Opacity" Low="0.05" High="0.4" Frequency="0.4" Waveform="Sine" />
			</WhileFalse>
			
			<Rectangle ux:Name="coverBackground">
				<Rectangle Color="#0002">
					<LinearGradient AngleDegrees="55" Opacity="0.8">
						<GradientStop Color="#0000" Offset="-0.2" />
						<GradientStop Color="{ReadProperty ThemeColor}" Offset="1.15" />
					</LinearGradient>
				</Rectangle>
				<Image Layer="Background" File="{ReadProperty ImageFile}" StretchMode="UniformToFill">
					<Desaturate Amount="0.4" />
				</Image>
			</Rectangle>
		</Panel>
	</Page>
</Container>

You can then use it like this:

<PageControl ux:Name="pageControl" InactiveState="Unchanged">
	<ParallaxPage TitleText="TECH"     ThemeColor="#9C27B0" ImageFile="assets/tech.jpg">
		<!-- Content goes here -->
	</ParallaxPage>
	<ParallaxPage TitleText="CULTURE"  ThemeColor="#E91E63" ImageFile="assets/culture.jpg">
		<!-- Content goes here -->
	</ParallaxPage>
</PageControl>
5

Wow! Now I understand, thank you Sebastian.

It seems that your example is easier. But when implement it, my Parallax pages never shows. No error messages, my app just skip this section (containing PageControl and Parallax pages).

What role of <Page ux:Binding="Children">? I had hard time to grasp this.

6

Normally, when you put a visual inside another visual, it is automatically added to the Children property of the parent. However, it seems that Container does not do this automatically.

ux:Binding lets you explicitly set which property to assign to, so in this case you’re essentially saying “this page should be a child of the container”.

To illustrate, you could technically do the binding manually for every child. The following two snippets have the exact same outcome:

<Panel>
    <Text ux:Binding="Children">Hello world</Text>
</Panel>

<Panel>
    <Text>Hello world</Text>
</Panel>
7

Thanks, Sebastian for such simple explanation!