×
Namespaces

Variants
Actions
Revision as of 04:29, 10 April 2013 by hamishwillee (Talk | contribs)

Silverlight animation with Expression Blend (and no code)

From Nokia Developer Wiki
Jump to: navigation, search
{{{width}}}
18 Nov
2012

This tutorial shows how to create powerful object animation using Microsoft Expression Blend. This is a complementary article to 2D games using Silverlight series.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: WP 7.1 or higher
Devices(s): Lumia 610 and higher
Compatibility
Platform(s): Windows Phone 7.5, Windows 8
Windows Phone 7.5
Device(s): none
Dependencies: none
Platform Security
Signing Required: not applicable
Capabilities: none
Article
Keywords: games SilverLight WindowsPhone Windows 8
Created: izinin (20 Sep 2012)
Last edited: hamishwillee (10 Apr 2013)

Contents

Introduction

Microsoft Expression Blend (included in the Windows Phone SDK) is a powerful visual design tool for making visible elements and effects in Silverlight applications. It can be used simultaneously with Visual Studio on the same opened project - modifications made in either tool become immediately available in other.

Using the tool to create basic (though still excellent!) application user interfaces is straightforward. However some of the more advanced features are less obvious: for example animating controls or adding artwork to a Windows Phone application project.

This article takes you past the basics and shows you how to create and import artwork into Expression Blend, and how to use it in animations. The article assumes you have created an application framework using the standard Windows Phone application template in Visual Studio.


Creating artwork and importing it to Expression Blend

Where possible you should use vector graphics: bitmap graphics are not recommended because the aren't scalable and can result in slower application performance. Expression Blend can import scalable formats output by (costly) tools like Adobe Illustrator and Adobe graphics suite, or the free open source editor Creature House Expression 2003[1].

Note.pngNote: Creature House Expression 2003 is the best free tool we found for creating artwork for Windows Phone:

  • Silverlight does not support SVG graphics (as this is considered a competitor to XAML).
  • Inkscape (free tool) cannot at time be used to create artwork for Windows Phone. Images saved as XAML work on Internet Explorer on desktop, but they don't work on Windows Phone because they contain several unrecognised tags.


Here is the workflow:

  • Create an art in Creature House Expression and export it into Adobe Illustrator document format
    Exporting to illustrator.png
  • Open your project in Microsoft Expression Blend
  • Select MainPage.xaml in project explorer pane and open it. When a "xaml" document is opened, import menu is enabled and allows you to get an artwork into it. After the importing we can rearrange the graphic and make a UserControl from it. Having UserControl derived class will give us great freedom in its use, for example we can instantiate it dynamically, can have several instances, etc. Converting graphics to UserControl will be explained further in the document.
  • Import your artwork
    Importing artwork.png
  • Check Objects and timeline pane. In MainPage.xaml document object tree you should find imported graphics named after the graphic file. In my example it is “Apple”.
  • Make a UserControl from it
    Making user control.png
  • Open Apple.xaml document for further modification. We are going to use it as a subject for our animation demo


Composing a subject for animation

In the animation demo we are going to present the life-cycle of an apple: from a bud to blossom and finally a fruit. To make the animation we need two more graphic objects: bud and blossom. Create and export them in AppleControl.xaml document the same way as we did it for the apple. You do not need to make UserControls from them but group them using canvas.

Arrange the bud, blossom and fruit in the center of canvas and make the blossom and fruit invisible. That is initial state of our animation: user will see only the bud. Note that the grouping canvas is transparent by default. That allows us freely place our AppleControl on any other control. The screenshots below show each of the steps:

Create the subject animation and use it on the application main page

The following images show the steps for creating the animation (click on the images to see a larger version)

  • Save your work :) .
  • Close all opened documents. Go to project explorer pane and open MainPage.xaml
  • Build your application. Go to Assests pane and find AppleControl in the control list. Add AppleControl to MainPage.xaml document.
    Mainpage composing.png
  • Try on device or emulator!

The project source code

File:Wp7 animation demo.zip

Notes

  1. Creature House Expression 2003 was purchased by Microsoft and further developed, but you can still use the original open-source version from www.microsoft.com
173 page views in the last 30 days.