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.
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:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<
telerik:RadTileList
runat
=
"server"
TileRows
=
"2"
>
<
Groups
>
<
telerik:TileGroup
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
Shape
=
"Wide"
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
Shape
=
"Wide"
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
Shape
=
"Wide"
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
></
telerik:RadTextTile
>
</
telerik:TileGroup
>
</
Groups
>
</
telerik:RadTileList
>
The result from the code sample can be seen in Figure 1.
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.
<
telerik:RadTileList
runat
=
"server"
TileRows
=
"2"
ForeColor
=
"White"
>
<
Groups
>
<
telerik:TileGroup
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
Shape
=
"Wide"
NavigateUrl
=
"http://asp.net"
Target
=
"_blank"
Text
=
"Learn more about ASP.NET.The page features videos, tutorials, and samples to help you get the most from ASP.NET."
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
Shape
=
"Wide"
NavigateUrl
=
"http://forums.asp.net/18.aspx"
Target
=
"_blank"
Text
=
"If you have any questions about ASP.NET visit our forums."
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
Shape
=
"Wide"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245146"
Target
=
"_blank"
Text="ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access."></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245147"
Target
=
"_blank"
Text
=
"Add NuGet packages and jump-start your coding. NuGet makes it easy to install and update free libraries and tools."
></
telerik:RadTextTile
>
<
telerik:RadTextTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245143"
Target
=
"_blank"
Text
=
"Find Web Hosting. You can easily find a web hosting company that offers the right mix of features and price for your applications."
></
telerik:RadTextTile
>
</
telerik:TileGroup
>
</
Groups
>
</
telerik:RadTileList
>
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.
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:
<
telerik:RadImageAndTextTile
ImageUrl
=
"Images/tile_asp.net.png"
BackColor
=
"#7AC0DA"
Target
=
"_blank"
NavigateUrl
=
"http://asp.net"
Shape
=
"Wide"
Text
=
"Learn more about web development. The page features videos, tutorials, and samples."
>
</
telerik:RadImageAndTextTile
>
Check the result in Figure 3 below.
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.
<
telerik:RadIconTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://forums.asp.net/18.aspx"
Target
=
"_blank"
Shape
=
"Wide"
Title-Text
=
"Ask all your questions at the ASP.NET forums."
ImageUrl
=
"Images/tile_webforms_icon.png"
></
telerik: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:
<
telerik:RadIconTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://forums.asp.net/18.aspx"
Target
=
"_blank"
Shape
=
"Wide"
Title-Text
=
"Ask all your questions at the ASP.NET forums."
ImageUrl
=
"Images/tile_webforms_icon.png"
>
<
PeekTemplateSettings
AnimationDuration
=
"1000"
ShowPeekTemplateOnMouseOver
=
"true"
HidePeekTemplateOnMouseOut
=
"true"
/>
<
PeekTemplate
>
<
img
src
=
"Images/tile_webforms.png"
alt
=
""
/>
</
PeekTemplate
>
</
telerik:RadIconTile
>
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.
<
telerik:RadContentTemplateTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245146"
Target
=
"_blank"
Shape
=
"Wide"
Title-Text
=
"Learn more..."
>
<
ContentTemplate
>
<
div
style
=
"margin: 0px 10px 0px 10px;"
>
<
h5
style
=
"color: white;margin: 10px 0px 5px 0px;"
>Getting Started</
h5
>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</
div
>
</
ContentTemplate
>
</
telerik:RadContentTemplateTile
>
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:
<
telerik:RadImageAndTextTile
Text
=
"Add NuGet packages and jump-start your coding."
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245147"
Target
=
"_blank"
ImageUrl
=
"Images/tile_nuget_icon.png"
>
<
PeekTemplateSettings
ShowInterval
=
"5000"
Animation
=
"Slide"
ShowPeekTemplateOnMouseOver
=
"true"
HidePeekTemplateOnMouseOut
=
"true"
/>
<
PeekTemplate
>
<
img
src
=
"Images/tile_nuget.png"
alt
=
"ASP.NET hosting"
/>
</
PeekTemplate
>
</
telerik:RadImageAndTextTile
>
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:
<
telerik:RadImageTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245143"
Target
=
"_blank"
ImageUrl
=
"Images/tile_hosting.png"
></
telerik:RadImageTile
>
The result can be seen in Figure 8.
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:
<
telerik:RadTileList
ID
=
"TileList1"
runat
=
"server"
TileRows
=
"2"
Skin
=
"Metro"
>
<
Groups
>
<
telerik:TileGroup
>
<
telerik:RadImageAndTextTile
ImageUrl
=
"Images/tile_asp.net.png"
BackColor
=
"#7AC0DA"
Target
=
"_blank"
NavigateUrl
=
"http://asp.net"
Shape
=
"Wide"
Text
=
"Learn more about web development. The page features videos, tutorials, and samples."
>
</
telerik:RadImageAndTextTile
>
<
telerik:RadIconTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://forums.asp.net/18.aspx"
Target
=
"_blank"
Shape
=
"Wide"
Title-Text
=
"Ask all your questions at the ASP.NET forums."
ImageUrl
=
"Images/tile_webforms_icon.png"
>
<
PeekTemplateSettings
AnimationDuration
=
"1000"
ShowPeekTemplateOnMouseOver
=
"true"
HidePeekTemplateOnMouseOut
=
"true"
/>
<
PeekTemplate
>
<
img
src
=
"Images/tile_webforms.png"
alt
=
""
/>
</
PeekTemplate
>
</
telerik:RadIconTile
>
</
telerik:TileGroup
>
<
telerik:TileGroup
>
<
telerik:RadContentTemplateTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245146"
Target
=
"_blank"
Shape
=
"Wide"
Title-Text
=
"Learn more..."
>
<
ContentTemplate
>
<
div
style
=
"margin: 0px 10px 0px 10px;"
>
<
h5
style
=
"color: white; margin: 10px 0px 5px 0px;"
>Getting Started</
h5
>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</
div
>
</
ContentTemplate
>
</
telerik:RadContentTemplateTile
>
<
telerik:RadImageAndTextTile
Text
=
"Add NuGet packages and jump-start your coding."
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245147"
Target
=
"_blank"
ImageUrl
=
"Images/tile_nuget_icon.png"
>
<
PeekTemplateSettings
ShowInterval
=
"5000"
Animation
=
"Slide"
ShowPeekTemplateOnMouseOver
=
"true"
HidePeekTemplateOnMouseOut
=
"true"
/>
<
PeekTemplate
>
<
img
src
=
"Images/tile_nuget.png"
alt
=
"ASP.NET hosting"
/>
</
PeekTemplate
>
</
telerik:RadImageAndTextTile
>
<
telerik:RadImageTile
BackColor
=
"#7AC0DA"
NavigateUrl
=
"http://go.microsoft.com/fwlink/?LinkId=245143"
Target
=
"_blank"
ImageUrl
=
"Images/tile_hosting.png"
></
telerik:RadImageTile
>
</
telerik:TileGroup
>
</
Groups
>
</
telerik:RadTileList
>
Review the final look of the Home page in Figure 9.
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.
Stanimir Patarinski is currently a senior software developer at Telerik Corp. He joined the company in the end of 2008 and his experience is centered on the ASP.NET AJAX products from Telerik, particularly the RadEditor control. He is an MCPD certified Web, SharePoint and Azure developer and has extensive knowledge about the integration of RadControls in third-party applications including SharePoint 2007, 2010, 2013.