Expression Blend and Design

The team blog of the Expression Blend and Design products.

July, 2008

  • Expression Blend and Design

    More articles on Visual State Manager


    Karen Corby is the Program Manager who worked with the Expression Blend team in developing the Visual State Manager feature. Karen has written four excellent and comprehensive blog posts (starting here) which explain the motivation for VSM, everything you can do with VSM and how it works under the covers, and how to build and skin a custom control. Even if you won't be writing your own custom control, this is highly recommended material on the subject from someone who designs the platform itself.

    Below I've shamelessly copied out Karen's further reading section so we have a good set of links in one place:

     -Steve White

  • Expression Blend and Design

    Animating control Content between States


    You’re probably very familiar with Content in WPF and Silverlight. For example, two Buttons can use the same Template but can look different by virtue of having different Content in them. And the Content property is of type object so it can be Text, or an Image, or a Panel containing yet more elements, or anything else. In the Template, the uncertainty of what the Content might be is taken care of by the ContentPresenter element which is analogous to a TV screen showing whatever Content happens to be in the control instance.
    This generality of Content is a good thing. But it does give rise to an issue in scenarios where you would like your Template (or Skin, if you prefer) to alter some aspect of the Content in a visual state. Say you’d like the Content’s Stroke color to animate to red during MouseOver. Naturally, that requirement only makes sense as long as the Content has a Stroke property.

    A safe, but limited, solution is to make use of the small number of properties that ContentPresenter has. For example, in WPF, the Template might respond to an IsMouseOver Trigger by animating the ContentPresenter’s OpacityMask to Red. Then the Templated control instance could bind some property of its Content to that OpacityMask like this:

    <Button Style="{DynamicResource ButtonStyle1}">
        <Path Stroke="{Binding Path=OpacityMask,
                                       AncestorType={x:Type ContentPresenter},
                       Data="… "/>


    That approach is limited because you soon run out of ContentPresenter properties. Another approach is for the Template to make assumptions about what will be in the the Templated control instance’s Content. You can try this in a Silverlight 2 project in the Blend 2.5 June Preview. Draw a Button and then draw a Path into the Button’s Content. Then edit a copy of the Button’s Template, select the MouseOver state, select the ContentPresenter and change its Background to Red. Now you’ll need to do some XAML editing. In the XAML, find the MouseOver state and the Background animation and change the Storyboard.TargetProperty attribute’s value to "(ContentPresenter.Content).(Shape.Stroke).(SolidColorBrush.Color)".

    Build and run and you’ll see the result. This is flexible, but it is also unsafe in the sense that if a control instance uses your Template without satisfying the Template’s assumptions (say its Content is a TextBlock instead of a Shape) then a run-time error will result. However, so long as you’re careful to only use this Template on control instances whose Content is a Shape then you’ll be fine.

    Corrina Barber came up with a scenario which is not addressed by the above approaches. The scenario is that of a Button which, in its Normal state, shows a still image (say, vector art of the MSN butterfly) and, in its MouseOver state, shows an animation (say, an image sequence or video of the butterly exercising its wings). Naturally, each Button instance should be able to specify the Normal and the MouseOver Content. This can’t be done by simply animating existing types’ properties in states so in this post I’ll show some of the principles of my solution to that requirement.

    I wrote a fairly simple subclass of ContentControl and I called it FlipContent:

    public class FlipContent : ContentControl
        public static readonly DependencyProperty IsFlippedProperty =
            new PropertyMetadata(new PropertyChangedCallback(IsFlippedChanged)));

        public double IsFlipped
            get { return (double)GetValue(IsFlippedProperty); }
            set { SetValue(IsFlippedProperty, value); }

        public static void IsFlippedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            FlipContent o = d as FlipContent;
            if (o != null)
                if (o.IsFlipped > 0)
                    o.Content = o.FlippedContent;
                    o.Content = o.UnflippedContent;

        public object UnflippedContent
            get { return _unflippedContent; }
            set { _unflippedContent = value; }

        object _unflippedContent = null;

        public object FlippedContent
            get { return _flippedContent; }
            set { _flippedContent = value; }
        } object _flippedContent = null;

    The value proposition of the FlipContent type is that it can be made to flip its Content in reponse to a property change, therefore it can be made to flip its Content in reponse to a state change in a control template. Further, the Template needs to know nothing about the objects which constitute the FlipContent’s Content; the control instance contains those:

                <Ellipse Fill="#FFFFFFFF" Stroke="#FF000000"/>
                <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000"/>

    You can try this in a Silverlight 2 project in the Blend 2.5 June Preview. Paste the class definition given above into Page.xaml.cs then add the Button XAML above. Then edit a copy of the Button’s Template, select the MouseOver state, select the ContentPresenter and change its Opacity to 50%. Now you’ll need to do some XAML editing. In the XAML, find the MouseOver state and the Opacity animation and change the Storyboard.TargetProperty attribute’s value to "(ContentPresenter.Content).(local:FlipContent.IsFlipped)". Now press F5 to test the result. You experiment with different content, and you will be able to use Blend to add and edit UnflippedContent because it is the default content property. But you won’t get as much help with FlippedContent.

    You can download the project source files from below:

    folderfiles Download Project Files

    Please note that the solution to Corrina’s exact requirement (switching an image for some video) will probably call for a FlipMediaElementSource class which assumes its content is a MediaElement and which switches its Source property instead of its own Content property. I’ll leave that as an exercise for the reader – you maybe!


  • Expression Blend and Design

    Collection of Expression Blend Learning Resources


    This post will try to showcase an updated list of useful (and free!) training material available for Expression Blend:

    Training Resources from Microsoft

    Expression Blend and Design Blog: Tips & Tricks

    Expression Community

    Expression Blend (Online) User Guide

    Expression Blend Tutorials

    MIX 07/08 Video Sessions

    Building Rich Client Experiences with Blend and WPF (by Celso Gomes and Christian Schormann)

    Building Rich Web Experiences (by Celso Gomes)

    Applications = Designers + Developers (by Celso Gomes and Kirupa Chinnathambi)

    Designing Next Generation User Experiences (Johnathan Lansing)

    Tutorials (Videos)

    A Lap Around Microsoft Expression Blend (Steve White)

    4 Visual State Manager Videos (Steve White)

    Animation and Media (Peter Blois)

    Blend for Programmers (Jesse Liberty) - WPF Video Tutorials (Lee Brimelow) - Video Tutorials 1, Video Tutorials 2 (Lee Brimelow)

    Tutorials (Articles)

    Nibbles Tutorials (Celso Gomes)

    Collection of Visual State Manager (VSM) Resources (Steve White)

    Electric Beach (Christian Schormann) - Blend + WPF, Blend + Silverlight (Kirupa Chinnathambi)


    If there is some useful resource you would like to see added to the list, please drop me an e-mail at kirupac[at] to let me know!

    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer : (Possible) Collection Layout FIX


    If you’ve browsed through the Deep Zoom Composer forums lately, you will have seen a few cases where Deep Zoom Composer was having difficulties maintaining layout when exporting collections. More specifically, the arrangement and position of images seen inside Deep Zoom Composer was not what you saw when you previewed your collection in your browser.

    If this describes the handful of you who were having difficulties, we have a manual solution for you until we release our next version of Deep Zoom Composer. The solution is for you to open your dzc_output.xml file in Notepad and do a find/replace on all instances of commas ‘,’ with periods ‘.’ instead:


    Save your dzc_output.xml file, and you should be set!

    The problem is that in certain locales, commas are used to indicate precision as opposed to decimal units. Replacing the commas with periods will take care of this issue for you. In the next release of Deep Zoom Composer, we will take care of this automatically so you don’t have to worry about it.

    Credit for finding the cause of the problem and the possible solution goes to Avi Dunn and Rado Nickolov of the Live Labs team.

    Kirupa :)

  • Expression Blend and Design

    Where do You Go to Learn More About Expression Blend?


    One of the things that we are planning on doing is providing easier access to learning content. Besides the influx of learning content (videos, articles, etc.) we will be generating ourselves, we also want to link to content around the web that many of you like as well.

    Please comment below on sites, blogs, etc. that you have found very useful for learning more about Expression Blend. In the future, I will create a follow-up post that will hopefully act as a central location we can point individuals to if they want to learn how to use Expression Blend.


Page 1 of 1 (5 items)