Our new RadControls for Windows 8 offers a number of controls to make your application look and perform better. One of the key features is the new set of HubTiles. These are easy to work with, and greatly simplify the job of creating a terrific tile for your application. Remember, Microsoft’s advice is “Invest in a Great Tile.” Now that’s easy to do.
To see how to create great tiles, we’ll create a small application that hosts two tiles: one an image with “peek” text that appears halfway and then all the way over the image, and the second a flipping tile that provides one set of information on the front and another set on the back. We’ll also look briefly at how to handle events such as tapping on the tile.
To get started, create a new Blank application for Windows 8 Store, and name it TelerikHubTiles. Start by adding a reference to RadControls For Windows 8, and then, in MainPage.xaml, add a using statement,
Give the grid three rows and add a TextBlock to the top row to display messages based on tapping the tiles,
You are now ready to add a RadSlideHubTile to your page. Drag one from the toolbox or add it by hand. Dragging from the toolbox has the advantage that the needed namespace will be added for you automagically.
We’ll set four properties on the Tile: Height, Width, the GroupTag and an eventhandler for being tapped. The GroupTag allows for coordination among multiple tiles.
We need to fill in the top and bottom content for the slide hub. The top content “slides” over the bottom content. In our case, we want an image as the bottom content and the name for the image as the top content. We’ll create these with an image control and a TextBlock respectively.
Notice that the Image source is set to “../Images/Jesse.jpg.” Create an Images folder and either copy in the picture from the downloadable source, or add your own image and fix up the name. In either case, once the image is in the file, be sure to right click on the Images folder in Visual Studio and choose Add->Existing Item… and add the image to the project.
That is it for our first tile. Let’s create a second tile, this time one that will flip from front to back. To do so, create a second stack panel (on the row below the previous one) and in it add a RadCustomHubTile,
To flesh out the CustomHubTile we need to create the Front and the Back of the tile. Let’s start with the front where we will add three TextBlocks inside a stack panel.
The back content is very similar; once again we use a stack panel and a set of TextBlocks, though we could use virtually any content as we’ll see in an upcoming blog post.
When the user clicks on the first tile, we’ll display the message “You tapped my tile.”
When the user clicks on the second tile, we’ll display the message “You tapped tile 2.”
Of course, in a “real” application you will take whatever action is appropriate to the tile being tapped.
That’s it, run the application, see the animated tiles and tap on them to activate the event handlers.
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter
Subscribe to be the first to get our expert-written articles and tutorials for developers!