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.
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:
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:
Next, we can add in the Text we would like to use and apply the Style we just created:
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:
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:
As mentioned earlier, RadTileList supports three different Tile Types
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:
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:
The code can be as simple as the following:
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.
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.
-Michael Crump (@mbcrump)
Michael Crump is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile. You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.
Subscribe to be the first to get our expert-written articles and tutorials for developers!