Telerik UI for Windows Phone by Progress

The RadWrapPanel control allows you to animate the ordering of the items. The items will also get animated when they have to be reordered.

By default the animation feature is turned off, so to turn it on you have to set the IsAnimated property to True.

CopyXAML
<telerikPrimitives:RadWrapPanel x:Name="radWrapPanel" Width="300" IsAnimated="True"></telerikPrimitives:RadWrapPanel>

Additionally you can modify the default animation by using the following properties:

  • AnimationDuration - specifies how long the animation should last.
  • AnimationEasing - specifies an easing function for the animation.
Tip
To learn more about easing functions read here.

Here is an example:

CopyXAML
<telerikPrimitives:RadWrapPanel x:Name="radWrapPanel" Width="300" AnimationDuration="0:0:2" IsAnimated="True" Margin="5">
<telerikPrimitives:RadWrapPanel.AnimationEasing>
<BounceEase Bounces="5" Bounciness="2" EasingMode="EaseOut" />
</telerikPrimitives:RadWrapPanel.AnimationEasing>
<Border BorderBrush="White" BorderThickness="1" Width="100" Height="100" Background="#FF00BABD" />
<Border BorderBrush="White" BorderThickness="1" Width="100" Height="100" Background="#FF00BABD" />
<Border BorderBrush="White" BorderThickness="1" Width="100" Height="100" Background="#FF00BABD" />
<Border BorderBrush="White" BorderThickness="1" Width="100" Height="100" Background="#FF00BABD" />
<Border BorderBrush="White" BorderThickness="1" Width="100" Height="100" Background="#FF00BABD" />
</telerikPrimitives:RadWrapPanel>