Key Expression Blend Features

Expression Blend has added several fantastic new features. This section highlights some of the key features including a PathListBox which visually changes the way you think about the ListBox control. Also covered are enhancements to integrate MVVM development, new design time data features, binding enhancements, and new behaviors.

Interoperability with Visual Studio 2010

Expression Blend 4 Beta and Visual Studio 2010 use the same project format. Expression Blend 4 Beta can convert a Visual Studio 2008 project for you in order to work with it.

PathListBox Control

The PathListBox is a new control that introduces a new and flexible way to layout multiple items. Maintaining the selection and binding features of the traditional ListBox, the layout of the items is determined by defining one or more UIElements as LayoutPaths. Many properties are made available to customize the positioning and orientation of the items along the paths. Additionally, individual PathListBoxItems may be modified directly to change their appearance or layout.

The image below demonstrates a dataset of years bound to the Items property of a PathListBox and the red arcing path is defined as the LayoutPath for the PathListBox.

Create your own PathListBox by following the steps below:

1. Add one or two paths to your scene. The Path, Ellipse, Rectangle and Shape controls work well as LayoutPaths.
2. Add a PathListBox control.
3. Add items to the PathListBox manually or by databinding. Without a LayoutPath defined, the items will all be positioned in the same spot.
4. With the PathListBox selected, find the Items Layout pane on the Properties Panel. Use the pick widget, with the target icon, to select one or more objects to use as the LayoutPaths.
5. The items of the PathListBox will be arranged along the selected path or paths.

Transition Effects

Transition Effects blend two visuals using a pixel effect over time and are applied in Blend 4 when configuring Visual State transitions. The TransitionEffects dropdown can be found under the “fx” and arrow icon, in the States panel on each transition. If a TransitionEffect is applied to a transition between States, the transition will be visible and animated with other changed properties during the State change.

TransitionEffects available include the following:

Conditional Behaviors

Any Action can now be associated with a set of conditions that must be met in order to execute the Action. This means that with Expression Blend 4 Beta you can now build conditional logic into your prototypes and production applications without the need to write code.

Bindable Properties

Properties of behaviors are now bindable in the same way as FrameworkElement properties. This allows behaviors to be more dynamic and aware of the current context. To create a quick sample and see this new feature in action follow the steps below:

1. Add a Rectangle to your scene.
2. Create a Storyboard animating the Rectangle’s position across the screen.
3. Add a ControlStoryboardAction to the Rectangle and set the Storyboard property to the one you just created.
4. Add a Checkbox to your scene.
5. Show the advanced properties in the Common Properties pane
6. Click the Advanced properties button to the right of the IsEnabled property and select the “Element Property Binding…” option.
7. Using the new pick widget, select the Checkbox and from the Create Data Binding dialog select the IsChecked property.
8. Now when you run the project, the Storyboard should only play when you click on the Rectangle and the Checkbox is checked.

New Behaviors

Adding to the original set of eight behaviors, seven new behaviors have been added with a strong focus on interacting with data. Additionally the FluidMoveBehavior has been updated to provide more functionality than before. The new behaviors include the following:

• CallMethodAction – Calls a method on the target object. This can be very useful when your control has a custom class set as the DataContext. For example, when using MVVM the View may need to invoke a method on the ViewModel. If the ViewModel is set as the DataContext for the View, the View can easily call a method on the ViewModel using data bindings through the CallMethodAction behavior.
• DataStateBehavior – Toggles between two states based on a conditional statement. This is a simple merge of the DataTrigger and the GoToStateAction into a single Behavior.
• DataTrigger – Any time the bound property changes, the trigger compares this value to the Value property. If the two values match, the trigger fires.
• DataStoreChangeTrigger – Fires when a specified property in the Data Store changes.
• FluidMoveBehavior – Enhanced with additional properties to expand its scope beyond a single container. By setting a tag property, an element’s current state can be used to dynamically animate discrete properties of the element. FluidMoveBehavior is optimized for two main scenarios; animating list items from one list to another list and animating from a master list to a detail view.
• FluidMoveSetTagBehavior – Sets a tag property to act as a pointer that can be referenced by a FluidMoveBehavior instance. In a Master/Detail scenario, the elements of a master list may only need to broadcast their position. The detail view can then be animated from that position using the recorded values.
• InvokeCommandAction – Invokes a specified ICommand. This can be very useful when your control has a custom class set as the DataContext. For example, when using MVVM and the ViewModel is set as the DataContext of the View, the View can invoke command on the ViewModel through data bindings and the InvokeCommandAction behavior.
• SetDataStoreValueAction – Changes the value of a property and optionally animates the change over a duration of time. Properties are found in the new Data Store explained below.

MVVM Project and Item Templates

The MVVM templates are meant to be a starting point that illustrates some of the designer techniques available in Blend against a data model. They are not meant to teach developers about their architecture. In order to enable designers to work against a “real” data model, the data model needs to have a façade that is reasonably close to a real design pattern: our focus is on the techniques a designer would use to connect to a business data model and connections, rather than the implementation of the data models and backend logic themselves.

Along with the new templates, new behaviors have been added to enable MVVM-based development. The CallMethodAction and InvokeCommandAction behaviors are a valuable asset when working with the interaction between Views and ViewModels.

Design-time data from CLR types

In addition to sample data based on XML, you can now create design-time sample data from your CLR types. Even if a type has no public constructor, or it has properties with no public setter, it can still be made into design-time sample data with the “Create Sample Data from Existing Class” command on the Data panel.

The Data panel provides a view of an object’s DataContext, whether design-time or run-time, and allows you to drag properties and Commands onto the design surface to bind your UI to them.

Design-time ViewModels

If your application uses the MVVM pattern then you can use the “Create Sample Data from Existing Class” command on the Data panel to generate design-time sample ViewModels so that you can continue to design your application in the context of this data.