Introducing Blend 4 – For Silverlight, WPF and Windows Phone
Author: Christian Schormann
About the Author: Christian Schormann is a Group Program Manager for the Expression Blend team. He is responsible for responsible for product planning and definition of Expression Blend and Design, and for long term product strategy of the Expression suite as a whole.
He blogs regularly at
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 to introduce the next release of Blend…
Blend 4 running a Windows Phone project, with the Windows Phone Emulator
In Scott Guthrie’s MIX keynote (see
http://live.visitmix.com), Jon Harris gave a demo of Blend 4. The
Blend 4 Release Candidate is available for download. 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 showed at MIX.
There is way more in the Blend 4 beta than I can possibly describe in this article, 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
Expression Blend 4 for Windows Phone Preview 2.
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. See more details on the coolest way to design Windows Phone applications. 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.
New Behaviors, Conditions
The Blend 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.
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:
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.
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.
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:
- 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.
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:
While we were at it, we also added a few standard effects you can apply to any element to the Blend 4 SDK:
Thanks a lot for reading about Blend 4. Please
download the Release Candidate and let us know what you think. And if you have a chance, the MIX sessions provide explanations and demos that are also
available in video form.