Home > Client Technologies > A few cool new features added in Expression Blend 4 RC

A few cool new features added in Expression Blend 4 RC

April 16, 2010

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

Make Layout Path in Expression Blend 4

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

Simpler PathListBoxItem binding in Expression Blend 4

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

PropertyChangedTrigger added in Expression Blend 4

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

Documentation and Search links in Expression Blend 4

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

About these ads
  1. shaggygi
    April 16, 2010 at 3:36 pm | #1

    You mentioned…

    “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.”

    I thought RC usually meant feature complete. I know you can’t discuss super secret stuff coming, but could you at least tell us if there is more features to come in RTM version?

    Christian mentioned in his session at MIX10 that there would be some new stuff for SketchFlow later in the year he could not talk about, either.

    I noticed in the RC just released, there was a SL4 example called Mockups. This was really cool. I also noticed there was not a CodePlex site that the example pointed to. However, I could add the Mockup DLL used in that example to my own SketchFlow app and it would let me use the new sketchy mockups then.

    Was this the feature Christian was talking about or is there other goodies?

    I’m very pleased with what the team relesaed and will take me some time to get familiar using, but you know us developers….. give me, give me, give me. Like you, I can’t wait til RTM, either.

    Glad you’re back from vacation. If possible, release a tutorial on using the new MVVM templates.

    Thanks again:)

    • April 20, 2010 at 11:26 am | #2

      Yes, there is still more to come with the final release. Nothing we’re talking about yet as Christian mentioned.

      I hear you on the need for more information on MVVM templates. I’ll post some material around the release timeframe to ensure it matches what we end up. We’ve been working with community members like yourself to help us refine the templates.

      Happy to see you’re excited for more :)

  2. Jack Ukleja
    April 16, 2010 at 5:52 pm | #3

    PathListBox is amazing… still extremely disturbed by its name though.

    Path…yes.
    List…yes.
    Box…nooooooo!

    Yes it inherits from ListBox. ListBox had to be called that for legacy reasons (so people could understand what it was I guess?). That’s awkward but to perpetuate the name for eternity into every derived class, even when its “box” origins are so far from relevant.

    I’m sure the team had some long debates about this name. Can someone explain the final conclusion?

    • April 20, 2010 at 11:27 am | #4

      Very astute observation, Jack, I hadn’t thought of that. I’ll ask the team and let you know what I find out.

  3. April 16, 2010 at 11:50 pm | #5

    The PathListBox inherits from ListBox. I suppose it could mean

    Path…yes
    ListBox…yes

    with the derived class named for the class that the control is derived from. That makes sense. I don’t think the naming convention is awkward at all. The name tells me the history of the control without having to look at the internals which for me makes my code that much easier to read.

  4. April 20, 2010 at 1:13 am | #6

    Aha!

    “you can change properties of an item based on its location on a path”

    Now THAT’s what I’ve been waiting for! :)

    • April 20, 2010 at 11:31 am | #7

      Right on Nick! I’ll be following your blog in anticipation of cool examples that you come up with ;)

Comments are closed.
Follow

Get every new post delivered to your Inbox.

Join 29 other followers

%d bloggers like this: