Tools

Namespaces

Variants

Views

Actions

Search

Contents

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.

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 [http://www.geekchamp.com/articles/creating-a-wp7-custom-control-in-7-steps article] which you can refer with.

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 [http://www.geekchamp.com/articles/creating-a-wp7-custom-control-in-7-steps article] which you can refer with.

−

+

[[File: wp_ss_20140701_0005.png|thumb|none|350px|Collage app]]

<gallery widths=200px heights=350px>

<gallery widths=200px heights=350px>

File: wp_ss_20140701_0001.png|Picture Rotator Hub Tile

File: wp_ss_20140701_0001.png|Picture Rotator Hub Tile

Revision as of 16:41, 1 July 2014

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

Contents

Introduction

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.

Collage app

Picture Rotator Hub Tile

Picture Rotator Hub Tile

Implementation

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.

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.

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.

Summary

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.
Please share your views in the comment section, so that I can come up with better article next time.