Introduction to Telerik RadSlideHubTile Control for Windows 8

Today we will start working with RadSlideHubTile control recently added to the Telerik RadControls library for Win 8 Metro. Though there are couple of hub tile controls, but today we will start with the basic one named “RadSlideHubTile”.

If you are new to Windows Store app development, you can get the Free trial copy of this library from Telerik to start with this new application development. Continue reading for more information.

RadSlideHubTile is a sliding hub title part of Telerik controls present in the Telerik.UI.Xaml.Controls.Primitives namespace and resides in the assembly named Telerik.UI.Xaml.Primitives.dll. The control derives from HubTileBase. I contains two properties named TopContent and BottomContent to set the proper values respectively.

To start with this, you need to add the Telerik “RadControl for Metro” assembly reference. In the Reference Manager, select the “RadControls for Metro” as shown below and click “ok” to continue:

Now you need to add the xmlns namespace in your XAML page in order to use the Telerik RadControls for Windows 8 Metro. Here is the line that you need to add:

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

Add the “RadSlideHubTile” control in the XAML page where you want to use and design the TopContent and BottomContent accordingly. Here is the structure of the same:

<Primitives:RadSlideHubTile>

    <Primitives:RadSlideHubTile.TopContent>

        <!-- 

            Add Top Content Here

        -->

    </Primitives:RadSlideHubTile.TopContent>

    <Primitives:RadSlideHubTile.BottomContent>

        <!-- 

            Add Bottom Content Here

        -->

    </Primitives:RadSlideHubTile.BottomContent>

</Primitives:RadSlideHubTile>

In our sample code, we will add an Image as the top content and a TextBlock as bottom content. Check out the following XAML code snippet for reference:

<Primitives:RadSlideHubTile Width="150" Height="150" Margin="10">

    <Primitives:RadSlideHubTile.TopContent>

        <Image Source="/Assets/icons/Word 2013.png" Stretch="Uniform" Width="56" Height="56"/>

    </Primitives:RadSlideHubTile.TopContent>

    <Primitives:RadSlideHubTile.BottomContent>

        <TextBlock Text="Word 2013" FontSize="20"/>

    </Primitives:RadSlideHubTile.BottomContent>

</Primitives:RadSlideHubTile>

Let’s see it in action. We will add few of them inside a StackPanel and run the sample application. Here you can see the video of our demo application:

I hope, this will help you to understand the use and functionality of Telerik RadSlideHubTile control and will also help you to use it in your Windows Store Application. In the coming days we will explore other controls from the same library too. So, stay connected with my blog. I am also available in Twitter, Facebook and Google+, where you can connect with me for technical updates and discussions. Subscribe to my blog’s RSS feed and email newsletter to get immediate update.