Expression Blend 3: Support for the Silverlight Visual State Manager

In Expression Blend 3, support for the Silverlight Visual State Manager (VSM)  has been improved. In this post I’ll show five new features.

Drawing into state

When you select a state and draw a new element, the new element will be visible only in the selected state at runtime.

State pinning

You can pin a preview of one state in a state group while modifying another state in a different state group.

Editing transitions

You can select the storyboard for a state transition and modify it in the Objects and Timeline panel.

Previewing transitions

You can preview transitions by clicking Turn on transition preview in the States panel. When transition preview is on, each time you change your selection from one state to another, the currently-defined transition between those two states plays out on the artboard just as it will at run time.

FluidLayout

In previous versions of Expression Blend, if you changed such properties as the Row, Column, ColumnSpan, or RowSpan of an object in different states, the change would be instantaneous, even if a transition duration was specified. By selecting Turn on FluidLayout, you can make an object move smoothly from one cell in a Grid layout panel to another.

There are also other improvements. You can see states for controls, regardless of whether those states were defined in your XAML file originally. The States panel displays a warning when a property has been changed in more than one state group.

Expression Blend 3: Creating templates from artwork

With Expression Blend 3, you can use the modified Make Into Control command to select artwork on the artboard and to convert it into a control template for a control. Read this post.

Expression team has written excellent post about this feature of  new Blend.  You can also read about it in Blend User Guide.

Smart Make Into ContentControl (f.e Button)

When you use Make Into Control to turn artwork containing a TextBlock object into a template for a ContentControl (buttons and so on), Blend does the following for you:

• Put a ContentPresenter into the template in place of the TextBlock.
• Copy layout properties from the TextBlock to the ContentPresenter.
• Copy Typography properties from the TextBlock (f.e Foreground) to the control Style.
• Copy the Text property from the TextBlock to the control instance’s Content property.

Smart Make Into TextBox

When you use Make Into Control to turn artwork containing a TextBlock object into a template for a TextBox, Blend does the following for you:

• Put a ScrollViewer representing the ContentElement part into the template in place of the TextBlock.
• Copy layout properties from the TextBlock to the ContentElement part.
• Copy Typography properties from the TextBlock (f.e Foreground) to the TextBox Style.
• Copy the Text property from the TextBlock to the TextBox instance.

Controls with template parts (f.e Slider)

In a Silverlight project, Make Into Part command and Parts panel are very useful for creating templates for controls with template parts.

You can right-click objects in your template and click Make Into Part to assign objects in your control to specific roles.

The Parts panel makes it easy to manage and create the parts (double-click) required by a control template.

    

Expression Blend 3: Gradient Tool, Tile Brush & Easing Functions

Blend 3 has new gradient tool with many improvements. Using Tile Brush in Silverlight 3 we can use images as background in a very easy way. Easing functions are very easy, too. In this post I’ll show these features of new Blend.

Gradient Tool

Tile Brush

Easing Functions

Some useful links

• Creating and Editing Gradients in Expression Blend 3 Preview
• Tile Brush in Silverlight 3 Application in Blend 3
• Easing Functions in Blend - Page 1
• Easing Functions in Blend - Page 2

Expression Blend 3: Merged Resource Dictionaries & Element Binding

I wrote some information about merged resource dictionaries and element binding in Silverlight 3 about two months ago. Today I’ll show how Blend 3 supports these features.

Merged Resource Dictionary

 Element Binding

Expression Blend 3: Sample Data & Data Binding

Expression Blend 3 introduces new databinding experience, generating data and many other data-related improvements. Read this post.

Useful links

New Silverlight 3 / Blend 3 Video Tutorial – Working with Data

Unni

• Introducing sample data support in Blend 3
• DataGrid support in Blend 3
• Blend 3 Databinding
• Introducing sample data for Developers

Kirupa Chinnathambi

• Element to Element Data Binding - Page 1
• Element to Element Data Binding - Page 2

SilverZine

• How to Create Sample Data in Blend 3
• Simple Data Binding in Blend 3

Corey Schuman

• Overview of Sample Data in Blend 3

ISV Developer Community

• Blend 3 – Great Feature #2 – Master/Details Screens
• Blend 3 – Great Feature #3 – Silverlight Element Binding

Evgeny

• Expression Blend 3 – secrets of working with data
• Expression Blend 3 – secrets of working with data 2

Others

• Silverlight & Blend 3 Sample Data
• Styling a TreeView in Silverlight 3 and Blend 3
• How To Get a Silverlight 3 AutoCompleteBox To Show Sample Data in Blend 3

Samples

I have created four samples with data binding and sample data:

SimpleBinding

MasterDetails

HierarchicalCollection

DataGrid

and I’ve tested Unni’s sample with design data:

Expression Blend 3: Adobe PhotoShop and Adobe Illustrator Support

With the introduction of Expression Blend 3 comes the ability to import both Adobe Photoshop (.psd) files and Adobe Illustrator (.ai) files directly into your projects (layers, shapes, text elements and more)

Some useful links about these features:

Starter Kit: Venture into Gaming with Behaviors in Expression Blend 3 (first module)

Janete Perez

• Blend 3: Introduction to Importing Photoshop Files
• Blend 3: Photoshop Import- Supported Features
• Blend 3: Photoshop Import – Merging Layers

SilverZine

• Import Photoshop files to Blend 3

I have imported Photoshop file with some image layers, vector shapes and layer mask. Dialog with file settings and DJ imported into Blend’s artboard below.

Deep Zoom Composer: Collection support & Extensible templates

Kirupa Chinnathambi, a program manager in the Expression Blend team, has written excellent posts about collection support and extensible templates in Deep Zoom Composer. I have tested all these new features.

Collection Support

You no longer have to compose your images. You can just import your images and go straight to exporting using options: Silverlight Deep Zoom –> Export as a collection –> Tag Browser. To filter what images you see based on the tag, you should add tags in Compose view:

Extensible templates

Now you can export Silverlight Deep Zoom collection using predefined templates:

• Blend 3 Behaviors + Source
• Deep Zoom Classic + Source
• Deep Zoom Navigation (Default)
• Empty Project + Source
• Tag Browser

The process of selecting a template from within DZC is extensible. You can easily add your own templates with or without Source Files/Project. You should copy your files to Export Templates folder (in DZC installation directory) and restart DZC.

I have set blue background in my test templates.

The latest release of Deep Zoom Composer has other interesting new features. Analytics tracking allows you to specify tracking URLs that will silently get called when you zoom in on an image or region. You can know which images of advertisement get the most attention. Another feature is support for Smooth Streaming.  Now you can export your images into a form that is optimized for servers with the technology enabled.