Revision as of 13:49, 5 February 2014 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Creating custom user control in Expression Blend for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article describes creating a custom user control for Windows Phone using Expression Blend.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: Media:AnimTile.zip
Tested with
SDK: Windows Phone 7.1 SDK
Devices(s): Lumia 800, Emulator
Platform(s): Windows Phone 7.5
Windows Phone 7.5
Created: manikantan (15 Feb 2012)
Last edited: hamishwillee (05 Feb 2014)



The article shows how to develop custom user controls and explains the communication between items on main page and the user control. The custom user control used in this application is similar to ME hub shortcut in the homescreen of windows phone. It consists of an image in the background and a rectangle(with textual description) that animates vertically on top of the image

The application is explained in Expression Blend because that is the best environment for design. The user control created complies with the Windows Phone design guidelines. The popular application SGTransport uses a similar control.

Ss1ctrl.png Ss3ctrl.png

Creating the bare bones

  1. Create a Blank Windowsphone application page in Expression Blend.
  2. Change title of the application page title to "Anime Tiles"
  3. To create a new control, goto File->New Item->User control. Give it a name, I have named it AnimBox

The User control

The ME hub tile on homescreen animates in the homescreen. The user control we will create in this application is similar to this ME Hub tile. It consists of an image in the background and a rectangle(with textual description) that animates vertically on top of the image. This kind of widgets or controls are also common in windows phone application and they also give a rich appearance. To flash designers, a user control is the equivalent of a movieclip. Step 3 gave as two new files, AnimBox.xaml and AnimBox.xaml.cs

  1. In the XAML create three items inside. Image, rectangle and TextBlock. Give them names - img, rectangle and txt respectively.
  2. Create a Clipping rectangle with the same dimensions of the image, so that only things visible in that region is shown. To those familiar with Flash, Clipping is equivalent of masking.
  3. Next is the task of animating the rectangle and txt. Animations are done via Storyboards in Silverlight. These storyboards are textual descriptions of animation that are visible in the XAML. The storyboard name is "animate". Since textually describing creation of storyboard is not appropriate, I am pasting the XAML below.
    d:DesignWidth="480" d:DesignHeight="800" Width="100" Height="100">
    <Storyboard x:Name="animate">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle">
    <EasingDoubleKeyFrame KeyTime="0" Value="-7"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="14"/>
    <EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="45"/>
    <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="45"/>
    <EasingDoubleKeyFrame KeyTime="0:0:5" Value="100"/>
    <EasingDoubleKeyFrame KeyTime="0:0:6" Value="-7"/>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:6" Value="0"/>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="txt">
    <EasingDoubleKeyFrame KeyTime="0" Value="-7"/>
    <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="14"/>
    <EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="45"/>
    <EasingDoubleKeyFrame KeyTime="0:0:4.5" Value="45"/>
    <EasingDoubleKeyFrame KeyTime="0:0:5" Value="100"/>
    <EasingDoubleKeyFrame KeyTime="0:0:6" Value="-7"/>
    <Grid x:Name="LayoutRoot" Background="Transparent" Width="100" Height="100">
    <Image x:Name="img" Margin="8"/>
    <Rectangle x:Name="rectangle" Fill="#FF5C5CB6" Margin="0,-101,0,0" Stroke="Black" RenderTransformOrigin="0.5,0.5" Height="100" VerticalAlignment="Top">
    <TextBlock x:Name="txt" Height="23" Margin="1,-27,-5,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
    <RectangleGeometry Rect="0,0,100,100" />
  4. Now to start this animation at a random time, we should start a thread that is local to this AnimBox.
  5. In AnimBox.xaml.cs file, in the constructor, create a DispatcherTimer that fires every random x seconds.
  6. In the tick handler of the DispatcherTimer, start the animation.
    	public partial class AnimBox : UserControl
    private int timeperiod = 0;
    private Random rnd;
    private DispatcherTimer dt;
    public AnimBox()
    // Required to initialize variables
    rnd = new Random();
    dt = new DispatcherTimer();
    timeperiod = rnd.Next(7,10);
    dt.Interval = new TimeSpan(0,0,timeperiod);
    dt.Tick +=new System.EventHandler(dt_Tick);
    private void dt_Tick(object sender, System.EventArgs e)
    // TODO: Add event handler implementation here.
    System.Diagnostics.Debug.WriteLine("tick" + this.Name);
    With this, creation of the user control is complete. This control can be used in other projects as well, if imported.
  7. Now, to instantiate the user control on the main page, place instances of this user control(AnimBox). You can find the user control in the Assets toolbar in Expression Blend. If you don't find it, Build your project and you'll see it later.
  8. Drag instances of the AnimBox to the mainPage.
  9. Assign the instance of AnimBox with a suitable name, aBox1 and aBox2 are my names.
  10. Now in the constructor of MainPage.xaml.cs, assign image source and text label values. Note that elements inside a user control are available to the main page.
        public partial class MainPage : PhoneApplicationPage
    public MainPage()
    aBox1.img.Source = (ImageSource)( new BitmapImage(new Uri("lumia710.jpg",UriKind.RelativeOrAbsolute)) );
    aBox2.img.Source = (ImageSource)(new BitmapImage(new Uri("lumia800.jpg", UriKind.RelativeOrAbsolute)));
    aBox1.txt.Text = "Lumia 710";
    aBox2.txt.Text = "Lumia 800";


You can download the entire source code File:AnimTile.zip


This article concentrates on designing and integrating of custom user controls.

This page was last modified on 5 February 2014, at 13:49.
222 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.