Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]TileNav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Collapse]Tile Control
    [Collapse]Groups and Items
      Tile Groups and Items
      Tile Item Structure
      Tile Animation
    [Expand]Adaptive Layout Mode
    [Expand]Working with the Tile Control
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tile Animation

Tile item support animation. Using this feature you can turn your static tile items to live tiles that display as much information as needed (see the figure below). You can modify the animation speed and visual effects, prevent specific tile content blocks from being animated, pause and resume the animation as required. This article describes this feature in greater detail.

In this section:

Expanded Frames

A Tile is animated by sequentially changing its frames in an endless loop. A frame is the TileItemFrame class instance that reflects the tile content, displayed at the moment. Tile frames are stored within the TileItem.Frames collection.

To modify tile frames at design time, invoke the tile item's smart-tag and click the 'Edit Animation Frames' link. The Frame Collection Editor that will be invoked contains buttons to add, re-arrange and remove animation frames. The central dialog area contains two tabs: one to preview the currently selected frame, the other is the tile preview that demonstrates this tile cycling through all its frames. The figure below illustrates an example.

Each frame is in fact a separate tile: it has its own appearance settings and element collection. Frame elements are stored within its TileItemFrame.Elements collection. After you add the required number of frames, design each of them in the same way as you would do for a static tile. See the Tile Item Structure article to learn how to build tile content from element objects.

The TileItemFrame.UseText, TileItemFrame.UseImage and TileItemFrame.UseBackgroundImage properties allow the target frame to 'borrow' the related content from the previous frame. This can significantly reduce the amount of design-time operations (or code) required to customize your frames, since you do not need to set the same content for multiple frames over and over again.

Expanded Animation Speed

If you want tile frames to be changed after equal time spans, use the TileItem.FrameAnimationInterval property. This property stores the amount of milliseconds required to change one frame to another.

The TileItemFrame.Interval property overrides this global setting and specifies the duration for which this frame is visible. For instance, intervals for the first, second and third frames on the animation below equal 1000 (1 second). The last frame's interval is set to 5000, which means this frame will be visible for 5 seconds until the first frame is show again.

Expanded Animation Effects

To specify the animation effect common to all navigation frames, use the parent item's TileItem.ContentAnimation property. You can choose one of seven animation effects.

  • ScrollTop (default animation effect)
  • ScrollDown
  • ScrollLeft
  • ScrollRight
  • Fade
  • SegmentedFade
  • RandomSegmentedFade
The following figure illustrates a tile that uses the RandomSegmentedFade effect.

Each frame has its own TileItemFrame.Animation property that overrides the global setting. This property specifies the effect that follows navigation to this frame from its predecessor.

Expanded Excluding Specific Content from Animation

If two (or more) neighboring frames have elements with the same equally positioned content, you can exclude this content from being animated.

Frames have three properties that allow you to immobilize the content of the specific type: TileItemFrame.AnimateText, TileItemFrame.AnimateImage and TileItemFrame.AnimateBackgroundImage. If either of these properties equal false, the preceding frame will not animate the related type of its content when navigating to this frame. In case both frames have the same content of this type, this will create an illusion of 'sticky' content, which is displayed below the animation. Below is an example of a tile that has four frames. Each frame displays the DevExpress logo as its image. On the left figure, this logo moves with each frame. Setting the TileItemFrame.AnimateImage property to false for each frame allows the logo to remain static (the right figure).




Tip

Setting the TileItemFrame.AnimateBackgroundImage property to false prevents tile borders from being used in scroll animations.

Instead of immobilizing the entire content of the desired type, you can also force specific frame elements to remain static. To do so, set the TileItemElement.AnimateTransition property to DefaultBoolean.False. This will prevent the target element from being animated when the next frame is coming. Moreover, if the target element contains an image and text, you can use the TileItemElement.UseTextInTransition and TileItemElement.UseImageInTransition properties to select which of these content blocks should be used in animation effects.

Expanded Managing Animation From Code

In code, you can call the following methods to control frame animation.

  • TileItem.SetContent - forces the target tile to display a specific frame. The frame passed to this method as a parameter does not have to be a frame from the item's TileItem.Frames collection. This allows you to display custom frames on specific circumstances that are normally never shown.
  • TileItem.StartAnimation - launches frame animation for the current tile item starting with the very first frame.
  • TileItem.StopAnimation - completely stops frame animation for the current tile item. Once stopped, the animation can only be re-started by calling the TileItem.StartAnimation method. However, you can use the TileItem.SetContent method to explicitly switch to the required frame. The code below illustrates an example.
  • TileControl.SuspendAnimation - pauses frame animation for all tiles within this Tile Control.
  • TileControl.ResumeAnimation - resumes frame animation for all previously suspended tiles. As opposed to the TileItem.StartAnimation method, the ResumeAnimation method resumes animating tiles from their last visible frames.

Expanded Example

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3820.

This example demonstrates how implement animation for a Tile.

In the example, two frames are added. The first frame will display a company logo, and the second one - its motto.

Neither frame uses a background image. Background colors are specified by the parent tile item itself via the Backcolor and Backcolor2 properties, so the frames' AnimateBackgroundImage property is set to false to prevent the background from being animated.

Note that the text in the second frame is formatted using HTML tags.

How would you rate this topic?​​​​​​​