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: 

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

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:
<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.

Basic RadTileList
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.

<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>

TileList with RadTextTiles

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:

<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.

RadImageAndText tile
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.

<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>


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:

peek template image

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>

RadIconTile fade animation
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.

<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>


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:

<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>

  
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:

<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.

RadImageTile
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:

<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.

Result Home page
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.

Q2 2013 AJAX Release is available!


About the Author

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.

Related Posts

Comments

Comments are disabled in preview mode.