Creating A Great Windows 8 Tile With XAML RadControls for Windows 8

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,

xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"

Give the grid three rows and add a TextBlock to the top row to display messages based on tapping the tiles,

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="Auto" />

        <RowDefinition Height="Auto" />

    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0"

               Name="Message"

               FontSize="40"

                HorizontalAlignment="Left"

                Text="Ready..." />

Adding the First Tile

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.

<telerikPrimitives:RadSlideHubTile Width="150"

       Height="150"

       telerikPrimitives:HubTileService.GroupTag="FirstTiles"

       Tapped="RadSlideHubTile_Tapped_1">

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.

<telerikPrimitives:RadSlideHubTile.TopContent>

   <TextBlock Text="Jesse Liberty"

               HorizontalAlignment="Left"

               VerticalAlignment="Bottom"

               FontSize="22"

               FontWeight="Light"

               Margin="12,12,12,12" />

</telerikPrimitives:RadSlideHubTile.TopContent>

<telerikPrimitives:RadSlideHubTile.BottomContent>

     <Image Source="../Images/Jesse.jpg"

            Stretch="UniformToFill" />

 </telerikPrimitives:RadSlideHubTile.BottomContent>

 lerikPrimitives:RadSlideHubTile>

Handling the Image

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.

Adding the Second Tile

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,

<StackPanel Grid.Row="2"

          Orientation="Horizontal">

  <telerikPrimitives:RadCustomHubTile Width="150"

         Height="150"

         telerikPrimitives:HubTileService.GroupTag = "FirstTiles"

         Tapped="RadCustomHubTile_Tapped_1"

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.

<telerikPrimitives:RadCustomHubTile.FrontContent>

   <StackPanel Margin="16,0,0,0"

               VerticalAlignment="Center">

       <TextBlock Text="18"

                  FontSize="80"

                  FontWeight="SemiLight" />

       <TextBlock Text="PENDING"

                  FontSize="14"

                  Margin="4,-12,0,0" />

        <TextBlock Text="Messages"

                   FontSize="12"

                   Margin="4,14,0,0" />

    </StackPanel>

</telerikPrimitives:RadCustomHubTile.FrontContent>

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.

<telerikPrimitives:RadCustomHubTile.BackContent>

    <StackPanel Margin="16,0,0,0"

                VerticalAlignment="Center">

        <TextBlock Text="5"

                   FontSize="80"

                   FontWeight="SemiLight" />

        <TextBlock Text="OVERDUE"

                   FontSize="14"

                   Margin="4,-12,0,0" />

         <TextBlock Text="Tasks"

                    FontSize="12"

                    Margin="4,14,0,0" />

     </StackPanel>

 </telerikPrimitives:RadCustomHubTile.BackContent>

Creating the Code Behind

With the XAML in place, we need only fill in the event handlers for the two tiles, which we do in the code behind page . 

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.

private void RadSlideHubTile_Tapped_1(

 object sender, TappedRoutedEventArgs e )

{

   Message.Text = "You tapped my tile.";

}

private void RadCustomHubTile_Tapped_1(

 object sender, TappedRoutedEventArgs e )

{

    Message.Text = "You tapped tile #2!";

}

That’s it, run the application, see the animated tiles and tap on them to activate the event handlers.