×
Namespaces

Variants
Actions
(Difference between revisions)

Picture Rotator Hub Tile in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - Introduction)
somnathbanik (Talk | contribs)
(Somnathbanik - - Introduction)
Line 24: Line 24:
 
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.  
 
   
 
   
<gallery widths=200px heights=350px>
+
<gallery widths=200px heights=300px>
 
File: wp_ss_20140701_0001.png|Picture Rotator Hub Tile
 
File: wp_ss_20140701_0001.png|Picture Rotator Hub Tile
 
File: wp_ss_20140701_0002.png|Picture Rotator Hub Tile
 
File: wp_ss_20140701_0002.png|Picture Rotator Hub Tile

Revision as of 17:05, 1 July 2014

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
Compatibility
Platform(s):
Windows Phone 8
Article
Created: somnathbanik (30 Jun 2014)
Last edited: somnathbanik (01 Jul 2014)

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.

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.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:local="clr-namespace:PictureRotatorEx">
<Style TargetType="local:PictureRotatorTile">
 
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PictureRotatorTile">
 
<Grid>
<StackPanel x:Name="stkPictureRotator"
Orientation="Vertical"
Height="{TemplateBinding TileHeight}"
Width="{TemplateBinding TileWidth}" >
 
<Image x:Name="imgTileFirst" Stretch="UniformToFill"/>
<Image x:Name="imgTileSecond" Stretch="UniformToFill"/>
 
</StackPanel>
<ContentPresenter
x:Name="ContentContainer"
Content="{TemplateBinding TitleTextBlock}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

• 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)
{
try
{
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;
 
MyStory.Children.Add(My_Double);
 
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.Begin();
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

<CustomControl:PictureRotatorTile  
 
TitleVerticalAlignment="Bottom"
TitleHorizontalAlignment="Left"
ImageActualHeight="358"
TileHeight="158"
TileWidth="358"
VerticalAlignment="Center"
HorizontalAlignment="Center" >
 
<CustomControl:PictureRotatorTile.TitleTextBlock>
<TextBlock Text="Picture Rotator Hub" FontSize="22" Margin="6,0,0,0" VerticalAlignment="Bottom" ></TextBlock>
</CustomControl:PictureRotatorTile.TitleTextBlock>
 
</CustomControl:PictureRotatorTile>

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.

Source Code

153 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×