How to Build a Windows 8 Like Portal Page with Telerik’s ASP.NET AJAX TileList Control

The Q2 2013 release of Telelik’s RadContorls for ASP.NET AJAX added a new jewel in the suite, namely the RadTileList. It’s a grid of tiles that achieves navigation and layout similar to the Windows 8 start menu. You can scroll the tiles smoothly to the left and right, select single or multiple ones or easily reorder them by intuitive drag and drop. All actions can be performed either with the mouse or gestures on touch devices.

Check the overview demo for a brief and easy introduction of the control, or get additional detailed information at the TileList section of the online help.

The tutorial below will show you how to get started with the control by demonstrating how to build the portal page of your app with a Windows 8 look and feel. In the example I will modify the Visual Studio 2012 ASP.NET Web Forms Application template in the .NET Framework 4.0 by arranging all the information and links of its home page in a modern UI list containing interactive tiles.

Let’s Get Started!

Setup the application

Open an instance of VS2012 and start a new project. Select the .NET Framework 4 ASP.NET Web Forms Application template and give it a meaningful name like TileListHomePage. Then click the OK button.

Next add the references to the Telerik.Web assemblies. These are Telerik.Web.UI, Telerik.Web.Design and Telerik.Web.UI.Skins. The .NET 4 Telerik *.dll files can be found in the Bin40 of your controls installation folder. By default it is C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q2 2013\Bin40.

From here, open the Default.aspx page for editing and add the Telerik RadControls for ASP.NET AJAX Register directive at the top: 

Implement the RadTileList prototype

In the simplest implementation, you can declare a RadTileList before the closing tag of the BodyContent element and define several new Tiles inside of it along with a background color with the following code snippet:

The result from the code sample can be seen in Figure 1.

Figure 1: RadTileList for RadControls for ASP.NET AJAX containing three wide and two square tiles

The next step is to replace all five hyperlinks that are declared in the Defalut.sapx page with respective tiles in the RadTileList. Comment the P, H3 and OL elements in the markup and use their content to enhance the TileList declaration by setting the Text and NavigateUrl properties of each tile. Setting the Target property to “_blank” opens a new browser window with the designated URL. Check Figure 2 for the result.

Figure 2: RadTileList for RadControls for ASP.NET AJAX containing RadTextTile tiles configured with Text, NavigationUrl and Target properites

Now it’s time for the fun part. Let’s breathe some life and color to these tiles.

Advanced tile customizations

As a start, I will add a bunch of images to the Images folder of the project. The source code of the project is available for download here, so you can get the images and test different tile types with them.

The text of the first tile is nearly two lines and I have a large image with the site’s logo. It is a good idea to replace the RadTextTile with a RadImageAndTextTile. Here is the first tile declaration:

Check the result in Figure 3 below.

Figure 3: RadImageAndText tile

The second tile navigates to the WebForms forum site. I have an image styled like an icon with a question and information marks. As a start, I can use the RadIconTile control here. Setting the ImageUrl configures the icon image displayed in the center of the tile. The Text of the prototype RadTextTile can be used for the Title-Text property of the new tile. The following markup should lead to the tile displayed in Figure 4.

Figure 4: RadIconTile

At this point it starts to look pretty nice, but we will not stop here. I have this really cool image which displays parts of two forum lists one over another:



I can use it to add a fade animation in the Icon tile. This is achieved by the PeekTemplate property, which is present in all the tile types that can be loaded in the list. It contains HTML that smoothly replaces the default content at certain intervals or user actions. Here is the enhanced markup declaration:

Figure 5: RadIconTile in the middle of a fade animation

In the third tile there is enough text to leave it is at it is. However, I really wish to add the “Getting started” header from the original text. For this purpose I will use the RadContentTemplateTile. You can put HTML code in the ContentTemplate property and it will fit the tile area.

Figure 6: RadContentTempalteTile

The next tile is the one that points to the NuGet site. I will use RadImageAndTextTile type for it as well. Since the logo is present both in the content and in the PeekTemplate images, the Fade animation is not quite suitable. Setting the Animation property of the PeekTemplateSettings inner property to “Slide” configures the tile to be animated in a manner similar to the Windows 8 start menu. There is an online demo where you can easily test different animation settings. Enabling the ShowPeekTemplateOnMouseOver and HidePeekTemplateOnMouseOut allows the animation to be started on mouse over and out. Here is the final markup for the fourth tile:

  
Figure 7: RadIconTile before and after the PeekTeplate is shown

The declaration of the last tile is really simple. I will use a RadImageTile tile since I want to display a single image in it:

The result can be seen in Figure 8.

Figure 8: RadImageTile

We are almost at the end. As a final tweak I will group the first two and the last three tiles in separate RadTileGroups. The final declaration of the TileList should look as follows:

Review the final look of the Home page in Figure 9.

Figure 9: The final look of the application’s front page

Try it yourselves

With a few simple steps we used the RadTileList to revamp the Home page of the default WebForms web application template and introduce a Modern UI similar to Windows 8 start menu.

We would love your feedback on what we can do to make this control even better. Feel free to post a thread in the forums or leave your comment in the box below.

Don’t forget to download a trial of RadControls for ASP.NET AJAX. The source code of the demo application is also available here.