Animation

This article describes how you can control the RadTileView animations. By default the animations are enabled. This can be changed using the IsItemsAnimationEnabled property.

Example 1: Disabling the animations

<telerik:RadTileView IsItemsAnimationEnabled="False"> 
    <telerik:RadTileViewItem Header="Item 1" /> 
    <telerik:RadTileViewItem Header="Item 2" /> 
    <telerik:RadTileViewItem Header="Item 3" /> 
    <telerik:RadTileViewItem Header="Item 4" /> 
    <telerik:RadTileViewItem Header="Item 5" /> 
    <telerik:RadTileViewItem Header="Item 6" /> 
</telerik:RadTileView>   

There are two different animations available with the control.

Reordeing animation

It occurs when items are swapped using drag. Or when the Position property's value of a RadTileViewItem is changed. The RadTileView control allows you to change the animation duration and easing function. To do that use the ReorderingDuration and ReorderingEasing properties.

Example 2: Setting animation duration

<telerik:RadTileView ReorderingDuration="0:0:2"> 

Example 3: Setting animation duration in code

tileview.ReorderingDuration = TimeSpan.FromSeconds(2); 

The ReorderingEasing property is of type IEasingFunction which means that you can use any of the easing functions provided by the Silverlight framework or create a custom one.

Example 4: Setting animation easing

<telerik:RadTileView> 
    <telerik:RadTileView.ReorderingEasing> 
        <BackEase /> 
    </telerik:RadTileView.ReorderingEasing>             
</telerik:RadTileView> 

Resizing animation

It occurs when the items change their TileState (minimized, maximized, restored). The RadTileView control allows you to change the animation duration and easing function. To do that use the ResizingDuration and ResizingEasing properties. The properties are set in the same manner as the reordering animation properties (see Examples 2 to 4).

See Also

• Getting Started
• Events
• Reordering Tiles