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. 

<Grid.RowDefinitions>  
 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>
 <Button x:Name="backButton"  Style="{StaticResource BackButtonStyle}"/>
 <TextBlock x:Name="pageTitle" Text="Rad Custom Hub Tile" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Foreground="#FFADD808"/>
</Grid>

Next, lets add the RadCustomHubTile Control, and the best way to do this is to simply drag it from the toolbox right into the spot within the XAML. This is something you could not do in Windows Phone which is a big step in my opinion.

It will add the namespace and the references to the project.

To clean it up a little and make sure that you are using within the design guidelines, wrap the RadHubControl with a Grid with the following settings.

<Grid Grid.Row="1" Margin="115,0,0,0">

  <Primitives:RadCustomHubTile />

</Grid>

<Primitives:RadCustomHubTile Height="300" Width="300">  
 <Primitives:RadCustomHubTile.FrontContent>
  <Grid>
   <Image x:Name="imgBlogger" 
        Source="{Binding Photo, Mode=TwoWay}" 
        Height="300" Width="300" 
        Stretch="UniformToFill" Margin="0" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Center" />

   <Rectangle Height="65" Fill="#99000000" VerticalAlignment="Bottom" />

   <StackPanel Orientation="Horizontal">
    <TextBlock  Text="Blogger:" 
        Foreground="White" Width="126" Height="43" 
        VerticalAlignment="Bottom" 
        Margin="10,0,0,14" Style="{StaticResource SubheaderTextStyle}" 
        HorizontalAlignment="Left" />

    <TextBlock  Text="{Binding UserName}" 
        Foreground="White" Height="43" 
        VerticalAlignment="Bottom" Margin="0,0,0,14" 
        Style="{StaticResource SubheaderTextStyle}"/>
   </StackPanel>
  </Grid>
 </Primitives:RadCustomHubTile.FrontContent>

 <Primitives:RadCustomHubTile.BackContent>
  <Grid>
   <Image x:Name="img" 
         Source="{Binding Thumbnail, Mode=TwoWay}" 
         Height="300" Width="300" 
         Stretch="UniformToFill" Margin="0" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" />

   <Rectangle Height="65" Fill="#99000000" VerticalAlignment="Bottom" />

   <TextBlock  Text="{Binding Title, Mode=TwoWay}" 
        Foreground="White" Width="270" Height="30" 
        VerticalAlignment="Bottom"  
        Margin="0,0,0,30" Style="{StaticResource BasicTextStyle}" />

   <TextBlock  Text="{Binding SubTitle, Mode=TwoWay}" 
        Foreground="White" Width="270" Height="30" 
        VerticalAlignment="Bottom" Margin="0,0,0,5" 
        Style="{StaticResource BasicTextStyle}"/>
  </Grid>
 </Primitives:RadCustomHubTile.BackContent>
</Primitives:RadCustomHubTile>

Note that you will want to wrap your content with the FrontContent / BackContent tags in Grid, StackPanel etc as the designer will give you the "Content cannot be set more than once error".

Here is the MainViewModel that is bound. Note that the Blogger image (me), is pulled from an internet source uri and the back image is pulled from the project itself. The string properties are bound simply.

using GalaSoft.MvvmLight;  
using System;  
using Windows.UI.Xaml.Media;  
using Windows.UI.Xaml.Media.Imaging;

namespace RadHubTile.ViewModel  
{
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel() { }

        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"; }
        }
    }
}

So what does it all look like?

Front

Back

One other item to note is that you can alter the duration of the flip/rotation by setting the UpdateInterval which is a TimeSpan. So setting the value to "0:0:5" would be equal to 5 seconds.  There is also FlowDirection and many other properties to customize the Tile to your liking.  I'd like to see what you can do with it.  Download the controls today and let me know what you working on and if you have any questions.