Building compelling and usable UI should be easy and fun. We all can point to our favorite products (either the ones we build or the ones we use) and think about how much better it would be if the UI was simple, intuitive and easy to use.
Whether you choose to build rich desktop applications using WPF or slick web-based applications using Silverlight, Expression Blend can help you design a great user experience.
Recently, we released the Expression Blend 3 Preview, which continues to deliver features that enable a workflow for designers and developers from the design phase to production.
Here are a few of the interesting features available in the Blend 3 Preview.
Adding Interactivity without Code
Behaviors are re-usable chunks of code that can be dragged and dropped onto any object, giving that object interactivity without having to write any code. For example, you can drop the DragMove behavior onto a button on the artboard, run your application, and then instantly be able to drag the button around the application window. In the photo editing application below, the user can drag the green button onto the picture to show the brightness at that point in the photo.
Behaviors follow a design pattern extended from the Trigger and Action model in WPF and are available for use in both Silverlight and WPF. Therefore, behaviors can navigate, change state, validate input, talk to web services, or play animations and sound. Blend 3 will ship with a set of general purpose behaviors including behaviors that navigate between pages in an application, simulate physics on a control, and run animations, but the model is entirely extensible so you can create your own reusable building blocks of interactivity. Behaviors, like user controls, can be defined in a library or as of the application itself, and will be automatically included in your assembly. For more ideas or to share your own behaviors, check out the Expression Gallery.
Seeing is Believing with Sample Data
At design time, you may not have access to the live data that will eventually display in your application. Without data, it’s very hard to get a good feel for how your application will look at runtime. Blend 3 helps solve this problem by enabling you to quickly create sample data that you can work with on the artboard to make it easier to customize those controls that will display data. Additionally, you can decide if you want to use live data during runtime: the sample data bindings are stored in design time properties. At runtime, live data can override sample data, or you can continue working with the sample data when testing your application.
When creating sample data, you can either import data from an XML file or choose to let Blend generate data for you. Generated data is fully customizable and can include flat collections, hierarchical collections, strings, numbers, Boolean values, and images. When you drag data items onto the artboard, Blend 3 interprets the values to determine the best way to display the data. For example, if the item is a path to an image file, the image is displayed. If the item is a collection of image file paths, a list box of images is created.
Embracing the Design Ecosystem
One of the new features of Expression Blend 3 Preview is the ability to import Photoshop (.psd) and Illustrator (.ai) files directly into Blend. Layers are imported as individual layout containers to make them easy to work with. Vector layers are imported as vectors, text layers as text with significant font information remaining intact, and gradients as gradients. Additionally, you can take a Photoshop file, import it into Blend 3, and then quickly convert it to a control skin using the new state-based control skinning!
Collaboration Powered by TFS
Expression Blend 3 is now integrated with Microsoft© Team Foundation source control. This means that project source files can now be easily shared by a team with all the benefits of source control. This minimizes the risk that one person might inadvertently overwrite the changes that someone else made to a file. At any time, you can view an older version of a file and compare it to the current version to see the changes that were made.
These are just some of the highlights of Blend 3.
For a complete list of new and enhanced features, such as Intellisense in the XAML editor, a built-in code editor, and design time annotations, check out the “What’s new” link. Then, download the preview, visit the Expression team blog, and watch the following videos for more tips: