Expression Studio for Developers and Windows Phone 7 Design Guidelines content available for download

  • Article

Expression Studio for Developers

Plain VS2010

With the growing interest in Windows Phone 7 development Blend (now included free with the WP7 Dev Tools) interest has really started to peak.  A well known BlendFanBoy I jumped at the chance when asked if I could do an Expression Studio for Developers session for this falls Philly.Net CodeCamp.  The sessions intent was to cover what a normal .NET Developer could gain out of a beginning knowledge of Blend. 

DesignFirst-Sketchflow Blendable

We started off by covering the basics of XAML and Expression Studio.  We then jumped into Visual Studio 2010 and created a simple Silverlight 4 UI I think most developers would be familiar with.  But this is Expression Studio so its i time to let our inner creativity shine!  After firing up Sketchflow we created a working prototype of our new UI including navigation and animation.  Once our users had approved this prototype (including leaving feedback and a final design worddoc) we loaded up the same plain Silverlight UI we built in VS2010 into Blend.  We created a bunch of animation, embedded free web fonts, added some background brushes and ended up templating a few controls.  You can grab the slides and code here.

 

From Idea to Interactivity Design Guidelines for WP7

Design-Metro-WP7

One of the biggest requests from developers is more information on creating a Windows Phone 7 application that takes full advantage of the Metro Design philosophy.  I covered a portion of this at our Windows Phone 7 Firestarters but for the National Developer Launches I created an entirely separate track dedicated to the design.  It is priceless seeing the smiles go across traditional .NET Developers faces when they first realize how easy it is to add animation to their apps.

We started off with the design philosophy behind metro, hitting on some of the official WP7 design guidelines, we worked our way into Blend and began going over how to create layout that will automatically scale for your user.  We then went over some of how to use the default phone templates to ensure a great experience regardless of the color themes a user has selected.  We used the new Device pallete inside Blend as well as the updated RTM WP7 Emulator.

Templates Blendorientation

We ended up by handling the Orientation Changed event and having our layout stretch based on being in a horizontal or vertical orientation.  Since this is metro and we want to delight our users with some smile moments increasing the pixel size was not enough.  We created some storyboards that had our UI literally bounce when the user rotates the phone and then we showed how easy it was to load this back into Visual Studio 2010 and debug.   You can grab the slides and code here.

Happy coding!