electric beach

Christian Schormann

Monday, March 15, 2010

Introducing Expression Blend for Windows Phone

Windows Phone is an amazing platform to use and to design applications for. We are very proud to make a preview version of authoring for Windows Phone available with Expression Blend 4. Downloads will be available around 10:45am today at http://developer.windowsphone.com.

For those of you who have already been using Blend for designing applications for Silverlight or WPF, creating applications for Windows Phone will be a very familiar experience: Basically, authoring is almost entirely identical with the design experience for Silverlight. All your existing skills are still valid, and you can be immediately productive for the new Windows Phone platform.

For an overview of some of the news on Blend 4 in general, please see this post

Blend Recap

Before we go into some detail about the specifics of the Blend experience for Windows Phone, a quick summary of Expression Blend for those of you who are not yet familiar with Blend. I like to think of Blend as a compositing system for user experiences: An integrated design environment for interactive applications and content that blends (pun intended) content creation, styling, layout, animation, designing for and with data and creating interactivity.

Blend also focuses heavily on designer-developer workflow: Blend shares the same project structure with Visual Studio, enabling designers and developers to effectively work on the same artifacts. But even more, Blend supports and provides concepts that are effective hand-off points between designers and developers, such as data binding and sample data, or behaviors.

Blend integrates well with other parts of the content pipeline: Blend can handle multi-layer Photoshop files and import from Illustrator. Blend provides the tools that let designers convert static assets into interactive elements.

Last not least, Blend also comes with SketchFlow, a built-in prototyping system that makes it much easier to create deep, dynamic and interactive prototypes of user experiences, and to review these prototypes with all stakeholders in the process.

Blend for Windows Phone

Windows Phone applications are Silverlight applications, specifically, Silverlight 3 applications with a number of phone-specific extensions. For an introduction of the developer platform, see this post from Anand Iyer

So, fundamentally, the Blend experience with a Windows Phone project gives you roughly the equivalent of the Blend editing features available in Blend 3. That is, you can use controls, layout, animation, visual states, state transitions, easing functions, behaviors, and all the other good things that Blend provides.

To enable design for Windows Phone with the Expression Blend beta now available for download, you need to install a few additional bits. Details about this at the end of this post, and at http://developer.windpowsphone.com.

Once you have installed the necessary pieces, you’ll see two new project templates in Blend:

B4NewProject

One is a plain Windows Phone application template, the other has some built-in boiler-plate support for the MVVM (Model-View-ViewModel) design pattern that is very popular with developers.

Once your project is created, there are two differences that pop up: On the art board, you see a stand-in frame around the actual page you are building to visualize the phone chrome. And there is a new panel labeled “devices” in the Window menu that lets you change the orientation of your project on the design surface from project to landscape.

B4NewApp  

Windows Phone styles for controls look very different then the styles you get in WPF or Silverlight. Blend respects that, and all controls that you put onto the design surface by default appear with the default style for Windows Phone:

B4Controls

Of course, you can still use style editing to create your own custom styles…

Additionally to the default styles for controls, there are a number of pre-defined resources that make it easier to keep things in line with the Windows Phone style guide. Currently, these resources can be accessed through the EditStyle context menu:

B4PredefStyle 

Of course, at some point, you will want to run your application. Blend 4 for Windows Phone lets your run phone applications either on an actual phone device, or on an emulator. When you hit F5 or select Run Project from the project menu, in the preview you get a dialog to choose the destination for publish:

B4DeviceSelection  

And once you have done this, your app will come up on emulator or device:

B4Emulator

One cool thing about the emulator is that it supports multi-touch if you run on a multi-touch Windows 7 machine.

For developers, there is of course Visual Studio for Windows Phone. Of course, Blend 4 will integrate with with VS just as it does for normal Silverlight and WPF projects. That is, you can design and develop concurrently.

Get The Bits

To get started designing Windows Phone applications with Expression Blend 4, here are the various beta and preview bits you need. Currently, there are four separate installers, but this will be simplified in the future.

  • Blend 4 Beta
  • the CTP of the Windows Phone Developer Tools
  • A preview version of the Blend 4 add-in for Windows Phone
  • A preview version of the Blend 4 SDK for Windows Phone

All four can be found via http://developer.windowsphone.com.

posted by cs at 09:41  

8 Comments

  1. [...] Introducing Expression Blend for Windows Phone - by Christian Schormann [...]

    Pingback by Great news from MIX: Windows Phone development, Silverlight 4 RC available! | DavideZordan.net — March 15, 2010 @ 10:41

  2. Social comments and analytics for this post…

    This post was mentioned on Twitter by cschormann: http://electricbeach.org/?p=460...

    Trackback by uberVU - social comments — March 15, 2010 @ 14:15

  3. [...] from electric beach            more here [...]

    Pingback by Introducing Expression Blend for Windows Phone — March 15, 2010 @ 22:52

  4. [...] To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460 [...]

    Pingback by Panoramic Navigation on Windows Phone 7 with No Code! | Innovative Singapore — March 17, 2010 @ 18:51

  5. [...] To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460 [...]

    Pingback by Panoramic Navigation on Windows Phone 7 with No Code! | Aimee Gurl... — March 17, 2010 @ 22:20

  6. [...] was followed by Jon Harris demonstrating a design-oriented creation experience using Expression Blend 4 for Windows Phone to create a nifty PhotoDiary application – complete with the emulator experience in Blend as [...]

    Pingback by Tune Up Your PC » Post Topic » What’s Up at Mix: Silverlight And Windows Phone 7 Series — March 19, 2010 @ 06:08

  7. [...] Introducing Expression Blend for Windows Phone "Windows Phone is an amazing platform to use and to design applications for. We are very proud to make a preview version of authoring for Windows Phone available with Expression Blend 4." – [electric beach] [...]

    Pingback by BI-Curious » Friday Bullets — March 19, 2010 @ 20:03

  8. [...] To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460 [...]

    Pingback by Panoramic Navigation on Windows Phone 7 with No Code! | Innovative Singapore | Microsoft Innovation Centre Singapore — March 31, 2010 @ 18:56

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress