Easily create a Modern UI with RadControls for WPF using RadTileList

Introduction

Telerik’s RadControls for WPF and Silverlight recently released a new control in Q1 2013 called RadTileList. Simply put, if you want to achieve the Modern UI Style for your XAML applications (WPF & Silverlight), similar to the start menu screen of Windows 8, then RadTileList has you covered. It displays tiles in a mosaic manner and allows the end-user the ability to smoothly scroll left or right with a gesture, or they can be reordered by using drag and drop just like in Windows 8. You can use RadTileList with a touch screen monitor as well as a mouse without forcing your users to upgrade to a new OS.

Before jumping in, you may want to download a trial of RadControls for WPF or Silverlight. The source code is also available here.

Let’s Get Started!

Select the “RadControls WPF Application” template found inside of Visual Studio and give it some sort of meaningful name. On the “Project Configuration Wizard”, select Telerik.Windows.Controls.Data and it will automatically select the other dependent reference which is, Telerik.Windows.Controls. From here select Finish and our WPF application is ready to begin coding.

In the simplest implementation, you can declare a RadTileList and then define several new Tiles inside of it along with a color with the following code snippet:

<telerik:RadTileList x:Name="TileList1">

 <telerik:Tile Background="BlueViolet" />

 <telerik:Tile Background="Purple" />

 <telerik:Tile Background="Green"/>

</telerik:RadTileList>

This gives us our first sample as shown in Figure 1.

Figure 1: RadTileList for RadControls for WPF without any additional configuration.

Note: Touch gesture icons are available royalty free from mobiletuxedo.com.

Without adding any additional code, RadTileList can handle right or left swipe events on any touch screen device. You may also use the mouse to move to the third item (which is a green RadTileList).

But it doesn’t stop there, RadTileList is smart enough to handle various window sizes as well as the selected item found in Windows 8 apps as shown in Figure 2.

Figure 2: RadTileList with a SelectedItem (bottom left) and a Different Window Size.

Let’s add some more meaningful data.

It wouldn’t be very useful in many cases to just show several tiles with different backgrounds. At the bare minimum, most Windows 8 tiles includes some sort of text at the bottom to allow the user to know the application name. We can do this very easily by adding in the following code snippet:

First, setup the TextBlock style to match the Modern UI of Windows 8. We can do this directly under our Grid and apply the Style to the TextBlocks that we will be using:

<Grid.Resources>

 <Style TargetType="TextBlock" x:Key="TileLabelStyle">

 <Setter Property="FontSize" Value="14" />

 <Setter Property="FontFamily" Value="Segoe UI" />

 <Setter Property="Margin" Value="10" />

 <Setter Property="Foreground" Value="White" />

 <Setter Property="VerticalAlignment" Value="Bottom"/>

 </Style>

</Grid.Resources>

Next, we can add in the Text we would like to use and apply the Style we just created:

<telerik:RadTileList x:Name="TileList1">

 <telerik:Tile Background="BlueViolet" >

 <TextBlock Text="Photo" Style="{StaticResource TileLabelStyle}"/>

 </telerik:Tile>

 <telerik:Tile Background="Purple">

 <TextBlock Text="Maps" Style="{StaticResource TileLabelStyle}"/>

 </telerik:Tile>

 <telerik:Tile Background="Green">

 <TextBlock Text="Main" Style="{StaticResource TileLabelStyle}"/>

 </telerik:Tile>

 </telerik:RadTileList>

Our WPF will now look like what is shown in Figure 3.

Figure 3: RadTileList with Text being displayed using the Windows 8 Font Styles.

Which shouldn’t come as any surprise, you can use any UI Element to display content inside of a tile. For the mail icon, we may want to use the following code snippet to produce an icon as well as the application name. Instead of using an actual image, we can simply use path data as shown below:

