Combining an arraylistdataset.move method & animations

A place for App developers to hang out / post
Post Reply

Posts: 1276
Joined: Wed Feb 24, 2016 3:36 pm

HTPC Specs: Show details

Combining an arraylistdataset.move method & animations


Post by jachin99 » Fri Mar 09, 2018 5:37 pm

This sample would be classified in the 'fun' category of neat things you can do with MCML and animations. Enjoy...!

<Mcml xmlns=""

<UI Name="Move">

<!-- A ListDataSet that handles content / order change events -->
<ArrayListDataSet Name="MyList">
<sys:String String="a"/>
<sys:String String="b"/>
<sys:String String="c"/>
<sys:String String="d"/>
<sys:String String="e"/>
<sys:String String="f"/>
<sys:String String="g"/>
<sys:String String="h"/>
<sys:String String="i"/>
<sys:String String="j"/>
<sys:String String="k"/>
<sys:String String="l"/>
<sys:String String="m"/>
<sys:String String="n"/>
<sys:String String="o"/>
<sys:String String="p"/>
<sys:String String="q"/>
<sys:String String="r"/>
<sys:String String="s"/>
<sys:String String="t"/>
<sys:String String="u"/>
<sys:String String="v"/>
<sys:String String="w"/>
<sys:String String="x"/>
<sys:String String="y"/>
<sys:String String="z"/>

<!-- A timer that fires every now and then to kick off a move event. -->
<Timer Name="Timer" Interval="100" AutoRepeat="true" Enabled="true"/>

<!-- Values that hold the old and new index to used with the Move() method -->
<!-- to affect the position of individual items in the ArrayListDataSet. -->
<sys:Int32 Name="OldIndex" Int32="0"/>
<sys:Int32 Name="NewIndex" Int32="0"/>

<!-- A random used to generate values for OldIndex and NewIndex. -->
<sys:Random Name="RandomGenerator"/>

<!-- A rule that evaluates for each tick of the timer. -->
<Changed Source="[Timer.Tick]">
<!-- Generate a random start and end index -->
<Invoke Target="[RandomGenerator.Next]" maxValue="[MyList.Count]" ResultTarget="[OldIndex]" ExclusiveApply="false"/>
<Invoke Target="[RandomGenerator.Next]" maxValue="[MyList.Count]" ResultTarget="[NewIndex]" ExclusiveApply="false"/>

<!-- Invoke the Move() method which will modify the order -->
<!-- of the ArrayListDataSet -->
<Invoke Target="[MyList.Move]" oldIndex="[OldIndex]" newIndex="[NewIndex]"/>

<!-- View the changes made to the indexes using a tool like DebugView to view. -->
<!-- See ... gview.mspx -->
<DebugTrace Message="Moving from from {0} to {1}">
<ObjectPath ObjectPath="[OldIndex]"/>
<ObjectPath ObjectPath="[NewIndex]"/>

<Repeater Source="[MyList]" Layout="HorizontalFlow">
<!-- The UI used for our item, passing in the Index and value from -->
<!-- the ArrayListDataSet. -->
<me:Item Index="[RepeatedItemIndex]" Value="[RepeatedItem!sys:String]">
<!-- Each time the index changes for the ArrayListDataItem -->
<!-- run this animation. Depending on the timer interval this can have -->
<!-- a cumulative effect as the animation is applied across the range -->
<!-- determined by the random number generator for OldIndex and NewIndex. -->
<!-- A timer interval of 100 or less demonstrates this effect well. -->
<Animation Type="Move">
<PositionKeyframe Time="0.00" RelativeTo="Current" Interpolation="SCurve"/>
<PositionKeyframe Time="0.15" RelativeTo="Current" Value="0,-20,0"/>
<PositionKeyframe Time="0.35" RelativeTo="Final" Value="0,-20,0"/>
<PositionKeyframe Time="0.50" RelativeTo="Final" Interpolation="SCurve"/>

<UI Name="Item">

<!-- These are set as each item is created in the repeater. -->
<Index Name="Index" Index="$Required"/>
<sys:String Name="Value" String="$Required"/>

<!-- Bind the index. Note when the index changes we see the change reflected -->
<!-- in the visuals without any explicit code setting the value. -->
<Binding Source="[Index.Value.ToString]" Target="[IndexLabel.Content]"/>

<Panel Layout="VerticalFlow">
<!-- The text from the ArrayListDataSet which is repeated. -->
<Text Content="[Value]" Color="White" Font="Courier New, 24"/>
<!-- The index of the item in the ArrayListDataSet. -->
<Text Name="IndexLabel" Color="Gray" Font="Courier New, 12">
<!-- Each time the index changes animate the number beneath the text. -->
<!-- Like the other animation this can have a cumulative effect -->
<!-- as the timer interval is lowered. -->
<Animation Type="ContentChangeHide">
<PositionKeyframe Time="0.00" RelativeTo="Current" Interpolation="Log"/>
<PositionKeyframe Time="0.50" RelativeTo="Current" Value="0,100,0"/>
<AlphaKeyframe Time="0.00" RelativeTo="Current" Interpolation="Log"/>
<AlphaKeyframe Time="0.50" RelativeTo="Current" Value="0"/>



Post Reply