electric beach

Christian Schormann

Monday, March 15, 2010

Introducing Blend 4 – For Silverlight, WPF and Windows Phone

It feels like it was only yesterday when we boarded the plane to fly to Las Vegas to Mix 2009, where we announced Blend 3 and SketchFlow. Thank you all so much for the wonderful reception you gave to Blend 3, by the way.

I can hardly believe it is time for Mix 2010 already – and that it’s time to introduce the next release of Blend…

If you happen to be in Las Vegas, please come and see our sessions on Blend and SketchFlow here at Mix!

Blend 4 running a Windows Phone project, with the Windows Phone Emulator

In Scott Guthrie’s Mix keynote this morning (see http://live.visitmix.com), Jon Harris gave a demo of Blend 4. A beta version is available for download here. Oh, and please stay tuned after Mix: There’ll be a few more new things for Blend and SketchFlow when Blend 4 officially launches later this year.

Without further ado, let’s walk through some of the new things we are showing here at Mix.

There is way more in the Blend 4 beta than I can possibly describe in this post, so please download the beta and give it a try!

Blend for Windows Phone

The rumor mill has already been saying it tirelessly: There will be a Blend for Windows Phone. Now it is official. You can create applications for Windows Phone 7 Series in Blend 4, and it feels just like making Silverlight apps. . I am of course not objective, but I think Blend 4 is one of the coolest ways to design and create apps for any phone around… :-)

For this preview, the Blend tools for Windows Phone are still a separate installer. In order to use the Blend 4 beta for developing Windows Phone applications, you therefore will need to install:

I’ll update this post with links as soon as I have them.

In Windows Phone projects, you get access to all Blend UX design tools: You can draw, layout, animate, work with states and transitions, build interactivity with behaviors, use sample data, design for data, import visuals from Photoshop or Illustrator, and so forth.

When you use controls, Blend automatically makes sure that you get the right styles, so that buttons and other controls don’t look like default Silverlight controls, but show the right skin for the phone.  

You can of course also run your apps right from Blend, either in the Windows Phone emulator, or directly on a phone.

I’ll have a separate, in-depth post on Blend for Windows Phone out later. See more details on the coolest way to design Windows Phone applications then :) !   

Also, here is a great post from Anand Iyer on developing for Windows Phone…

Platform Support: Silverlight and WPF

Blend 4 now supports Silverlight 4 and WPF 4, and of course it works great together with VS 2010. As many customers still need to deliver SL3 (and of course, Windows Phone) or WPF 3.5 projects, Blend can now handle multi-targeting – which is the ability to target a project at either the current or the previous generation of the platforms.

SketchFlow in Blend 4

There are many new features in Blend 4 that directly benefit SketchFlow users, as well as a set of things we are not quite ready to talk about here at Mix.

New Behaviors, Conditions

Blend’s behavior system has been very popular with SketchFlow users, because it lets you create rich interactivity with no code or much less code. We did get frequent requests for behaviors to store state between screens, and ways to do things such as login screens, where custom logic needs to be applied. To address these and other prototyping and production scenarios, we added a set of new behaviors, and you now can apply behaviors conditionally. I’ll have a separate post on behaviors in Blend 4 soon, with much more detail.

Conditions

SketchFlow Player

In the SketchFlow player you can now pan and resize the screens at runtime. This makes it much easier to explore dynamic layout in prototypes, and to handle prototypes with very large screen sizes.

There are quite a few more new things to discover for SketchFlow in Blend 4 and as I said, there will be more news in the near future. I’ll have a separate post on this soon.

A New Take on Layout

One of my favorite features in Blend 4 is a new way of defining layout for things. In modern experiences, visuals and data frequently need to be laid out in richer ways than a horizontal or vertical list. The following picture shows both the original design sketch and the finished version of a radial list box, from the Expression Blend 3 samples:

RadialSample

WPF and Silverlight offer great support for developers to provide custom layout panels, but the problem is that creating a new layout panel involves writing a bunch of non-trivial code. And that is not a particularly design-friendly state of affairs.

One of our goals for Blend is to enable designers to be able to realize as much of their imagination and inspiration as possible in a visual, direct way, without having to write code or enlist the help of a programmer. 

To help with interesting complex layouts, Blend 4 introduces a new component with a simple idea: Why write code to define the geometry of a desired layout when you can just draw it?

With the new PathListBox control, this is exactly what you do: You simply draw one or more curves or shapes, and Blend will layout elements or data along the geometry you created. A radial list box? Instead of writing a radial layout manager, just draw a circle. A spiral? Just draw it.

PLBSampler

The path-based layout technique lets you not just create static layouts, but the path elements and all layout properties can also be animated. Every time I play with it, I find new and unexpected ways to put it to creative use: data lists with fancy geometric layout, geometric animation, broadcast-style replicator effects, data visualization and so on.

I’ll post more on this over the coming weeks. We will also talk about it in the Blend session at Mix Monday from 2pm to 3pm.

Fluid Move

A common problem in dynamic layout environments is the need to morph between different layouts with smooth transitions. With Blend 3, we delivered our first take on this, with a feature called Fluid Layout, which is part of the States pane. Fluid layout enables smooth layout morphing even between layouts that involve discrete or non-animate-able properties.

