Dynamic StackPanel (Delay)

How-to Discussions
1

Hey guys,

I was just asking myself if there is a simple way for a dynamic StackPanel?
I want to add the elements one after another with a delay so that you can see each elements appearing (maybe with a slide in from the bottom).
Is there an easy way for this?

2

Hi, please see the animated list example.

3

Thank you for you reply!
This already goes in the right direction but is not exactly what I need.
I don’t want to animate new added elements.

I have an already complete StackPanel, no new elements are added:

<StackPanel>
  <Text Value="Element 1" />
  <Text Value="Element 2" />
  <Text Value="Element 3" />
  <Text Value="Element 4" />
</StackPanel>

Now, if I enter the page where the StackPanel is, the StackPanel should build up itself with a delay.
E.g. the first element should swipe in, after 1 second the second element, after another second the third element…

Is there already something for this?

4

Hey!

You could try using ActivatingAnimation.

Here is something, that might help you:

<App>
	<JavaScript>
	    module.exports = {
	        gotoFirst: function() { router.goto("firstPage"); },
	        gotoSecond: function() { router.goto("secondPage"); }
	    };
	</JavaScript>
	<Router ux:Name="router" />

	<DockPanel>
	    <Navigator DefaultPath="firstPage">
	        <Page ux:Template="firstPage">
	            <Text Alignment="Center">This is the first page.</Text>
	        </Page>
	        <Page ux:Template="secondPage">  
	            <StackPanel>
			<Text ux:Name="el1" Value="Element 1" Opacity="0"/>
			<Text ux:Name="el2" Value="Element 2" Opacity="0"/>
			<Text ux:Name="el3" Value="Element 3" Opacity="0"/>
			<Text ux:Name="el4" Value="Element 4" Opacity="0"/>
		   </StackPanel>
		  <ActivatingAnimation>
			<Change el1.Opacity="1" Duration="1" />
			<Change el2.Opacity="1" Duration="1" Delay="1"/>
			<Change el3.Opacity="1" Duration="1" Delay="2"/>
			<Change el4.Opacity="1" Duration="1" Delay="3"/>
		  </ActivatingAnimation>
	        </Page>
	    </Navigator>

	    <Grid Dock="Bottom" Columns="1*,1*">
	        <Button Text="First page" Padding="20" Clicked="{gotoFirst}" />
	        <Button Text="Second page" Padding="20" Clicked="{gotoSecond}" />
	    </Grid>
	</DockPanel>
</App>