RadCustomHubTile from Telerik for Windows 8 UI

Introduction

Telerik recently released their Windows 8 UI Controls to RC on September 18th (see post here), and this is probably on the first in a series of posts I will put out showing them off.

The first control here is the RadCustomHubTile.  I chose this because I am in the process of porting my Find Amber app from Windows Phone to Windows 8 and I wanted to transition the app without drifting too far from the spirit of the original app. 

You can see from the screen shot that I had already used the [RadControls for Windows Phone](http://www.telerik.com/products/windows-phone.aspx), so now I can bring some of the design through.

The controls do support both HTML and XAML design, if the current version of the controls do not include either or; I assure you the version you seek is in development and on its way.

Getting Started

The RadCustomHubTile allows **any **user-defined content rather than predefined parts that you may find in a RadHubTile or RadSlideTile, and as in most if not all of the Telerik controls; MVVM as well as code based binding is supported.

Prior to trying this example, please download the controls from Telerik and note that I am using MVVM Light as the MVVM Framework.  You can see how to install MVVM Light via nuget by opening the Package Manager console and running “Install-Package mvvmlight”.  If you have any trouble with that please see http://mvvmlight.codeplex.com or contact me via twitter (@spboyer) OR see my blog post on how to get started with Windows 8 and MVVM Light.

In the following example you will see:

• MVVM Binding
• Content locally bound
• Content bound from an internet URI
• Complex front and back content for the tileThis is a moderately simply example.  I started with a Blank Solution in Visual Studio 2012 and called it RadCustomHubTile (in retrospect probably should have stuck with App1).

Install the MVVM Light Framework via nuget (see above), you will have to make a change to the App.xaml file.  When installing this, it adds the reference to the namespace in the old way

_  xmlns:vm=“clr-namespace:RadHubTile.ViewModel” _

you need to change this to:

_ xmlns:vm=“using:RadHubTile.ViewModel” _

 A little house keeping to make it look nice. Yes I care what it looks like even for this. Go ahead and add the following below the tag to add the header to the initial page.  You can change the title if you like and run (F5).

<Grid.RowDefinitions>     </Grid.RowDefinitions>

<TextBlock  Text="{Binding UserName}" 
    Foreground="White" Height="43" 
    VerticalAlignment="Bottom" Margin="0,0,0,14" 
    Style="{StaticResource SubheaderTextStyle}"/>

    public string Photo
    {
        get { return "http://3.bp.blogspot.com/-yBHsXXtsWWo/UCkc916wnfI/AAAAAAAAAN0/FcKOE2P-gGQ/s1600/profilepic.png"; }
    }

    public string UserName
    {
        get { return "Shayne Boyer"; }
    }

    public ImageSource Thumbnail
    {
        get { return new BitmapImage(new System.Uri(new Uri("ms-appx:"), "/Assets/RadCustomHubTile.png"));}
    }

    public string Title
    {
        get { return "Telerik Windows 8 UI Controls"; }
    }

    public string SubTitle
    {
        get { return "RadCustomHubTile"; }
    }
}