<telerik:Tile Background="Green">

 <Grid >

 <Path Name="Mail" Data="M12.343673,26.303528 L12.343673,48.725266 L53.020504,48.725266 L53.020504,26.303528 L34.296661,40.339897 C33.984161,40.635036 33.693367,40.808647 33.424271,40.860729 C33.155174,40.912811 32.864376,40.938854 32.55188,40.938854 C32.256741,40.938854 31.961605,40.912811 31.66647,40.860729 C31.37133,40.808647 31.067513,40.635036 30.755016,40.339897 z M12.864503,20.756687 L32.55188,35.938885 L52.239258,20.756687 z M9.5832739,15.652554 L55.181946,15.652554 C55.633331,15.652554 56.036976,15.717659 56.392876,15.847866 C56.748775,15.978073 57.056931,16.151684 57.317348,16.368694 C57.577766,16.585709 57.773079,16.828762 57.903286,17.097858 C58.033493,17.366955 58.098595,17.640388 58.098595,17.918163 L58.098595,50.964832 C58.098595,51.815521 57.833839,52.501282 57.304329,53.02211 C56.774818,53.542942 56.067356,53.803356 55.181946,53.803356 L9.5832739,53.803356 C9.2881355,53.803356 9.0016794,53.733913 8.7239037,53.595024 C8.4461269,53.456139 8.2030735,53.260826 7.9947419,53.00909 C7.7864099,52.757355 7.6127996,52.457878 7.4739113,52.110661 C7.3350234,51.763439 7.2655792,51.381496 7.2655797,50.964832 L7.2655797,17.918163 C7.2655792,17.640388 7.3350234,17.366955 7.4739113,17.097858 C7.6127996,16.828762 7.7864099,16.585709 7.9947419,16.368694 C8.2030735,16.151684 8.4461269,15.978073 8.7239037,15.847866 C9.0016794,15.717659 9.2881355,15.652554 9.5832739,15.652554 z"

 Fill="White"

 HorizontalAlignment="Center"

 VerticalAlignment="Center">

 </Path>

 <TextBlock Text="Mail" Style="{StaticResource TileLabelStyle}"/>

 </Grid>

</telerik:Tile>

After selecting the Mail tile, our screen will now look like Figure 4.

Figure 4: The Mail RadTileList displaying an icon and the application name.

We can further enhance the application to use an image in the background of the tile or even change the TileType. If you wanted to use an image as the background, simply add the image to the project and use the following code snippet:

<telerik:Tile>

 <Grid >

 <Image Source="0002.png" Stretch="Fill" />

 <TextBlock Text="Photos" Style="{StaticResource TileLabelStyle}"/>

 </Grid>

</telerik:Tile>

As mentioned earlier, RadTileList supports three different Tile Types

• Single Tile Template – Otherwise known as the Standard Tile Template.
• Double Tile Template – Otherwise known as the Wide Tile Template.
• Quadruple – Two Wide Tile Templates stacked on top of one another – rumored to be in Blue. (Make sure you are using the latest Internal Build 2013_1_0318 for this functionality.)

Each of these tile types, except Quadruple are identical to the Windows 8 Tiles.

Let’s go ahead and change our Maps to use a Single Tile type by using the following code snippet:

<telerik:Tile Background="Purple" TileType="Single">

 <TextBlock Text="Maps" Style="{StaticResource TileLabelStyle}"/>

</telerik:Tile>

Notice the only thing changed here was the TileType property. Let’s go ahead and see what the application looks like now as shown in Figure 5.

Figure 5: RadTileList displaying multiple TilesTypes and Images with Maps selected.

Now that we have seen a variety of great looking Tiles that you can create, we need to be able to determine which item the user selected. Thankfully, we have a SelectionChanged event that we can subscribe to when we first declare the RadTileList in XAML as shown below:

<telerik:RadTileList x:Name="TileList1" SelectionChanged="TileList1_SelectionChanged_1"/>

The code can be as simple as the following:

private void TileList1_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

{

   var selectedItem = TileList1.SelectedItem as Tile;

   RadWindow.Alert(selectedItem.Name);

}

I’m simply getting the selectedItem and displaying its name in our RadWindow control (as it has a modern look compared to the built-in MessageBox class Microsoft provides). Figure 6 shows an example of what this looks like.

Figure 6: RadTileList selecting the Maps Tile.

Obviously, you can run any type of code in this instance. You may want to navigate to another page in your application or launch an external application (like a mail client). The possibilities are endless and your users can enjoy a Modern UI without upgrading every PC in the organization to Windows 8.

Conclusion

We took a look today at a brand new control added to the Q1 2013 release called, “RadTileList”. We have seen that it allows us to have a Modern UI similar to Windows 8 in our WPF & Silverlight applications. While many enterprises are investigating when/if they are going to upgrade to Windows 8, you can go ahead and provide your users this modern UI style now.

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

Don’t forget to download a trial of RadControls for WPF or Silverlight. The source code is also available here.

-Michael Crump (@mbcrump)