Working with RadSlideHubTile for Windows Phone

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

image

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

image

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

image

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

image

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

image

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s