In Blend 4, Fluid Layout has learned many new tricks: It is now possible to animate things in and out of lists and item controls. You can also animate things that move between lists, for example a shopping item from a catalog into a shopping cart. Finally, you can now define layout animations between a master list and a detail view – I know that sounds dry, but it isn’t at all when you see it. Kenny Young, architect extraordinaire on the Blend team has a session on this Wednesday at Mix, a must-see for connoisseurs of the art of layout.    

Ready for Business

One of the core goals of Silverlight 4 was to be ready for business applications. The Blend team took on the same objective, focusing in particular on designer-developer workflow. We wanted to ensure that designers would be able to create UI for real world back-end architectures provided by developers, with features including:

  • Blend 4 can generate sample data for arbitrary CLR classes, even for classes that have private constructors, properties without setters and so on. This enables designers to design against data even in scenarios where a developer-supplied data model already exists as code
  • You can now bind execution of methods and commands against UI elements with drag and drop. Methods and commands of CLR objects show up just like data in the data pane:
    Methods
  • Modern applications are often broken into dynamically loaded modules. At design time, this often leads to problems because not all required resources are available in an individual module. With Blend 4, designers can load in a temporary resource file that is only used for resource resolution at design time, enabling a great design experience even in complicated modular scenarios
  • Model-View-ViewModel is a popular design pattern amongst Silverlight and WPF developers. With Blend 4, we provide a number of behaviors that make designing against an MVVM model much easier. We also provide project and item templates for MVVM projects.

State Transitions

No blog post should ever end without some visual candy. In Blend 3, we introduced the ability to set easing functions for state transitions. In Blend 4, we’re adding transition effects that are applied during a state transition, just like transitions in a video editor.

Blend comes with a set of new shader effects specifically for transitions and you can also roll your own. The following picture shows a few samples, applied to a state transition between two images:

FX

While we were at it, we also added a few standard effects you can apply to any element to the Blend 4 SDK:

Effects

To Close…

Thanks a lot for reading about Blend 4. Please download the beta version, and let us know what you think. And if you have a chance, the Mix sessions will provide explanations and demos that will also be available in video form.

Regards,

    CS

posted by cs at 10:00  

11 Comments

  1. [...] Expression Blend 4 add-on for Windows Phone (Christian Schormann’s blog) [...]

    Pingback by MIX Keynote live blogging! (próba) - Hírcsatorna - devPortal — March 15, 2010 @ 10:06

  2. [...] Designers are a crucial piece to our application development story. Especially since Silverlight is one of the key developer platforms on board, we want to enable designers to be able to do their jobs well. Expression Blend is a tool that helps designers design Silverlight based applications. Today, we have a preview of Expression Blend 4 for Windows Phone available which is also free. Christian Schormann is the authority on our team on Expression Blend – be sure to read his blog post on Expression Blend 4. [...]

    Pingback by Developing for Windows Phone 7 Series | artificial ignorance — March 15, 2010 @ 10:18

  3. [...] Introducing Blend 4 – For Silverlight, WPF and Windows Phone - by Christian Schormann [...]

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

  4. [...] you want more details about Blend4, you can check out Christian Schormann’s overview. A new website is now live for all Windows Phone 7 series related development information at [...]

    Pingback by JAPF » Blog Archive » Mix10: Windows Phone 7 series development tools available — March 15, 2010 @ 11:40

  5. [...] All the tools except Blend 4 are included in one handy installer And Christian Schormann shows where you can get the Blend tools here. [...]

    Pingback by Windows Phone 7 the Belle of the Ball - Brownie Points — March 15, 2010 @ 11:57

  6. [...] Electric Beach: Introducing Blend 4 – For Silverlight, WPF and Windows Phone – http://electricbeach.org/?p=438 Addam Kinney: Expression Blend 4 Beta Feature Overview available for download – [...]

    Pingback by Silverlight 4 RC + Silverlight for Windows Mobile - Csala Péter szakmai blogja — March 16, 2010 @ 01:42

  7. [...] Introducing Blend 4 – For Silverlight, WPF and Windows Phone (Christian Schormann) [...]

    Pingback by Dew Dump – March 16, 2010 | Alvin Ashcraft's Morning Dew — March 16, 2010 @ 04:59

  8. [...] esperar, les recomiendo ver los posts de Tim Heuer y René Schulte sobre Silverlight 4 y el de Christian Schormann sobre Blend [...]

    Pingback by JAMolina.com » Blog Archive » Silverlight 4 Release Candidate — March 16, 2010 @ 08:03

  9. [...] Those are all of the tools you will need to get started developing apps that you will be able to sell to WP7 users. There are some pretty cool things in there (*cough*XNA*cough*) already, but if you are thinking “Hey this is a designer conference, where are the designer tools?!” well fear not, MS has also released a preview of Blend 4, which has a ton of cool new features, and of course supports development for Windows Phone 7. You can read more about the Blend 4 preview at Christian Schormann’s blog. [...]

    Pingback by The Spoils of MIX at Microsoft Student Partners at UTS — March 16, 2010 @ 17:16

  10. [...] ability to target a project at either the current or the previous generation of the platforms,” Christian Schormann, responsible for product planning and definition of Expression Blend and Design, and for long-term [...]

    Pingback by Expression Blend 4 Beta Released - fantasista — March 18, 2010 @ 06:08

  11. [...] esperar, les recomiendo ver los posts de Tim Heuer y René Schulte sobre Silverlight 4 y el de Christian Schormann sobre Blend [...]

    Pingback by La Liga Silverlight » Silverlight 4 Release Candidate — April 8, 2010 @ 10:47

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress