From the Windows 8 start screen to the XBox, SkyDrive and Windows Phone – tiles seem to be everywhere. Live tiles soup up regular tiles by providing animation, imagery, interactivity, and live data displays that enhance user experience. Did you know that Windows Forms applications can  take advantage of the features of live tiles? With the RadPanorama control and the RadLiveTileElement you can provide your users with their content at a glance quickly and easily. This blog post will walk you through creating a small live tiles sample, implementing and adding the tiles programmatically.
Fruit Application

Watch the video below to see the interactivity and motion obtained using the RadPanorama control and RadLiveTileElements.

 

To build this sample, first create a new RadControls for Windows Forms Application project, I named my project LiveTiles. Create a new folder in the project called Assets and add multiple graphic files that we will use to implement our group of tiles. Ensure once you have graphics added, that you set the Copy To Output Directory to Always (otherwise you can also add these images as resources in the project).

image

Once this is done, let’s create the Fruit class to encapsulate information pertaining to the image path as well as the name of the fruit that you’d like to have displayed on the tile, included in this file I’ve also added a repository class called FruitMarket that we will use to create the data for the application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;
 
namespace LiveTiles
{
 public class Fruit
    {
 public string FruitName { get; set; }
 public string ImagePath { get; set; }
 
    }
 
 public class FruitMarket
    {
 public List<Fruit> GetAllFruit()
        {
            List<Fruit> retvalue = new List<Fruit>();
            retvalue.Add(new Fruit() { FruitName = "Banana", 
                         ImagePath = Application.StartupPath +
 @"\Assets\banana-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Cherry", 
                         ImagePath = Application.StartupPath +
 @"\Assets\cherry-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Coconut", 
                         ImagePath = Application.StartupPath + 
 @"\Assets\coconut-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Kiwi", 
                         ImagePath = Application.StartupPath + 
 @"\Assets\kiwi-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Lemon", 
                         ImagePath = Application.StartupPath + 
 @"\Assets\lemon-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Lime", 
                         ImagePath = Application.StartupPath + 
 @"\Assets\lime-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Strawberry", 
                         ImagePath = Application.StartupPath + 
 @"\Assets\strawberry-icon.png" });
            retvalue.Add(new Fruit() { FruitName = "Watermelon", 
                         ImagePath = Application.StartupPath + 
 @"\Assets\watermelon-icon.png" });
 return retvalue;
        }
    }
}

Next, let’s implement the Load event for Form1. Double-click Form1 to enter the designer. In the Properties pane, select events, then double-click the Load event. In the code of the Load Event, we want to create an instance of our RadPanorama control, as well as define a tile group with a header to display our tiles. We’ll define this group to have 3 rows of tiles, additional tiles will wrap automatically to the next column. Live tiles must have frames defined if you want to see animation happen. These animations as well as transition effects are defined on the tile itself. The implementation of the Load Event is as follows:

private void Form1_Load(object sender, EventArgs e)
{
    RadPanorama r = new RadPanorama();
 
 //create tile group for our display
    TileGroupElement group = new TileGroupElement() { Text = "My Favorite Fruit" };
    group.RowsCount = 3;
 
 //add group to the RadPanorama control
    r.Groups.Add(group);
    r.ShowGroups = true;
    r.Dock = DockStyle.Fill;
 
    FruitMarket repository = new FruitMarket();
    List<Fruit> myFavorites = repository.GetAllFruit();
 
 //font for the tile text
    Font tileFont = new Font("Microsoft Sans Serif", 10, FontStyle.Bold);
 foreach (Fruit f in myFavorites)
    {
        RadLiveTileElement tile = new RadLiveTileElement();
 
 //assign first "frame" of the live tile animation - image
        tile.Items.Add(new LightVisualElement()
        {
            Image = new Bitmap(f.ImagePath),
            ImageLayout = ImageLayout.Stretch,
            ShouldHandleMouseInput = false,
            NotifyParentOnMouseInput = true
        });
 
 //assign second "frame" of the live tile animation - textual
        tile.Items.Add(new LightVisualElement()
        {
            Text = f.FruitName,
            Font = tileFont,
            ShouldHandleMouseInput = false,
            NotifyParentOnMouseInput = true
        });
 
        Random randomizer = new Random(DateTime.Now.Millisecond);
 
 //assign random time interval between 2 and 8 seconds for tile animation
        tile.ContentChangeInterval = randomizer.Next(2000, 8000);
 
 //assign a random transition animation between tile frames
 // 0 -> SlideLeft
 // 1 -> SlideRight
 // 2 -> SlideUp
 // 3 -> SlideDown
 // 4 -> Fade
        tile.TransitionType = (ContentTransitionType)randomizer.Next(0, 4);
 
        group.Items.Add(tile);
    }
 
 this.Controls.Add(r);
}

Now when you run the application, you should see the RadPanorama populated with the tiles. This interface is fully interactive with the mouse and touch and the animation transition effects make the application visually appealing.

Download Code

Download RadControls for WinForms by Telerik


About the Author

Carey Payette

is a Developer Advocate. You can follow Carey on Twitter @careypayette or read her personal blog at www.codingbandit.com.

Related Posts

Comments

Comments are disabled in preview mode.