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.
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).
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
Carey Payette is a Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.