Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 17:44, 1 July 2014 by somnathbanik (Talk | contribs)

Picture Rotator Hub Tile in Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrate how to create Picture Rotator Hub Tile in Windows Phone.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820,920
Windows Phone 8
Created: somnathbanik (30 Jun 2014)
Last edited: somnathbanik (01 Jul 2014)



Hello friends, how are you doing these days? Recently I was exploring how to create Custom Controls, and during the course of creating Custom Control I went through some nice experience and want to share with you all. In this article we will create a Picture Rotator Hub Tile like we have in Photo Hub in Windows Phone using Custom Control.If you are new to Custom Control there is a nice article which you can refer with.


Create a standard Windows Phone Project

Let’s create a standard Windows Phone Application Project

  • Launch Visual Studio
  • Click on File
  • Click on New Project
  • Select Windows Phone App (Visual C# Template)
  • Add Name and Location of the project
  • Click OK to create the project.

Create a Custom Control Project

  • Right Click on Project Solution
  • Click on Add
  • Select New Project
  • Select Windows Phone Class Library
  • Add Name and Location of the project
  • Click OK to create the project.
  • Now create a Themes folder in the project
  • Create generic.xaml file inside the Themes folder, and make sure the Build Action of the generic.xaml is set to Resource.
  • Create a class file PictureRotatorTile.cs into the project.
  • Finally add the Custom Control project reference to your main project.

Creating UI

  • Now you are ready to write code in your project. Open the generic.xaml file and add two Image controls inside ControlTemplate. This two image controls will display the images alternatively. To make it more similar like the Photo Hub you can also add a TexBlock in the custom control.
<Style TargetType="local:PictureRotatorTile">
<Setter Property="Template">
<ControlTemplate TargetType="local:PictureRotatorTile">
<StackPanel x:Name="stkPictureRotator"
Height="{TemplateBinding TileHeight}"
Width="{TemplateBinding TileWidth}" >
<Image x:Name="imgTileFirst" Stretch="UniformToFill"/>
<Image x:Name="imgTileSecond" Stretch="UniformToFill"/>
Content="{TemplateBinding TitleTextBlock}"/>
  • In this example for displaying the text we create a DependencyProperty of the TextBlock and set it to Content of the ContentPresenter.
public TextBlock  TitleTextBlock
get { return (TextBlock)GetValue(TitleTextBlockProperty); }
set { SetValue(TitleTextBlockProperty, value); }
// Using a DependencyProperty as the backing store for TitleTextBlock. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TitleTextBlockProperty =
DependencyProperty.Register("TitleTextBlock", typeof(TextBlock), typeof(PictureRotatorTile), null);

Code Behind

  • We have extended the custom control class from ContentControl and overwrite the OnApplyTemplate() method. In OnApplyTemplate() method we get the Template Child of both the images and call GetTileImages() method; which then creates the list of images and start the animation. In this example we are rotating the Images in Y axis. Just with a small change in TranslateTransform property you can rotate the images in X axis also.
private void PictureAnimationEntryFirst(string aImage)
BitmapImage bmp = new BitmapImage(new Uri(aImage, UriKind.RelativeOrAbsolute));
imgTileFirst.Source = bmp;
TranslateTransform trans = new TranslateTransform() { X = 1.0, Y = 1.0 };
imgTileFirst.RenderTransformOrigin = new Point(0.5, 0.5);
imgTileFirst.RenderTransform = trans;
Duration Time_duration = new Duration(TimeSpan.FromSeconds(5.0));
Storyboard MyStory = new Storyboard();
MyStory.Duration = Time_duration;
DoubleAnimation My_Double = new DoubleAnimation();
My_Double.Duration = Time_duration;
EasingFunctionBase ease = new QuarticEase();
ease.EasingMode = EasingMode.EaseInOut;
My_Double.EasingFunction = ease;
Storyboard.SetTarget(My_Double, imgTileFirst);
Storyboard.SetTargetProperty(My_Double, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.Y)"));
My_Double.From = 0;
My_Double.To = - (TileActualHeight-iTileHeight);
MyStory.Completed += MyStory_Completed;
catch (Exception ex)

Adding custom control in main project

  • Open MainPage.xaml and add the namespace
xmlns:CustomControl ="clr-namespace:PictureRotatorEx;assembly=PictureRotatorEx"
  • Now to display the control add the below code in the MainPage.xaml
HorizontalAlignment="Center" >
<TextBlock Text="Picture Rotator Hub" FontSize="22" Margin="6,0,0,0" VerticalAlignment="Bottom" />

TitleVerticalAlignment, TitleHorizontalAlignment, TileHeight, TileWidth and ImageActualHeight are the DependencyProperty of the control, which defines the vertical and horizontal alignment, tile height and width and the image size used in the control.


  • This article is mainly focused on creating Picture Rotator Hub Tile, with a hope that you already have the basic knowledge of Custom Control and it’s properties like DependencyProperty ,OnApplyTemplate(), ControlTemplate, ContentPresenter, ContentTemplate etc and their usages. If you are new to custom control I would highly encourage you to get the basic understanding of Control, ItemsControl, ContentControl.

Please share your views in the comment section, so that I can come up with better article next time.

Source Code

360 page views in the last 30 days.