In this post we will learn working with RadSlideHubTile. This control allows you to have Windows Phone home screen tile experience inside your application. This tile is used to display information with image. You can associate tap or doubletap event with individual slide hub tile to perform specific operation. To have better immersive experience put RadSlideHubTile in a RadUniformGrid. At the end of this post we are going to have RadSlideHubTile in application as following image

To start with add Telerik.Windows.Controls.Primtives namespace on the xaml.

After adding namespace put a RadUniformGrid on the application page. We are creating uniform Grid of 3 rows and 3 columns.

Inside the Grid we will put RadSlideHubTiles. Since grid is of 3 rows and 3 columns, so we can put 9 RadSlideHubTiles.

We can create a RadSlideHubTiles as following

We need to provide Title and Picture values to create RadSlideHubTiles. We can see that Title property is set to India and Picture property is set an image url. We can put 9 RadSlideHubTiles in the grid. We can put that as following

<phone:PhoneApplicationPage
x:Class="processapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="BROWSE COUNTRY APP" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="countries" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<telerikPrimitives:RadUniformGrid NumberOfColumns="3" NumberOfRows="3">
<telerikPrimitives:RadSlideHubTile x:Name="hbIndia"
Title="India"
>
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\indiaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbFrance"
Title="France"
>
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\franceflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbEngland"
Title="England"
Tap="hbTextBox_Tap">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\englandflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbGermany"
Title="Germany">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\germanyflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbAustralia"
Title="Australia">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\ausflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbChina"
Title="China">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\chinaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbJapana"
Title="Japan">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\japanflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbBrazil"
Title="Brazil">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\brazilflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbUSA"
Title="USA">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\usaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>

</telerikPrimitives:RadUniformGrid>
</Grid>
</Grid>

</phone:PhoneApplicationPage>

When you run the application you should get tiles inside your application and you can handle tap or doubletap event to perform specific task on the particular RadSlideHubTile. Expected output of your application is as following

In this way you can work with RadSlideHubTile. I hope you find this post useful. Thanks for reading.