Blog

Creating a navigation menu with Windows Forms and Infragistics Live Tile View control

Marina Stoyanova / Friday, December 6, 2013

We have all seen the Windows 8 and 8.1 start menu with its colorful tiles of different size and with different functionality. In the new 13.2 release of Windows Forms Infragistics presented a new control called Win Live Tile View, which allows you to create a navigation menu similar to the Windows one. This control gives you the opportunity to choose between more than fifty different tiles and thus create a beautiful, flexible and user friendly applications. The greatest thing about it is that you can navigate it in two ways by adding some back-end code or by using the visual designer which will generate the code-behind for you. Lets take a look at the functionality of the control and create a sample like those ones:

Navigation

Getting Started

To begin with, I want to mention that in the documentation of the control you can find a full, step-by-step explanation of how to add Win Live Tile Vie using the designer and how to add it in the Code-behind. For the sample we are going to create we will use the Designer. Adding the control to our Windows Form Application is really easy. As you have already installed the Infragistics packages for Windows Forms you can find the whole list of controls in the toolbox. Find the UltraLiveTileView control in the toolbox and drop it onto the Form. When you do that you will see the so called smart tag.

smart tag

When you click on the UltraLiveTileView Designer tag, the designer will appear. Now that you have opened the designer you can choose from the templates different tiles and by dragging and dropping them you can create your groups of tiles.

designer

When you click on a particular tile you will see three options: delete, clone, edit. To customize your tile you can select the edit option and thus you will open an editor windows, where you can change the type of the tile, you can set an image or a background to the tile and you can change the heading or the text of the tile.

editor

You can have as many tiles in a group as you want and they can be of a different size. You can also make live tiles with animation – meaning that they can change their appearance after few seconds. You can achieve this by following those steps:

1. Add a live tile.

2. Add more frames to the frame collection. That will result in animating the frames.

You can add more frames to the collections by going to the Default View option in the properties and then choosing the type of frame you are going to animate. In the user mode users can change the size of the tiles, so if you want the animation to occur only to the default size of the tile change only that collection, but if you want it to animate even when it is resized change all all of the collections. The animation option allows you to  determine the way it will act. The options are : Slide from top, slide from left, slide from right or from the bottom or fade. You can also set the interval after which the frames will change.

creating animation

Functionality

So we saw how to add tiles and group them, now lets take a look at the way they can act. For our sample we will make tiles that can open browser, tiles which will execute another forms and tiles that can open default programs.

All you have to do is handle the tile click event and perform an action based on the tile’s unique key. It can be anything available to you – like starting processes like browser from a link or a default program like windows explorer.:

  1. private void ultraLiveTileView1_TileClick(object sender, Infragistics.Win.UltraWinLiveTileView.TileClickEventArgs e)
  2. {
  3.     if (e.Tile.Key == "chrom")
  4.     System.Diagnostics.Process.Start("http://google.com");
  5.     
  6.     if (e.Tile.Key == "explorer")
  7.     System.Diagnostics.Process.Start("explorer.exe");
  8. }

Or you can show other forms from like those one:

Example:

  1. if (e.Tile.Key == "calculator")
  2. {
  3.     Calculator calc = new Calculator();
  4.     calc.Show();
  5. }

 

calculator

 

  1. if (e.Tile.Key == "movies")
  2. {
  3.     Movies movie = new Movies();
  4.     movie.Show();
  5. }

 

movies

In the user mode of the application the users can rearrange the tiles as they want . They can move them from one group to another, change the order of the groups or the order of the tiles. That is why it is good to allow you application to save the changes in the  layout, and then when you reopen it the new layout will load. You can do that by using the following functions: SaveAsXml and LoadFromXml. Create a form closing event and add the following lines:

  1. private void Form1_FormClosing(object sender, FormClosingEventArgs e)
  2. {
  3.     this.ultraLiveTileView1.SaveAsXml("LiveTileConfig.xml");
  4. }

Then you can check for this file when the form is created and restore the tiles configuration.

  1. public Form1()
  2. {
  3.     InitializeComponent();
  4.     if (File.Exists("LiveTileConfig.xml"))
  5.     {
  6.        this.ultraLiveTileView1.LoadFromXml("LiveTileConfig.xml");
  7.     }
  8. }

Summary

Creating applications using the WinLiveTileView control for Windows Form is actually very easy and entertaining. This control can serve as a navigation ‘hub’ for an application and you can build a beautiful and functional one in no time using the designer and you can manipulate and customize the tiles anyway you like. In the movies sample as you can see we have changed the background of the form and the background of the groups, which makes it even more appealing. So unleash you imagination and create attractive and easy to access navigation menus.

 

You can check out all of the Infragistics Windows Forms controls and also download the sample project.