A few cool new features added in Expression Blend 4 RC

In accordance with the release of Silverlight 4 and Visual Studio 2010, Expression Blend 4 RC was released yesterday and is available for download.

With the release of Blend 4 Beta, just a month ago this isn’t a major release, but there a few cool new features I thought would be useful to point out.

Make Layout Path option

The new menu option allows for more convenient and intuitive PathListBox creation.

1. Draw a shape or Path
2. Right-click the shape or Path and select Path –> Make Layout Path option
3. Inspect the Object panel and you will find Blend has generated a new PathListBox and set the selected shape or Path as the Layout Path

Simpler PathListBoxItem binding

One of the first handy tricks you see with the PathListBox is that you can change properties of an item based on its location on a path. This is done by binding properties like Opacity and Scale of the item container to its own GlobalOffset property. In the beta this was only possible by entering the XAML by hand, but the team has added more support for Template Binding which exposes this functionality on a few clicks.

The easiest way to show this feature is to use design-time data so we’ll take advantage of Blend’s ability to create Sample data quickly for us. We’ll start by repeating the steps from above first.

1. Draw a shape or Path
2. Right-click the shape or Path and select Path –> Make Layout Path option
3. Inspect the Object panel and you will find Blend has generated a new PathListBox and set the selected shape or Path as the Layout Path
4. Now, in the Data panel, click “New Sample Data” and hit OK.
5. Select the “Collection” node in the data panel, click and drag it over to the PathListBox in the Objects panel. When you see a tooltip that reads “Data bind [PathListBox].ItemsSource to Collection” release the mouse.

   You should end up with a PathListBox like the image to the right. At this point you may want to arrange the Path to be behind the PathListBox, so the items are shown in front of the Path fill.

6. Right-click the PathListBox and from the context menu select: Edit Additional Templates    -> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy…, hit OK
7. Now in template editing mode, select [Grid] in the Objects panel and open the Properties panel.
8. Find the Opacity property and click the Advanced options square (the yellow highlighted square in the picture to the right).
9. From the Advanced options menu select     Template Binding –> GlobalOffset.
   If everything is setup properly, you should see the items closer to the start of the Layout Path have less Opacity, matching the value of their offset.

Exit template Editing mode and select the PathListBox. Try changing the Padding, Start and Span properties to get a feel for how the GlobalOffset property works.

PropertyChangedTrigger added

A new trigger has been added to the Expression Blend SDK called PropertyChangedTrigger.  As the name implies, an action can now be triggered when a property changes.  Simple in concept but a useful addition. The following steps provide a simple demonstration.

1. Draw a Rectangle
2. Add a Button
3. Create a Storyboard animating the Rectangle to a new noticeable position.
4. Add a ChangePropertyAction to the Button, keeping the Click event as the default trigger.
5. For the TargetObject of the ChangePropertyAction use the new element picker to select the Rectangle and in the dialog, select Effect.
6. Set the Value of the ChangePropertyAction to a New BlurEffect.
7. Now add a ControlStoryboardAction to the Rectangle.
8. For the Trigger, click New and from the dialog select a PropertyChangedTrigger.
9. Set the Binding property of the Trigger to the Rectangle using the element picker and select the Effect property.
10.   Set the Storyboard property of the ControlStoryboardAction to the name of the Storyboard you created (default is “Storyboard1”).

Now run the project and click the button.  On click of the button the ChangePropertyAction is triggered to add the BlurEffect to the Rectangle. On change of the Effect property, the ControlStoryboardAction is triggered and your storyboard should play animating the Rectangle.

This is a super simple example, but ideas should already be popping into your head where this new Trigger could be useful.

Documentation and Search links added for Behaviors

The last feature to point out is simple but elegant. When a behavior is selected, links are displayed at the bottom of the Properties panel that lead directly to documentation or an online search that opens in your browser. Easy access to learn how to use Behaviors form the Expression Blend team and the community.

Can’t wait for the final release!

Download Expression Blend 4 RC

More Expression Blend Tutorials