Dynamic StackPanel (Delay)

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?

Hi, please see the animated list example.

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:

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

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?


You could try using ActivatingAnimation.

Here is something, that might help you:

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

	    <Navigator DefaultPath="firstPage">
	        <Page ux:Template="firstPage">
	            <Text Alignment="Center">This is the first page.</Text>
	        <Page ux:Template="secondPage">  
			<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"/>
			<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"/>

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