Tile Animation
- 6 minutes to read
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:
- Frames: general information
- Setting animation speed
- Applying visual effects
- How to prevent specific tile content from being animated
- Managing frame animation from code
- Example
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.
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.
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.
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.
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.
int currentFrameIndex; //Remember the currently selected frame index and stop the animation private void tileItem1_ItemClick(object sender, DevExpress.XtraEditors.TileItemEventArgs e) { currentFrameIndex = tileItem5.CurrentFrameIndex; targetTile.StopAnimation(); } //Re-starting the frame animation and showing the next frame explicitly private void tileItem2_ItemClick(object sender, DevExpress.XtraEditors.TileItemEventArgs e) { targetTile.StartAnimation(); targetTile.SetContent(tileItem5.Frames[currentFrameIndex+1], true); }- 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.
Example
The following code snippet illustrates how to add two animation frames with different visibility durations and animation effects.
tileItem1.ItemSize = TileItemSize.Wide;
//frame #1
TileItemFrame frameOne = new TileItemFrame();
frameOne.Elements.Add(new TileItemElement() {
Text = "Frame #1",
TextAlignment = TileItemContentAlignment.MiddleCenter});
frameOne.Elements.Add(new TileItemElement() {
Text = "Visible for 5 seconds",
TextAlignment = TileItemContentAlignment.BottomCenter
});
frameOne.Interval = 5000;
frameOne.Animation = TileItemContentAnimationType.ScrollLeft;
//frame #2
TileItemFrame frameTwo = new TileItemFrame();
frameTwo.Elements.Add(new TileItemElement() {
Text = "Frame #2",
TextAlignment = TileItemContentAlignment.MiddleCenter });
frameTwo.Elements.Add(new TileItemElement() {
Text = "Visible for 2 seconds",
TextAlignment = TileItemContentAlignment.BottomCenter
});
frameTwo.Interval = 2000;
frameTwo.Animation = TileItemContentAnimationType.ScrollRight;
tileItem1.Frames.Add(frameOne);
tileItem1.Frames.Add(frameTwo);