Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Keyframe Marquee Selection, and other Timeline Tips


    With Blend 3 it’s now possible to draw a marquee (or lasso) around keyframes to select all the keyframes that fall within it. Hold down the CTRL key then drag out a marquee with the mouse pointer as shown below. You can even begin your drag operation when the mouse pointer is over a keyframe or an animation bar; so long as CTRL is pressed, this will not result in selecting and/or moving any keyframe or animation.


    If you ever used the time ruler area above the Timeline to move the yellow playhead (current time marker) you’ll be pleased to know that you can now click, or click-and-scrub, in any empty area of the Timeline to set the current time. And if the mouse pointer is over a keyframe or an animation bar then hold down the ALT key and click, or click-and-scrub, and you’ll be able to move the current time without either selecting or moving any keyframe or animation.

    You’ll also notice the new blue drag-handles on the animation bars in the illustration above. You can use these to move the start and end times of the animation, and the times of the keyframes within it will be scaled up or down accordingly. This makes it very easy to change the time taken by an entire keyframe animation without having to move all the keyframes around. You can also click and drag on the gray background of the animation bar to shift the whole animation in time.


  • Expression Blend and Design

    Caching and Deep Zoom Composer Downloads


    Hi everyone,
    Some of you have let us know that the version of Deep Zoom Composer you downloaded yesterday is actually the version from a few weeks ago. The reason for this has to do with the delays in propagating the downloads across the various servers, and sometimes it does take a bit longer than expected to keep everything in sync. Complicating this problem is our decision to not create a new page for our Deep Zoom Composer download pages. This means that some of you may see a cached version of the page as well.

    Please make sure that your download page mentions the version as with a publish date of 7/22/2009:


    Your about dialog inside Deep Zoom Composer should look as follows as well:


    Sorry for the confusion, and hopefully by now, all of the download servers are serving the most recent, up-to-date version of Deep Zoom Composer.


  • Expression Blend and Design

    "Page Cannot Be Found" Issue when Previewing via Expression Blend


    When you preview a Silverlight application in Expression Blend, we run the ASP.NET Web Development server in the background to preview your content in an environment that emulates a real-world web server:


    On March 9, a signature update to Windows Defender and Microsoft Forefront Security was released that modified your system’s hosts file to address a vulnerability. One of the side effects of this update was that an entry for localhost may have been removed from your hosts file.

    This means that, when you preview your application using the ASP.NET Development Server, your browser will simply show a “Page cannot be displayed” (or equivalent) message.

    To fix this problem, open C:\Windows\System32\drivers\etc\hosts in Notepad, and add the following entry:       localhost

    For example, here is what my hosts file looks like (as Lucas pointed out in the comments, if you are not running Windows 7, the below lines may not be commented out):


    A subsequent signature update to both Windows Defender and and Forefront Client Security, released on the same day as the earlier update, should not cause this problem.

    The original source for this information comes from the Visual Web Developer Team’s blog post on this topic.

    Kirupa :)

  • 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

    PDC 2008 Session – Microsoft Expression Blend: Tips and Tricks


    If you were unable to attend the PDC this year, don’t worry! Because all of the sessions have been recorded and posted online for you to view at your leisure, you won’t miss out on much. One session that my be of particular interest to you is Pete Blois’s and Doug Olson’s talk about Expression Blend:


    You can view the talk online by clicking the following link:

    The above link also contains downloadable versions of the video along with the PowerPoint slide deck Pete and Doug used to give their talk.

    Pete and Celso’s Twitter App
    A part of the session focused on how a designer can have a large impact on the look and feel of an application without having to write a lot of code or interfering with the core logic of the application. To highlight this, Pete showed off a Silverlight 2-based Twitter app that he wrote originally:


    Celso Gomes, one of the designers on our team, took Pete’s application and decided to style it to look as follows:


    The functionality is the same, but the way the application looks is vastly different. The static screenshots don’t do Celso’s version justice. If you watch the session, you will see subtle transitions and rollover effects that are pretty cool and give the application a more polished feel.

    To try out this Twitter application for yourself, download the source files below:

    folderfiles Download Twitter Source

    You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how Celso and Pete designed and developed the application.


  • Expression Blend and Design

    A UserControl base class for Visual State Manager


    As you know, Visual State Manager is a Silverlight 2 (and WPF Toolkit) platform feature that makes it easy to define a control’s visual states and to perform the transitions between states. In the case of a templated control (such as Button, CheckBox, etc) you need only fill in the states advertised by the control (using Blend’s States pane), and the control itself will take care of performing the transitions at the right time. But if you’re writing your own UserControl then you need to add your own states to the control and you also need to know how to handle events and call VisualStateManager.GoToState() to transition between your states. Attached to this blog post is a base class that I hope will get you off to a good start. Basically you can derive your own UserControl from this class and override some methods and hopefully that will have saved you some work.

    First, download and extract the StatefulUserControlBase.cs source code file from the following location:

    folderfiles Download StatefulUserControlBase.cs
    folderfiles VSMTour Sample

    Once you’ve downloaded and extracted the source code file (StatefulUserControlBase.cs) you can try out the following steps.

    1. Launch Blend 2 SP1, create a new Silverlight 2 project named VSMTour.
    2. Add a new UserControl named CheckBoxUC, build, and create an instance of CheckBoxUC in Page.xaml.
    3. Add an existing item to the project and navigate to the StatefulUserControlBase.cs file you downloaded and extracted.
    4. Open CheckBoxUC.xaml and add the elements you feel are necessary to represent a checkbox: at a minimum, just a checkmark and a label.
    5. Add a new state group named CommonStates containing the states Normal, MouseOver, Pressed and Disabled. Add a new state group named CheckStates containing the states Unchecked and Checked.
    6. In CheckBoxUC.xaml.cs add a using directive for the BlendHelpers namespace (using BlendHelpers;) and replace the class definition with the following:

    public partial class CheckBoxUC : BlendHelpers.StatefulUserControlBase
        CheckTwoStatesEnum _checkState = CheckTwoStatesEnum.Unchecked;
        public CheckBoxUC()
            // Required to initialize variables
        protected override void UserControl_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
            if (IsEnabled)
                _checkState = (CheckTwoStatesEnum)(1 - (int)_checkState);
            base.UserControl_MouseLeftButtonUp(sender, e);
        protected override void UpdateState()

    1. In CheckBoxUC.xaml, in the XAML editor, add the following attribute to the root xml element:
    2. In CheckBoxUC.xaml change the type of the root element from UserControl to BlendHelpers:StatefulUserControlBase.
    3. Build and run.

    You now have a functioning two-state checkbox in the form of a UserControl. All you need to do next is to define the states as you would for the built-in CheckBox control. Naturally you won’t want to reproduce the built-in controls with your own UserControls, but now you know how to extend the base class you’ll be ready to do something more practical.
    A completed sample is also provided.

  • Expression Blend and Design

    Two of the Best Kept Secrets in Expression Design


    There are two special tools that I use constantly that many users of Expression Design don't discover immediately.

    Attribute Dropper
    The first is the attribute dropper:


    The attribute dropper allows you to copy the fill, stroke and effects from one object to another object in one graceful swipe.  To use it:

    1. Select the Attribute Dropper tool.  You can also use the keyboard shortcut, Shift + I.
    2. Press on an object that have the desired appearance and drag onto your target object. Release when you are over the target
    3. The appearance will be transferred from the first object to the second.

    At first, it might feel a little odd, since many other art tools require you to select your target object.  However, it ends up being very efficient. Instead of endlessly selecting objects and clicking on destinations, you can drag your desired appearance from shape to shape in a series of quick short motions.  You don’t need to worry about switching to the select tool. You don’t need to worry about navigating the hierarchy of your drawing.

    Gradient Transform Pop-up
    The second is the gradient pop-up panel:


    This is a little icon located in the gradient panel.  When you click on it, the numerical position of your gradient will appear.   Here’s how I use it.

    1. Click and drag on any of the number to move them about.
    2. You’ll see your gradient change in real time on the artboard.
    3. If you are dealing with a radial gradient, you can unlink the width and height to create elliptical gradients.

    I use gradients as my primary method of shading objects. It is how you make an otherwise flat vector object glossy or rounded. Having access to the actual numbers is a godsend since I can now place the gradient on my artwork with far greater accuracy than I could just using the gradient transform tool.

    Take care

  • Expression Blend and Design

    Generating Data at Design Time


    For most practical scenarios, the controls that you create (and are instantiated by Blend on its design surface) are bound to data structures that are populated at run-time. Unfortunately, these result in an experience on the design surface that is not friendly to designers – for example, how can you figure out the optimal font size for rendering a label when you can’t visualize the typical value that the label would display?

    Fortunately, Blend has a way to easily modify the behavior of controls when they are hosted inside the Blend design surface, as opposed to the actual application. This opens up a number of possibilities, including the ability to simulate data at design time. Let us use a simple example to describe how you can do this.

    Consider that you are designing a form that visualizes stock data, with the actual data coming from a web-service.  The data structure that holds the data might look something like the following:

    public class StockWidgetModel


                private ObservableCollection<Quote> quoteList = new ObservableCollection<Quote>();

                public ObservableCollection<Quote> QuoteList


                      get { return quoteList; }



                public StockWidgetModel()


                      if (IsInDesignMode())






                private bool IsInDesignMode()


    return (bool)DependencyPropertyDescriptor.FromProperty(DesignerProperties.IsInDesignModeProperty, typeof(FrameworkElement)).Metadata.DefaultValue;



                private void createDummyData()


                      this.QuoteList.Add(new Quote("MSFT", "Microsoft Corporation, Redmond, WA 98052", 25.4, +1.2));



                private void RefreshQuotes() { }

                public static Quote GetQuote(string symbol) { }


    The interesting bit is highlighted in Yellow. This function can be used to check, anywhere in your code, as to whether your control is running inside the Blend Design surface. In this case, we are conditionally executing some code that won’t execute in the actual running application to populate our Quotes data structure, so we could design the list box that is bound to this data structure better.

    See this in action by downloading the sample here.


  • Expression Blend and Design

    Silverlight 1.0 Fire Starter - Free Training


    Microsoft will be hosting an free public training day for Silverlight 1.0 in Redmond. Everyone is welcome! This is great opportunity for designers and developers interested in learning how to start creating Silverlight 1.0 content using the Expression Design Tools and VS Developer tools.

    Silverlight 1.0 Fire Starter
    On November 29, 2007 Microsoft will be hosting Silverlight 1.0 Fire Starter on the Redmond, Washington campus. This daylong event is free to anyone who wants to learn about designing and developing with Microsoft Silverlight 1.0.

    Microsoft Silverlight 1.0 is a cross platform browser plug-in that enables for easy development of media rich web sites.  For more information, visit


    Date: November 29, 2007 

    Location: Microsoft Redmond Campus
    1 Microsoft Way
    Redmond, WA
    Building 33, Kodiak Room
    ** Please have a photo ID with you to register onsite and park

    Time: Check-in: 8:00 am
    Event: 8:30 am – 5:00 pm

    or by calling 1-877-673-8368 and referencing Event ID 1032359153


    Introduction to Silverlight- Mithun Dhar
    Getting Started with Silverlight- Laurence Moroney
    Microsoft Expression Design Tools- Arturo Toledo
    XAML Essentials for Silverlight- Laurence Moroney
    Developer Tools for Silverlight- Adam Kinney
    Media, Markers and More- Ernie Booth
    Popfly and Silverlight – Writing a Silverlight ‘Social’ app Popfly Team
    What will Silverlight look like in future versions?- Ernie Booth

    There will also be a post event in the evening with XBOX, networking and refreshments.

    This is a great opportunity! Don't miss out!


  • Expression Blend and Design

    Brush Transforms and Keyboard Modifiers


    You probably already know that you can use the Brush Transform tool to transform the fill, stroke, opacity mask, or any other brush that is applied to an object. When you click on the Brush Transform tool with an object with, let's say, a gradient brush applied, a brush transform arrow will appear. You can select the brush transform arrow and easily use your mouse cursor to move, scale, and rotate the brush transform arrow to modify your object's gradient fill:


    While using your mouse is straightforward, you do not have a lot of precision. There are transforms that you may want to do such as set the gradient rotation to exactly 45 degrees, scale the brush transform arrow equally, and more.

    Luckily, such transforms are possible using your mouse cursor and the Alt and Shift keys on your keyboard. Those two keys, among a few others, are known as keyboard modifiers because you use them in conjunction with other keys or mouse clicks. In this post, I will briefly describe common transforms that you can perform to your brush transform arrow using those keyboard modifiers and your mouse cursor.

    Scaling Perfectly Outward/Inward

    When you are scaling your transform arrow, unless you have perfect mouse control, your scaling will usually be accompanied by some rotation. To scale perfectly outward/inward with no rotation, hold down your Shift key while clicking and dragging your brush transform arrow endpoint:


    Notice that even though our brush transform arrow was originally in a rotated state, when scaling up with the Shift key pressed, the scaling grew perfectly outward.

    Rotating in Fixed Intervals

    When you rotate your brush transform arrow, you are free to set any rotation angle you want. There will be times, though, where you would like to rotate your brush transform to a common fixed value such as 45 degrees, 90 degrees, etc. In those cases, hold down your Shift key while rotating:


    When holding down your shift key while rotating, you rotate in fixed intervals of 15 degrees. Be sure to note that it is not fixed intervals of 15 degrees relative to your original rotation angle. It is an absolute 15 degrees in a Cartesian plane starting at 0 degrees and ending at 360. If your transform originally had a rotation of 80 degrees, when increasing your rotation angle, your first interval will occur at 90 degrees and then increase by 15 degrees afterwards.


    Transforming Both Endpoints Symmetrically

    Any alteration you make to your brush transform's endpoint using your mouse cursor affects only that particular endpoint. If you want to symmetrically move both of the end points, you can do that by holding down your Alt key while manipulating any single end point:


    This time, notice that even though you scaled out only one of the endpoints, both of the end points grew outward.

    Wrap Up

    As you can see, a combination of the Alt and Shift modifier keys along with your mouse cursor allows you to more precisely control how you can transform your brushes. With radial gradients, the behavior is also the same, so don't feel as if you are limited to applying these tips to linear gradients only.

    While this post focused primarily on the brush transform arrow, the above techniques apply to more general transforms also. For example, scaling an object by holding down both your Shift and Alt keys allows you to evenly scale an object outward without adding any rotation. Exploring some of those scenarios will be saved for another post!

    Kirupa Chinnathambi

  • Expression Blend and Design

    Rotary custom control


    Download the source code

    The RotaryControl is a sample WPF custom control in a class library project that you can open and build in the Blend 2 September Preview. You can use the control along with your own template and property settings as a base to make many different types of rotary dials and knobs and selectors. Once you’ve built the control, create a new WPF Application in Blend, add a reference to the built dll, then use the Asset Library to add an instance of the control to your scene.

    The control comes with a default template which you can copy using the breadcrumb bar:

    There are three parts to the template. PART_Background isn’t strictly a part because the control doesn’t actually look for this part. But it’s in the default template so you know where to put your background in correct z order. PART_Dial is important however. If you don’t have an element in your template named PART_Dial then the control won’t know which part of the template you want to be the part that rotates in response to the mouse . The dial part needs to sit in front of the background part in order to get mouse hits. PART_Foreground is optional and it’s the name of any element you wish to sit in front of the dial in z order but not to get mouse hits. In the default template I’ve placed a shiny highlight in the foreground layer but I haven’t bothered to set it to IsHitTestVisible = false. The code in the control will do that for me.

    Select your control and look at the custom properties in the Miscellaneous category of the property inspector. If you want the dial to snap to certain angles then set SnapToSnapAngle to true and SnapAngle to the angle increments you want to snap to. By default the dial will rotate without constraint. If you want it to only rotate in the range between 0 and 90 degrees then set RotationIsConstrained to true, CounterClockwiseMostAngle to 0 and ClockwiseMostAngle to 90. You can set any of these latter two values to any positive or negative value but they will be stored internally in the range 0 to 360. RotationIsAnimated only really has an effect when you’re snapping; it controls whether or not the snapping is animated in a spring motion. You can use the Angle property to query the angle at any time.

    If you are building a rotary selector such as an automobile air-con knob then you will want to associate some semantic value with each angle at which the dial can be oriented. For instance, MAX A/C is a more useful indication of where the dial is than, say, 270. Use the Values property to define a collection of strings. The Value property will then be set to the first string in Values when Angle is equal to CounterClockwiseMostAngle and it will be set to subsequent strings from the collection as the dial is moved clockwise by each increment of SnapAngle.

    CursorAttractsNearestSnap has a useful function if your template is such that the values are shown on the dial itself and the indicator is on the background. In this situation it’s useful for the nearest value to spring to the mouse pointer when the mouse is clicked and while the dial rotates.

    Next time I’ll show some fresh templates and property settings for the control to illustrate what it can do.

    Steve White

  • Expression Blend and Design

    Amir's and Peter's Flickr Browser


    Originally it was the rather witty 'Flickr Browsr', although now an 'e' has crept back in to 'Browser'!

    The Flicker Browser sample application which features in the recent Channel 9 video [1] is available for download from Amir Khella's blog [2] so please feel free to check it out.

    You will need to get a free Flickr API key of your own and paste it in the file called FlickrKey.txt in order for the sample to run correctly. You can get a key from



    Thanks very much to Amir Khella (Program Manager on Expression) and Peter Blois (Software Design Engineer on Expression) for collaborating to produce this sample and showing great developer-designer workflow in the process.

  • Expression Blend and Design

    Creating a Vista Style Button Template Tutorial


    A new tutorial by Rick Engle shows you how to create a Vista-style button template using Expression Design. Be sure to check it out by clicking here!

  • Expression Blend and Design

    Keyframe easing and key splines


    An animation authored in Blend contains keyframes. The animation defines which element/property to affect and each keyframe defines a key time at which a value should be in effect. The process of animating the property values between successive key times is called interpolation.

    Let’s say you’re translating an element from the top of a Grid to the bottom to represent a falling motion. With the element at the top of the screen you drop a keyframe at time 0. Then you move the playhead to time 1 and drag the element to the bottom of the screen. The interpolation between the two screen positions will be linear by default: the element will appear to fall at a steady rate.

    If you want the motion to resemble a real-world falling object then you want the element’s speed to be slow at the beginning and gradually speed up towards the end. This kind of interpolation is known as ease out because the element’s position is easing out of its original value on its way to the new value. Similarly there exists an ease in type of interpolation which can either be used alone or combined with ease out. To apply full ease out to the animation you right-click the first keyframe and click Ease Out > 100%.

    If you want more control over interpolation then we need to talk about key splines and you’ll need to tweak some XAML. If you followed along with the ease in walkthrough above then switch to XAML view and find the storyboard which contains your animations and key frames. There are two animations: one targeting TranslateTransform.X and one targeting TranslateTransform.Y. Take a look at the key frames in the Y animation. The second keyframe has a KeySpline attribute which is a string containing the coordinates of a pair of points – let’s call them x1,y1 and x2,y2 respectively. The secret to understanding and controlling keyframe interpolation lies with these coordinates and what they represent.

    In the sense of the KeySpline attribute, a spline is a curve of value over time (drawn between implied coordinates of 0,0 and 1,1) whose shape is defined by two control points. The KeySpline attribute contains those control points. If you’ve drawn curves with Blend’s Pen tool then you may know such control points as tangents. When you omit the KeySpline attribute, its control points default to the coordinates 0,0 and 1,1. Here’s a visualization of the resulting key spline:

    When the control points (shown in red) coincide with the start and end points of the curve, as they do by default, the curve is actually a straight line. This is why, unless you explicitly set ease in or ease out, Blend will give linear interpolation between keyframes. The unit square key spline is scaled to the actual value and time deltas of the keyframe which defines it. Here’s what the key spline looks like when ease out is set to 100%:

    The first control point (x1,y1) has moved to 0.5,0. If you now set the ease in value of the second keyframe to 100%, the second control point (x2,y2) moves to 0.5,1 and the resulting visualization looks like this:

    To be clear, the KeySpline values x1,y1,x2,y2 for keyframe n correspond to ease out for keyframe n-1 (first control point: x1,y1) and ease in for keyframe n (second control point: x2,y2) respectively. This means that, for a handoff animation, you can still define an ease out for the non-existent keyframe at time 0. When you first build the animation, drop a keyframe at time 0; then right-click it to set ease out; then delete it. The ease out value will be safely stored in the x1,y1 values of the second keyframe’s KeySpline.

    The control point coordinates can be set to any pair of double values between 0 and 1. In this example the first control point is at 0.1,0.5 and the second control point is at 0.8,0.33:

    Try this key spline out in your application. Replace the contents of the KeySpline attribute on the second keyframe with the control point coordinate string “0.1,0.5,0.8,0.33”. Build and run and see if the resulting motion matches the graph. Remember that the graph is showing an increase in the property which is being animated. In this case the property is TranslateTransform.Y and Y increases down the screen in WPF.

    In fact, the control points for a given curve are identical whether the value is increasing or decreasing. But it’s easier to imagine them on a graph with the value axis flipped (so the origin moves to the top-left and positive y is downwards). Here’s an example where the value of keyframe n is less than the value of keyframe n-1 but y1 and y2 have the same positive values as the previous example:

    You can use Blend’s Pen tool to draw graphs like the ones shown. If you want more complex value curves than the ones shown here then just draw more segments. Adjust the control points (tangents) so that the interpolation curve between each value is how you want it. Then imagine (or draw) the dotted unit square around each pair of values and use it to call off the control point coordinates in the range 0,0 to 1,1 and build a KeySpline string from them. It’s important that your control points don’t fall outside the dotted rectangle. For a value curve, control point coordinates outside the valid range mean either that the curve has a turning point (a keyframe value is missing) or that time is decreasing somewhere on the curve.

    In the next post I’ll share a tool, based on Blend, that you can use to generate double animations from a set of value curves (drawn with the Pen tool) and parameter objects.


  • Expression Blend and Design

    Expression Web Designer CTP is now available!


    Download for free the first-ever Expression Web Designer CTP now via the Microsoft Expression Web site.

    Also, you can discuss Expression Web Designer in the forums as well as send feedback or report a bug to help us make a better product!

  • Expression Blend and Design

    New CTPs available for Expression Graphic Designer AND Expression Interactive Designer!


    We are pleased to present new CTPs of Expression Graphic Designer and Expression Interactive Designer that target Microsoft WinFX Runtime Components Beta 2--the latest release of WinFX.

    Follow the links below to start downloading the May CTPs...

    Remember, you will need to install WinFX Beta 2 first before installing Expression Interactive Designer May CTP.

    Also, before installing the latest CTPs of WinFX and Expression Interactive Designer, please be sure to uninstall previous CTPs of these 2 products to prevent compatibility issues.

    Found a bug? Report it to us.

    Have something to say about the CTPs? Join a discussion group.

  • Expression Blend and Design

    Expression Blend -- What Is That?


    Expression Blend is an authoring system for professional designers to build user experiences that target the .NET 3.0 platform, and more specifically, WPF, or Windows Presentation Foundation.

    WPF provides the platform to bring rich, animated, skin-able, UX envelope-pushing applications to the desktop. Applications that blend content, media and user interface into real user experiences. WPF provides sophisticated vector graphics and blurs the distinction between user interface and content. You can create applications with custom looks, and you’ll have more flexibility and ease than ever before.  You are able to animate pretty much anything, and you can use data binding to create user interfaces from data. You can integrate images, video and 3D, and you get a set of text layout features well beyond what you would expect from a user interface platform. And WPF scales: Blend itself is not only entirely written in managed code, but it also is a WPF application head to toe.

    We strongly believe that designers will have a dominant role in creating these envelope-pushing user experiences we are targeting with WPF. Alas, WPF is an SDK, a software development kit, and not particularly designer friendly. And this is where Expression Blend comes into play. Blend is a visual design tool for WPF, providing a designer-friendly look at all the power of WPF. You can draw and animate like in media authoring tools, but you also have access to components, controls and layout, data binding and all the other features of WPF that make user experiences come alive.

    Rich client applications tend to have a lot of code and functionality. Because code is such an essential part of application development, we believe that Blend will often be used in teams of developers and designers. Blend plays very nicely in environments where design and coding are important – collaboration and interchange with Visual Studio is a big part of the solution.

    If you are developing or designing WPF-based applications, we hope the Expression Blend will blend right in and allow your designers to take much more control and responsibility in the overall process!

  • Expression Blend and Design

    New Training Videos for Expression Web Designer!


    Five (5) new Expression Web Designer training videos are now available for viewing and download at Simply click the Web Designer tab near the bottom of the page, and then click one of the video links under Training Videos.


  • Expression Blend and Design

    New Training Videos Available!


    Just a quick post to let you know 5 new training videos are now available for viewing and download at Simply click the Interactive Designer tab near the bottom of the page, and then click one of the video links under Training Videos.


  • Expression Blend and Design

    Meet the Expression team!


    In case you were wondering what we look like, here's a cheerful photograph taken this evening when the Expression team gathered together to relax and share a drink and mark the occasion of the two CTPs being released today. As is natural with a large team, not everyone could be present for the photograph, and regrettably there are one or two notable Expression-ists (pardon the terrible pun) whom we weren't lucky enough to capture on CCD. Maybe we'll correct that in the future.

  • Expression Blend and Design

    Unni's sample gallery


    Swing by Unni's blog [1] and check out his beautiful samples built with Expression Interactive Designer. Unni is a Program Manager with Expression.




  • Expression Blend and Design

    Inside Amir's and Peter's Flickr Browser sample - Part 2

    The mechanics of the custom classes which provide smarts to the Flickr Browser sample were described in the previous part of this post [1]. Building on that, this post will show how the classes were used in the main Flicker Browser sample [2] application. The principles discussed here are quite general and the intention is that this explanation will help you with your own Expression Interactive Designer projects whether or not you're using custom classes.

    Let's begin with how WrapPanelZ is used and what happens when an item is selected in the list box of thumbnails on the left-hand side of the application's UI. The developer (Peter) built all his custom classes into a .NET library named UIWidgets.dll which he supplied to the designer (Amir). The designer added the library to his project (Project > Add Item...), then drew a ListBox on the artboard ready to customize it. The designer knew, from his Windows Presentation Foundation (WPF) knowledge, that a ListBox displays its items inside what is know as its items panel. By default, the items panel is a VirtualizingStackPanel so it's just a case of replacing that default with the WrapPanelZ. There is more than one way to do this. You can replace the ListBox's entire template (a ControlTemplate) or, easier, you can simply create a new ItemsPanelTemplate and point the ListBox at it. The designer chose the second option and he right-clicked the ListBox and clicked Edit Other Templates > Edit ItemsPanel > Edit a Copy of the Template... then just deleted the VirtualizingStackPanel and double-clicked WrapPanelZ in the UIWidgets library (View > Library). To cause the items to wrap, the designer then made a tiny change to the ListBox's template. Edit Template > Edit a Copy of the Template... then set the Scroller's HorizontalScrollBarVisibility property (View > Properties) to Disabled.

    If you're curious enough to look in Scene1.xaml, you'll find that two things have happened. First an ItemsPanelTemplate has been created in resources with the key ItemsPanelTemplate1. Second, the ListBox has its ItemsPanel attribute set to reference this resource.

    In a different post we'll talk about how to make the selected item scale up. For now, we need to make use of the SmoothMove control. For this, the designer knew that he had to edit the ListBox's item template. This is a DataTemplate which is used to generate a tree of visual elements for each item in the list box. As the ListBox items were bound to data by this stage, there was an existing item template so the designer clicked Edit Other Templates > Edit ItemTemplate > Edit Template. The workflow here for wrapping a SmoothMove around the existing template was to Cut the template, double-click SmoothMove in the UIWidgets library, then activate the SmoothMove and paste the template back in.

    Again if you want to know what's happened in Scene1.xaml you'll notice that the resource with the key FlickrPhotoTemplate (a DataTemplate) defines a SmoothMove element inside which is the Grid which was created at the earlier data binding step. The ListBox has its ItemTemplate attribute set to reference this resource.


  • Expression Blend and Design

    Expression Graphic Designer January 2006 CTP available!


    Today we are also delighted to announce the availability of a new preview version of Expression Graphic Designer. This preview version is the January 2006 Community Technology Preview [1]

    We would like to thank you for your enthusiastic support regarding our professional graphic design application, Microsoft Expression Graphic Designer (formerly code-named "Acrylic"). We look forward to your continued feedback.

    Please note that you must complete a product registration to receive this download.


  • Expression Blend and Design

    Pavan Podila's quicksort animation in WPF

    We'd like to share a link to Pavan Podila's QuickSort animation in WPF [1] sample application. Pavan says: "The idea of creating a QuickSort animation struck me when I was explaining this algorithm to someone at UH. I thought it would be cool to animate this using WPF."

    Pavan used Expression Interactive Designer (EID) and Visual Studio 2005 (VS) side by side. He created the project in EID and then opened it up in VS as well. He built the visuals in EID and used VS to write the logic.

Page 5 of 9 (217 items) «34567»