Expression Blend and Design

The team blog of the Expression Blend and Design products.

May, 2010

  • Expression Blend and Design

    How to add mockup controls to your Expression Blend library


    In Expression Blend 4, one of the new samples we added is called MockupDemonstration. If you haven’t had a chance to use it yet, you can open MockupDemonstration from the Welcome screen, which is available when you first start Expression Blend or when you click Help and then click Welcome Screen. In the Welcome screen, click Samples, and then click MockupDemonstration:


    As you can tell quickly from exploring this sample, this sample contains a handful of controls designed to help you create prototypes easily. The catch is that these controls only exist within the confines of this particular sample. Since some of you have requested that it would be useful to have these controls available outside of the sample, this blog post will explain how to make these mockup controls available in other projects.

    To enable mockup controls for any SketchFlow project, copy the mockup controls run-time and design-time assemblies from the MockupDemonstration sample to the pre-configured Libraries folder by following the steps below:

    1. Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:

    Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug
    (for WPF projects, follow this step but copy files from > Libraries > .NETFramework > Debug)

    2. Add copied files to the following destination:

    Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >
    (for WPF paste the copied files from the NETFramework folder in the previous step to … > Libraries >  .NETFramework > 4.0)


    3. Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).

    If you have any questions or comments, please feel free to post below or on our forums.


    Dante, Rick, Billy

  • Expression Blend and Design

    Control Storyboards Easily using Behaviors


    It’s been a while since the last article where I promised to write about all of the behaviors that ship with Expression Blend in greater detail. I’ll try to be more prompt in the future. Today, let’s look at the ControlStoryboardAction and the StoryboardCompletedTrigger.

    Storyboards are one of the primary ways you create animations in Silverlight, WPF, and Windows Phone using Expression Blend. Creating a storyboard is fairly easy, but actually using a storyboard such as having it play is not. To help with this, you have the ControlStoryboardAction.

    What is it?

    Simply put, the ControlStoryboardAction is an Action that allows you to select a storyboard and specify what you would like to do to it:


    Let’s look at some of the properties it contains in greater detail.

    Using It

    When it comes to this behavior, there are only two properties that you need to concern yourself with. They are the ControlStoryboardOption and Storyboard properties.

    The ControlStoryboardOption property lists the tasks you would like to perform:


    From here you can choose whether you want to play a storyboard, stop it, toggle between play/pause, pause, resume, or jump to the end.

    The only missing piece so far is knowing which storyboard to affect. Not to worry, because you specify the storyboard using the aptly named Storyboard property:


    This property will list all of the Storyboards your behavior has access to. Once you have selected a Storyboard, you are done!


    Another little behavior component we have is the StoryboardCompletedTrigger:


    This trigger invokes an Action when a specified storyboard (set via the Storyboard property) has fully run to completion. Of course, because it is a trigger, you can use it with any Action.

    Kirupa =)

Page 1 of 1 (2 items)