Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Deep Zoom Composer User Guide


    To access the User Guide, make sure you have the latest version of Deep Zoom Composer installed and go to Help | User Guide or press F1:


    If you reached this post via the User Guide link found in the Welcome Screen, rest assured that we will fix that bug in the near future. Clicking the User Guide link should open the user guide and not take you to a blog post :)


  • Expression Blend and Design

    Download the Preview of the Deep Zoom Composer


    One of the slew of new things that is being released at MIX today is the Deep Zoom Composer powertoy:


    If you have followed the Silverlight 2 Beta 1 announcements, Silverlight 2 includes support for the Deep Zoom technology to allow you to quickly and smoothly zoom in on really large images. If you want to see an amazing implementation of the Deep Zoom technology, check out the Hard Rock Memorabilia site:

    What is the Deep Zoom Composer?
    Deep Zoom Composer allows you to quickly import your own images, arrange and position them to your liking, and export the final output as either a Deep Zoom Image or Collection that can be fed into Silverlight's MutliScaleImage control. This means that you too can use your own images and display them using our Deep Zoom technology.

    Click the link below to download the free preview version:

    dzcicon Download the Deep Zoom Composer

    Because we are currently at MIX, we haven't had  a chance to write a detailed post outlining all of the cool things you can create. Rest assured, we'll be explaining more about this application in future blog posts, but until then, feel free to try this out and let us know what you think.

    Celso, Janete, Kirupa, and Lutz


    FYI: In case you are curious, Deep Zoom is related to the SeaDragon technology that we have been demoing in our PhotoSynth application for a while.

  • Expression Blend and Design

    Download Expression Blend 2.5 June 2008 Preview and Deep Zoom Composer


    Like we mentioned earlier this week, new preview versions of Expression Blend 2.5 and Deep Zoom Composer have been released today. You can download them from the following locations:

    blendicon Download Expression Blend 2.5 June 2008 Preview
    dzcicon Download Deep Zoom Composer

    Both versions coincide with the launch of Silverlight 2 Beta 2, and they both have some cool new features besides just allowing you to create content targeting the latest version of Silverlight 2.

    We’ll have follow-up posts shortly giving you an overview of what some of the new features are. In the meantime, please visit the following page for a summary of the changes and some training videos to help you get started.


    The link for Deep Zoom Composer doesn’t seem to be working, so please use the
    Alternate Link if you are unable to download from the official link.

  • Expression Blend and Design

    Dynamic Layout and Transitions in Expression Blend 4


    Click here to watch Kenny’s MIX 2010 session that covers a lot of the topics that you see in this post.

    - Kirupa

    In Expression Blend, we’ve been thinking for a loooong time about how to make it ever easier to create great animated visual effects quickly on top of the Silverlight and WPF runtimes. We’ve been looking at large-scale animation needs since Blend 2 SP1 and steadily building features to address those needs, and we think we’ve reached critical mass. With Blend 4, we have a compelling set of technologies that work very well together.

    This blog post is a companion to the “Dynamic Layout and Transitions” demo app that we’ve placed in the Expression Gallery at That app shows off the features whose motivations are described here.


    Prehistory (2007)

    Since its inception, Blend has offered keyframed editing of Silverlight and WPF properties via Storyboards. While I won’t go into specific details on that here, it forms the basis for all the features described below. Some of these features work directly from Storyboards you create and others create Storyboards behind the scenes on your behalf – and sometimes both.


    Ancient History (2008)

    Let’s start by turning the clock back two years. In Expression Blend 2 SP1, we introduced the States Panel, which edits VisualStates and VisualStateGroups for Silverlight 2 (and WPF 3.5 with the WPF Toolkit). This introduced the notion of a “state” as a means of communication between visuals and code, and made it dramatically easier to describe a set of visual changes. Based on input, the control code could decide when to enter what state, and the visuals would decide what changes were present in that state plus how long it took to transition between any pair of states (e.g. you might want most state changes to take 0.25s, but want Pressed state changes to be instantaneous).


    This proved to be a very effective tool, but it had limitations. The core VisualStateManager runtime (which we’ll call “VSM” from now on) could only do linear interpolations of the values being set. This works great for opacity and transform offsets, but doesn’t work well for discrete properties or data that isn’t known until runtime. Also, not all animation scenarios are driven by state changes. So we put our thinking caps on about how we could get more scenarios to work in a way that designers could rapidly tool the effects.


    Recent History (2009)

    In V3, we added four primary enhancements in this area. The first was EasingFunctions, which are critical to making property animations have the right feel. We’ve got all the classics – quadratics, cubics, bounce, elastic, etc. Plus, you can write your own EasingFunction in C# or VB and apply it to any animation you wish. This is all supported in Silverlight 3 and WPF 4. EasingFunctions can be applied to an individual animation or keyframe, and you can apply a default EasingFunction to your entire state transition.


    The second was a GoToStateBehavior on top of Blend’s Behaviors engine, which made it easy to program all your state change logic directly in the markup without code. Like all of Blend’s Behaviors, you can simply drag it from our Asset Panel onto any elements you choose.

    Those two enhancements just made the existing scenarios run better. We also wanted to address new classes of scenario. The first one we tackled was the issue of elements moving in a StackPanel or WrapPanel. Traditionally, these elements have snapped into place as an application changes elements or changes size, and we wanted a smooth transition that users could control. So we introduced the FluidMoveBehavior to make it easy for an element to watch the layout manager for when it moved to a new spot, and smooth out its progress with an animation controlled by one of those EasingFunctions we described earlier. So now it’s easy to have your elements animate into place at a speed you choose!


    Here’s a picture of the feature in action. There’s no more room on the first line for the purple rectangle, so it’s moving to the beginning of the second row and the other elements are moving to make space. Technically, from a layout perspective, the elements in motion are actually at their destinations already – but by adding the appropriate transforms on top, we make the change look smooth from the visual perspective that users care about.


    The fourth enhancement we made was the most challenging for us. We noticed that many times, customers wanted different states in their control to have different layouts entirely, but still respond to active layout changes in the application. For example, one layout might have a set of task panes visible outside the working area, and another might have one or more of these panes hidden. Customers wanted to describe these different layouts with states to get a good separation between their visuals and their business logic, but the properties that needed to change between these states weren’t properties that could be smoothly interpolated. For example, how do you interpolate between Visibility.Visible and Visibility.Collapsed?

    What we learned was that in cases like these, users weren’t satisfied with the direct property animations that our system provided – they just wanted it to “look right”, and making it “look right” required that we animate a morph of the change rather than the change itself. So we wrote an engine that would take a layout snapshot before the state change, take another layout snapshot after the state change, and create a smooth morph between the start and end positions, employing the duration and EasingFunction of the user’s choosing. We dubbed this “FluidLayout”, and you can turn it on here:


    Just click that little button, and all your layout changes in that VisualStateGroup will be animated between states even when it seems impossible. We’ll even simulate a Visibility change by means of an opacity simulation. Note that you’ll have more success if you click this before you start making layout changes – otherwise, when you move an object, it’ll create translate/scale animations that don’t respect layout, because that’s the best that the standard VSM can do.

    It’s hard to do justice to this feature in a picture, but here’s my best attempt. In this example, the Timeline Pane is in the process of shrinking to the leftmost column, which I configured by changing the Pane’s Grid.ColumnSpan property in a state. Similarly, I changed the RowSpan of the pink rectangle, and it is in the process of growing taller as a result.



    The Present (2010)

    In Blend 4, we’ve managed to take these themes even farther, and have three more toys for designers to play with. Let’s start with animating things in and out of lists. In V3, you could apply a FluidMoveBehavior to your ListBox, and the other items would dutifully make room for your new item or close up the space. But there wasn’t any easy way to effectively control the item that was itself being added or removed; if you were clever, you could rig up some events to make an element animate on entry, and you had to be really really clever (and pollute your data model in unfortunate ways) to make an element animate on exit. We worked closely with the Silverlight team to produce a solution here that you can tool effectively, and it’s called LayoutStates. To find them, first edit the ItemContainerStyle:


    And then, note these three new VisualStates in the States Panel:


    You can use these states to model what an element looks like just before it’s loaded, what it looks like after it’s been loaded, and what it looks like just before it’s unloaded. Silverlight will then animate the state changes for you at the appropriate times, as your items are added to or removed from the list. Remember to add a FluidMoveBehavior to the ItemsPanel template (note its presence in the Edit Additional Templates submenu, a couple of pictures above), and set AppliesTo = Children, to get the other elements to move out of the way. Note that if your ItemsPanel is a VirtualizingStackPanel, your ListBox should have VirtualizingStackPanel.VirtualizationMode set to Standard, or you should learn one of the other new tricks below.

    Here’s an example of this in action – the middle item is just entering the list.


    The next feature we added is another in the vein of simulation. In V3, we added FluidLayout to VSM in order to get a smooth and realistic morph between two states, but it got us to thinking about the other sorts of morphs we could perform. Enter TransitionEffects. Whereas transition effects in video editing provide a pixel-based transition from one video clip to another, Blend’s TransitionEffects provide a pixel-based transition from one state to another. In Blend, a TransitionEffect is a PixelShader that has an animatable Progress property. We are shipping several of these in our SDK, and if you know HLSL you can write your own. Here’s how you set one up:


    As configured here, all state changes in the LayoutStates group will perform a “Smooth Swirl Grid” pixel-based TransitionEffect, taking one second and with a cubic ease. You can of course set a different transition for any individual state change if desired. Some of the TransitionEffects have properties to further customize them; for example, Smooth Swirl Grid lets you control the level of subdivision and the intensity of the twisting effect, but those properties are under the combo dropdown in the picture. Here’s a screenshot of that TransitionEffect in action:


    The final feature we added is something that we’ve been trying to wrap our minds around for five years. We’ve noticed that in a lot of applications, visuals will move from one part of the application to another even though the visuals are often generated from data. In a true MVVM design where the data model should know nothing about the visuals, it’s extremely challenging to get these kinds of effects.

    What we’ve done is train the visuals to learn more about the data model – specifically, to train FluidMoveBehavior to associate positions with data instead of with visuals. This needs a little bit of explanation, but is remarkably easy to use – you can create an animated list-detail example from scratch in about two minutes.

    Here’s a picture of such an app:


    What we want is for the large chair in the details view to appear to grow out of the small chair in the master list. All we have to do is locate the Image element in the ItemTemplate for the ListBox, and give it a FluidMoveTagSetBehavior that will register it with the FluidMove system. That looks like this:


    Note that the Tag property indicates that element will be tagged according to its DataContext, which is the model item behind the visuals. Next, there’s a FluidMoveBehavior on the detail Image, which looks like this:


    The other half of the connection is made with the InitialTag field that is set to DataContext. This means that when the detail element appears, it will consider the registered position of its DataContext to be the place it will appear to come from. And that’s the whole thing! Here’s a screenshot of that app in action; note that in this case I set the FluidMoveBehavior on the entire Grid, so that the details would animate along with the image.


    There’s an awful lot happening behind the scenes, but we’ve managed to boil this complex scenario to these two simple properties. This system can even be used to animate objects from one list to another list.


    The Future (201X)

    If I had included all of our future investigations in this area, this blog post would be twice as long as it is already. We’re working hard to address more and more scenarios in the simplest ways possible. Rest assured that you’ll be hearing about even more improvements someday in the not too distant future!

    If you have any opinions or feedback, please feel free to comment below.


    Kenny Young
    Architect, Expression Blend

  • Expression Blend and Design

    What Would You Like to See in the Next Versions of Blend and Design?


    Even though we just shipped Expression Blend and Design 2, we are already busy planning what to do for future releases. To better help us with our planning, we'd like to hear from you.

    What are some things that you would like to see in Blend and Design? What are some of the things that you wish were done differently? Also, what are some of the things in our products that you like?

    Let us know by posting in the comments below! We take your feedback very seriously, and your input goes a long way in helping us improve our products.


    (On a related note, based on feedback from many of you, this blog has been restyled. A big thanks to Tim Sneath for the help.)

  • Expression Blend and Design

    Creating Falling Snow in Silverlight!


    Exactly a year ago (plus one day…but who’s counting?!), I posted a sample WPF application that simulates falling snow. Since Silverlight 2 was released since then, below you will find a Silverlight version of a similar falling snow effect:

    Get Microsoft Silverlight

    Just click on the Let It Snow banner to cause 200 snowflakes to start falling. Feel free to use this for your own projects, and the source files have been provided below:

    folderfiles Download Falling Snow Source

    For your own projects, the only thing you may want to tweak is the width and height of your application. Currently, everything is hard coded to a width and height of 500px by 300px respectively, but if you decide to change the size, be sure to open Page.xaml.cs and change the dimensions provided:

    private void PopulateSnowFlakes()
       for (int i = 0; i < 200; i++)
          SnowFlake snowFlake = new SnowFlake();

          // 500 and 300 is the width/height of the application
          snowFlake.SetInitialProperties(500, 300);

    Besides that, everything else should be pretty straightforward. If you have any questions, feel free to leave them below.


  • Expression Blend and Design

    Hello DeepZoomTools.DLL : Deep Zoom Image Tile Generation Made Easy


    In our most recent release of Deep Zoom Composer, one of the major changes we made was to change how we generated the image tiles both for designing as well as exporting your Deep Zoom Content. In the past, ever since our first release at MIX, our image encoding was done using a combination of SparseImageTool.exe and ImageTool.exe command line tools. Starting with this release, we have retired those tools and have shifted to a preview version of a .NET based DLL that provides image generation capabilities.

    If you look inside your Deep Zoom Composer installation folder, which is by default, [Program Files]\Microsoft Expression\Deep Zoom Composer, you will see a file called DeepZoomTools.dll:


    This DLL contains all of the functionality needed for you to generate image tiles for compositions and collections. The classes and methods that you can use are as follows:

    public enum ImageFormat { Jpg, Png, Wdp };

    public class Image
        public Image(string path)
        public double MaxViewportWidth
        public double MinViewportWidth
        public string Path
        public Point ViewportOrigin
        public double ViewportWidth

    public class ImageCreator
        public ImageCreator()
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(string source, string destination)

    public class CollectionCreator
        public CollectionCreator()
        public double ImageQuality
        public int TileSize
        public int MaxLevel
        public ImageFormat TileFormat
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)
        public void Create(ICollection<string> images, string destination)

    public class SparseImageCreator
        public double ImageQuality
        public int TileSize
        public int TileOverlap
        public ImageFormat TileFormat
        public Color BackgroundColor
        public bool CopyMetadata
        public void Create(ICollection<Image> images, string destination)

    The API should be pretty straightforward. A DeepZoomTools.Image is the internal notion of a Deep Zoom image, and it contains all of the information such as the viewport widths, path to source image, origin, etc. ImageCreator is used to define an image and write the image tiles to disk. CollectionCreator and SparseImageCreator take a list of image paths and write the image tiles to disk.

    When I was playing with this, the one thing that confused me was what CollectionCreator expected as its “image path”. It isn’t a string of paths to raw JPG, PNG, etc. files. It is actually a path to the Deep Zoom Image created via ImageCreator/SparseImageCreator. SparseImageCreator does take in a list of paths to the source image, so passing in a list of image files will work for generating sparse images (aka Compositions).

    Do note that this DLL is a pre-release version, and the Live Labs team will decide when and how to more formally release this in the future. Even though Deep Zoom Composer uses this same DLL, there may be future releases of this DLL that are independent of Deep Zoom Composer releases.


  • Expression Blend and Design

    Creating your Own Vista "Chrome" Style Button


    In this blog post I’d like to show a way to create your own “chrome” like button template that can be easily modified and used over and over again using Expression Design.  This post is targeted for the absolute beginner, so if you've never tried using Expression Design before, this post should help you become familiar with it. What you should get by the end of this exercise is a button that looks like this:


    Slice 6 

    So let’s begin:

    Lets start by creating a rectangle on the art board, setting its width to 150 pixels and its height to 50 pixels:

    Slice 1 

    While you could use the adorners, you can more precisely use the Action Bar to set the width and height instead:


    If you look at the final button shown above, you will notice that it has rounded corners. That means we need to make our rectangle have rounded corners also. Select your rectangle and modify its corner radius on the Properties Panel to 10px:


    Once you have made your changes, your rectangle will now have curved corners:

    Slice 2

    Now we’ll add a gradient to our button.  For the sake of simplifying things, we will use the default gradient swatch and make this button a silver (grayscale) button:


    When you apply your gradient, your button will now look as follows:

    Slice 8

    As you can see, we have quite a bit of work to do before we have it looking nice! First, we’ll remove the stroke from the button by clicking on the stroke tab and setting it to none:


    Setting the Stroke to none has the effect of removing the black outlines you see in your curved rectangle:

    Slice 3

    With the stroke gone, let's focus our attention on the fill. Notice that the gradient on the button pans from Left to Right.  We want to change this so it pans from Top to Bottom.  Using the gradient rotation angle tool, change the rotation angle to 270 degrees or -90 degrees as shown below:


    Once you change the rotation angle for your gradient, your button will now look like what is shown in the following image:

    Slice 4

    Now that we have our smooth gradient, we’re ready to move on to the next step.  The shine! Or what some might call the light layer, or what I like to call it, the Bling!

    Copy your button object to the clipboard and use the PASTE IN FRONT feature from the EDIT MENU to place another copy on top. While on top we’ll make some adjustments to give it that look that we want.

    Select your new button object and do the following:

    1. Return to the ACTION BAR and change your new objects width and height to (146x25).  Your second button object becomes centered on top of the original. 
    2. Also change the corner radius of your new shape to eight (8) pixels to give your new object smaller corner roundness.
    3. Nudge your object upwards to the top of your underlying object until it’s about 4 pixels away from the top of your underlying object.  You might want to zoom in a bit to do this more precisely.
    4. Change the gradient rotation angle to 90 degrees.  It should have been set to -90 degrees from copying and pasting from your underlying object.
    5. Return to the properties panel.  Replace the black gradient stop with the color white so that you have white on both ends of the gradient.

    At this point, your button will look a lot different:

    Slice 5

    While still on the same gradient stop, change the Stop Alpha to 0%:

    stop alpha

    Boo-yah!  Your button is now complete and should look like this:

    Slice 6

    Here is the trick.  Click on the bottom object and try replacing the black gradient stop with any color you’d like and watch your button color Scheme change as you browse through the spectrum.  You can even go further and experiment with more than two gradient stops.

    Hint:  You can make your button darker by increasing the midpoint of the gradient.

    Here is the expression design file with some of the assets used in this tutorial: Download Chrome Style Button Design File

    Have fun!
    Sam Paye

  • Expression Blend and Design

    Glassy Feed Buttons in Expression Design


    Annie Ford explains how to create glassy buttons in Design. Click here to read more about it!

  • Expression Blend and Design

    Download Expression Blend Preview for .NET 4


    Today at PDC, we made a few announcements that would be of interest to you! First, Scott Guthrie announced the availability of the Silverlight 4 Beta. This version of Silverlight contains some cool new features that many of you have asked for, so read the What’s New document to get an overview of some of the new features.

    To coincide with the release of Silverlight 4 Beta today and the release of Visual Studio 2010 Beta 2 a short while ago, we are making a version of Expression Blend available that allows you to work with .NET 4 and Silverlight 4 based projects.

    Download it from the following location now:

    blendicon_3 Download Expression Blend Preview for .NET 4

    This release of Expression Blend works well alongside Expression Blend 3, so you can continue to work on your WPF 3.5 and Silverlight 3 based projects at the same time.

    As always, we love to hear from you. Please feel free to comment below or use our forums here.

    - The Expression Blend Team

  • Expression Blend and Design

    .NET Framework 3.5 Service Pack 1 Beta and Expression Blend


    Recently, a beta of .NET Framework 3.5 Service Pack 1 was released. There is currently an incompatibility with Expression Blend/SP1, Expression Blend 2, and Expression Blend 2.5 March 2008 (whose version number is 2.1.1111.0) where Blend will not work if you have .NET Framework 3.5 SP1 Beta installed.

    We currently have a version of Expression Blend 2.5 March 2008 Preview (referred to as Blend 2.5 Preview from now on) that fixes this incompatibility, but you will only be able to create and edit WPF and Silverlight 1 projects. While Blend 2.5 Preview will also allow you to create and edit Silverlight 2 projects, they are not supported by Visual Studio at this time.  If you are doing any Silverlight 2 development, please do not install .NET Framework 3.5 SP1 Beta until a future Silverlight Tools update is made available.

    Download Updated Blend 2.5 Preview
    If you downloaded and installed a version of Blend 2.5 Preview prior to May 9th, please uninstall your existing version of Blend 2.5 Preview and install the updated version of from the following link:

    blendicon Download Refresh of Expression Blend 2.5 March 2008 Preview

    Once you have the latest version of Blend 2.5 Preview installed, you can verify that you are running the latest version if your build number is 2.1.1113.0 by going to Help | About:


    If you are running an earlier version of Expression Blend such as V1 or V2, please do not install the .NET Framework 3.5 SP1 Beta. Instead, please wait for the final release of .NET Framework 3.5 SP1 that will be compatible with all versions of Expression Blend.

    Sending us Feedback
    If you have any questions or encounter other issues while running Expression Blend 2.5 on .NET Framework 3.5 SP1 Beta, please let us know by posting on our forums.


    Update (13 May 2008)
    There’s been some confusion around the date of this blog post- the date that it’s picking up is when we originally discovered that we’d have to do an update to Blend coinciding with the 3.5 SP1 Beta and prepared the original draft of the blog post that we’d use to communicate the issue.

    The publish date was completely accidental- just a byproduct of trying to coordinate releases. Sorry about the confusion, we really weren’t trying to be sneaky at all!

  • Expression Blend and Design

    An Introduction to Behaviors, Triggers, and Actions


    The following post is written by Jeff Kelly, one of the developers who worked extensively on both the behaviors runtime as well as the UI inside Blend that makes behaviors easier to use! In this post, he will provide an overview of the three components that make up what we collectively call “Behaviors” in the Expression Blend 3 Preview  - Kirupa

    One of the major goals of Blend 3 is to make it easier to build interactivity into your applications. In Blend 3, we’ve introduced several new concepts that make writing and reusing interactivity easier than ever before. By writing triggers, actions and behaviors, developers can provide functionality that is cleanly encapsulated and reusable by both developers and designers. Likewise, designers are empowered to add a new level of interactive functionality to their work without ever having to touch a code file.

    Triggers and Actions
    To anyone familiar with WPF, triggers and actions should sound familiar. Blend 3 introduces a similar model, extends support to Silverlight as well as WPF, and allows you to write your own triggers and actions - opening a whole new world of possibilities for what kinds of functionality you can create and reuse in your own applications. Let’s look at what triggers and actions are at a conceptual level, and then dive a little deeper into the basics of the API.

    An action is an object that can be invoked to perform an operation. If you think that sounds pretty vague, you’re right. The scope of an action is not constrained: if you can write the code to do something, you could write an action to do the same thing. That said, actions are best written to perform operations that are largely atomic in nature. That is, actions work best when they don’t rely on external state that needs to be persisted between invocations of the action, and that don’t have any dependencies on other actions existing or running in a particular order relative to their invocation.

    Good actions

    • Change a property
    • Call a method
    • Open a window
    • Navigate to a page
    • Set focus

    Actions aren’t particularly useful on their own: they provide functionality to do something, but no way to activate that functionality. In order to invoke an action, we need a trigger. Triggers are objects that contain one or more actions and invoke those actions in response to some stimulus. One very common trigger is one that fires in response to an event (an EventTrigger). Other examples might include a trigger that fires on a timer, or a trigger that fires when an unhandled exception is thrown.

    One important thing to note is that triggers and actions are generally meant to be used together arbitrarily. In other words, you should avoid writing an action that makes assumptions about the type of trigger that invokes it, or a trigger that makes assumptions about the actions that belong to it. If you find yourself needing a tight coupling between a trigger and action, you should instead consider a behavior. Speaking of which….

    Whereas the concepts of triggers and actions have been previously established in an earlier incarnation in WPF, the concept of a behavior is a new one. At a glance, a behavior looks similar to an action: a self-contained unit of functionality. The main difference is that actions expect to be invoked, and when invoked, they will perform some operation. A behavior does not have the concept of invocation; instead, it acts more as an add-on to an object: optional functionality that can be attached to an object if desired. It may do certain things in response to stimulus from the environment, but there is no guarantee that the user can control what this stimulus is: it is up to the behavior author to determine what can and cannot be customized.

    As an example, consider a behavior that allows me to drag the object the behavior is attached to around with the mouse. I need to listen to the mouse down, mouse move, and mouse up events on the attached object. In response to the mouse down, I’ll record the mouse position, hook up the mouse move and mouse up handlers and capture the mouse input. On mouse move, I’ll update the position of the object as well as the mouse position. On mouse up, I’ll release mouse capture and unhook my mouse move and mouse down handlers.

    My first inclination might be to try and use EventTriggers for each of these events, and write a StartDragAction, MoveDragAction and StopDragAction to invoke in each case. However, it soon becomes apparent that this scenario is not well-addressed by actions: I need to store state between invocations (previous mouse position and the state of the drag), and the operation isn’t atomic. Instead, I can write a behavior that wraps the exact functionality outlined above into a reusable component.

    Hopefully this post gives you an overview of what makes up a Behavior – the catch all word we use for behaviors, actions, and triggers. In my next post, I will describe the API a bit more and provide some code snippets on how to write each of the behavior components.


  • Expression Blend and Design

    Blend 2 SP1 + WPF Toolkit = Visual State Manager for WPF


    The Blend 2 Service Pack 1 contains a secret ingredient that can be activated by installing the WPF Toolkit and then setting a Registry value. In a nutshell, this ingredient is Visual State Manager support for Windows Presentation Foundation projects. As you know, Visual State Manager is built into Silverlight 2 but the WPF Toolkit gives you an early peek into the future of VSM-for-WPF.

    The WPF Toolkit is a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle. The WPF Toolkit not only allows users to get new functionality more quickly, but allows an efficient means for giving feedback to the product team.

    Once you have the Blend 2 Service Pack 1 installed, here are the steps you need to follow to get to the VSM-for-WPF goodness:

    1. Install the WPF Toolkit from
    2. Create the following registry value and make it non-zero. The value should be of type DWORD. Or run the appropriate .REG file attached to this post (or by clicking here).
      • 32 bit OS : HKLM/Software/Microsoft/Expression/Blend/EnableVSM
      • 64 bit OS : HKLM/Software/Wow6432Node/Microsoft/Expression/Blend/EnableVSM
    3. If Blend was running during the previous step then restart it.
    4. Create a new WPF project.
    5. Add %Program Files%\WPF\WPF Toolkit\...\WPFToolkit.dll to the References folder (Right-click the References node in Project, then click Add Reference…).
    6. Close and reopen Window1.xaml. The States pane will now appear for the project.

    Here are some VSM resources to get you going:

    Even though the built-in WPF controls (such as Button and CheckBox) weren’t designed with VSM in mind, the toolkit works some event interception magic that means your Visual States are applied provided they’re given the standard names such as Normal, MouseOver, Pressed, Disabled, Unchecked, Checked and so on. You can also use VSM-for-WPF to add interactivity to new custom controls you author yourself, although be aware that Blend will not read any default VisualState information out of the default template. And of course you can also add VSM interactivity to UserControls.

    We hope you have fun!


  • Expression Blend and Design

    Expression Blend 4 Beta and Information on Windows Phone Development


    As many of you know, today was the first day of MIX - Microsoft’s annual conference for designers and developers. Just like previous years, there has been a lot of great news coming out of the conference.

    The two big things we announced are Expression Blend 4 Beta and an add-in to Expression Blend that gives you the ability to build applications for the Windows Phone.

    Download everything you need below (*updated for RTM):


    .NET Framework 4
    blendicon_3 Expression Blend 4

    Windows Phone Development
    You will need the following components installed for developing Windows Phone apps:

    1. Expression Blend 4
    2. Windows Phone Developer Tools
    3. Microsoft Expression Blend Add-in Preview for Windows Phone
    4. Microsoft Expression Blend SDK Preview for Windows Phone

    Christian Schormann has a nice overview of Expression Blend 4 and the new features in it, so if you want to learn more, go read his blog post.

    Of course, there will be plenty of posts in the upcoming days and weeks that dive into detail on what we’ve released and announced today, so stay tuned.

    As always, we love to hear from you. Please feel free to comment below or use our forums here.

    - The Expression Blend Team

  • Expression Blend and Design

    An Update to Deep Zoom Composer


    Ever since we released Deep Zoom Composer during MIX, there has been a ton of great feedback you have all sent us on what you liked and what you would like to see improved in future versions. To give you a sneak peek at where we are currently, we're releasing an updated version of Deep Zoom Composer for you all to play with:

    dzcicon Download the Deep Zoom Composer

    Before installing this version, please uninstall earlier versions of Deep Zoom Composer. All of your older projects should still work, so don't worry! Once you have it installed, besides a ton of changes under the hood to make creating your Deep Zoom content faster and more memory-efficient, some of the bigger features that you will immediately notice are the following:

    Improved Exporting

    The single biggest thing we heard consistently from all of you was to make exporting better. In the earlier version, all we did was just output the image tree. To figure out where you had to go from there, our Composer didn't help. Luckily, you had quality blog postings from individuals such as Scott Hanselman, Pete Blois, Wilfred Pinto, Jaime Rodriguez, and others who helped answer the question "Where to go from here?" In this version of Deep Zoom Composer, we try to make that easier for you by outputting a working Silverlight 2 project along with your image tiles:


    Now, you no longer have to worry about what to do with these bizarre cutouts of images that you get as your output, and we even provide all of the mousewheel, pan, zoom, and keyboard functionality that you otherwise had to write yourself!

    Better Design Experience

    Arranging images can be a time-consuming task. To make it easier for you to do that, we've added snapping and guidelines that appear when you are dragging either a single or a group of images around:


    We also took care of the various filling/scaling issues you would have encountered when zooming in on images on the design surface. In case you didn't know, Deep Zoom Composer actually uses a variation of the tiling technology from Deep Zoom on the design surface itself, so we would be swapping images in an out at a frantic pace if you happened to be zooming and panning around while composing your images. We still do that....but it just feels more natural without the distortions you saw earlier.

    Updated Collections Export

    When exporting collections, Deep Zoom Composer would often misrepresent the position of your arrangements when you actually previewed in our browser. Thanks to the Live Labs team (Lutz, Dan, Avi, and Rado), they were able to pinpoint the problem and fix it for us in this release. You no longer have to worry about what you see in Deep Zoom Composer not being what you saw in the browser.

    Greater Access to Help

    There will be times when you would need more help than what the application provided. We've tried to call out both our support forum and this blog throughout the application so that you can quickly get unblocked on any issues you run into:


    In the past, all of these questions have been handled directly on the blog. For archival purposes, it would be great if you could post those questions on the forums instead. Scanning through several posts with 50+ blog comments for solutions probably isn't fun, and we don't want your question to get lost and go unanswered.

    Where Next?

    There are still a lot of great features that we will be adding in the future, so if you have any requests, complaints, wishes, etc., please feel free to let us know by posting a comment here or in our Deep Zoom forum on the Expression Forums.

    Celso, Janete, Kirupa

  • Expression Blend and Design

    Expression Blend 2 September Preview is now available!


    We are pleased to announce a new preview build in the Expression Blend 2 train – our September Preview. The September Preview has a slew of new features, many of them made possible based on your feedback!. We have also made available some videos that highlight the new features in this build. Visit the Expression Blend 2 September Preview page for viewing these, and to download and install the latest build.


    As usual, we look forward to your feedback!

    Many thanks,

    The Expression Blend team


    What is new in this release?


    Visual Studio 2008 Support

    The Expression Blend 2 September Preview can open and work with Microsoft Visual Studio® 2008 (formerly known as Microsoft Visual Studio code name "Orcas") Beta 2 projects and solutions. By default, Windows Presentation Foundation (WPF) projects that are created in the Expression Blend 2 September Preview are now Visual Studio 2008 projects, if Microsoft .NET Framework 3.5 is installed and such projects cannot be edited in Visual Studio 2005. The Expression Blend 2 September Preview can still open projects that were created with earlier versions of Expression Blend or Visual Studio 2005.


    Making Controls from Existing Objects

    The Expression Blend 2 September Preview contains new functionality that lets you refactor  (in other words, convert) existing content into a control that can be reused (instantiated). Selected elements, their referenced resources, and referenced animations are refactored into the new control. You must build the project to be able to see and instantiate the new control.


    Split View and XAML Editor Improvements

    The Expression Blend 2 September Preview lets you view an open document in both Design view and XAML view at the same time by selecting the new Split tab on the right side of the artboard. Additionally, you can specify font size, font family, tab size, and word-wrap for the XAML editor (XAML tab) by modifying the Code Editor settings under Options in the Tools menu.


    Storyboard Picker

    The Storyboard Picker replaces the old Storyboard box. The picker consists of a label to indicate the name of the selected Storyboard (if a Storyboard is selected), a shortcut menu (available when you right-click the label), a pop-up button (and resulting pop-up menu), and a Close button to close all Storyboards and exit recording mode. Both the shortcut menu and the pop-up menu let you create a New Storyboard, and if a Storyboard is already selected, you can now Duplicate, Reverse, or Delete the selected Storyboard. The shortcut menu also lets you Rename the selected Storyboard. The pop-up menu contains all Storyboards in scope in a multicolumn layout. The pop-up menu can be resized, and its list filtered according to a text box at the top of the list. The Storyboard label serves as the Storyboard selector when you want to modify properties on a Storyboard.


    Storyboard and Keyframe Properties

    The Expression Blend 2 September Preview contains new functionality for setting properties on Storyboards and on keyframes in the Properties panel. When you have a Storyboard selected, you can change the direction of the animation and change the repeat behavior. When you have one or more keyframes selected, you can change the easing behavior between keyframes by modifying the related key splines graphically, or by setting specific values.


    Vertex Animation

    The Expression Blend 2 September Preview contains new functionality for animating individual vertices (points and tangents) on a line. Previously, if you modified a vertex when in animation recording mode, the original shape of the object was permanently modified.


    Breadcrumb Bar

    The Expression Blend 2 September Preview now displays a breadcrumb bar above the artboard, which helps you quickly switch editing scopes while you are editing templates and styles in WPF projects. The breadcrumb specifies the object that is selected. If a template can be applied to the object (such as a button), you can click a drop-down arrow in the breadcrumb item to view the actions that can be performed on the object (such as editing a button template). If you have already edited a style or template on the object, the breadcrumb will include additional items that represent the style and template items that you edited earlier. This makes it easy to see which style or template has already been edited on an object, to quickly switch the scope in which you are editing, and to understand exactly where you are as you make changes.


    Font Embedding and Subsetting

    The Expression Blend 2 September Preview contains new functionality for embedding and subsetting fonts in your project. Embedding makes sure that the font that you select for your application is the font that users will see when they run your application. Subsetting lets you create a custom font file that only contains a subset of the glyphs that you are interested in, and thereby reduce the size of your re-distributable. Typically, users will already have most of the fonts that you can select in Expression Blend, and therefore you do not have to embed them. If the user does not have your chosen font, a default system font will appear. If you do decide to embed, subset, or otherwise redistribute fonts in your application, it is your responsibility to make sure that you have the required license rights for those fonts. For the fonts that come with Expression Blend, see the Microsoft Software License Terms (EULA.language.rtf) file for full license terms. For other commercial fonts, see the Microsoft Typography web site for information that can help you locate a particular font vendor or find a font vendor for custom work. To embed fonts in an Expression Blend application, you can use the new Font Embedding manager available in the Tools menu and available in the Advanced Properties section under Text in the Properties panel when you select a text control. For more information about how to embed fonts in WPF applications, see Packaging Fonts with Applications on MSDN.


    Build Options

    When building inside the Expression Blend 2 September Preview, the property $(BuildingInsideExpressionBlend) is set to true. You can use this property in your project or .targets files to change how the project builds when in Expression Blend. For more information about how Visual Studio supports this scenario, see the Visual Studio Integration documentation.


    Object Manipulation

    We’ve added the ability to uniformly resize, scale, and rotate multiple selected elements by using resizing handles on the artboard. In addition, we made a number of usability improvements – for example, you now easily duplicate elements by dragging them with the Ctrl key pressed.

  • Expression Blend and Design

    Deep Zoom Collections Example


    Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions images. This is the case where you arrange all of your images on the artboard, and during export, flatten everything into a large image before breaking them up into the various tiles. This is actually the default behavior of the Deep Zoom Composer and is done transparently in the background while you export. Single high-resolution images are great, but if you wanted to do more with your images such as programmatically move individual images around or filter your images (similar to the Hard Rock Cafe Memorabilia site), the single high-resolution image is not ideal. That is where the Collections feature of Deep Zoom comes in.

    With collections, instead of flattening your entire composition into one image before generating your image tree, you actually generate an image tree for each image in your project. This is almost like generating a single high-resolution image for each image you use. The details are not that important. What is important is that this allows you to control each image individually while still retaining the layered zooming and fading effects that Deep Zoom is really known for.

    Instead of just describing collections using text, below you’ll find an example that showcases these features instead:

    Click on the Randomize Images button to arrange your initial layout into a grid. Keep clicking on Randomize Images to continue randomly swapping your images while still staying within this grid.

    If you are curious to see how the above example was created, below I’ve posted a sample project (make sure you have the Silverlight 2 Tools Beta 1 installed) that contains everything you will need:

    slproject Download Sample

    As you can see, this is really cool, and best of all, you already have everything at your fingertips to create collections using the Deep Zoom Composer itself. In a Deep Zoom Composer project, from the Export workspace, check the “Create Collection” checkbox, and your output is properly adjusted for collections:


    The source files provided earlier contain both the C# Silverlight 2 project as well as the Web Site project where your images are stored. Take a look at the Page.xaml file to see the extra Grid/Column info I added for our MultiScaleimage to ensure our Collections will display initially, and if you are curious to know  how the rearranging animation was done, take a gander at the Page.xaml.cs as well.

    In case I never explicitly mentioned it, feel free to reuse and modify any of the source files I’ve posted into your own (hopefully cooler!) examples.


    - Kirupa (Expression Blend)

    - Lutz Gerhard (Live Labs)

  • 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

    Storyboards, Visual States and SketchFlow Animations


    What are these things – are they different ways of doing the same task? When would I use one in preference to another? Do they all work in all project types?

    This post will try to answer those questions by describing the animation and control customization tools that are available to you in Expression Blend 3 + SketchFlow, and discussing what jobs each tool is meant to do. I’ll be classifying project types along two independent axes: WPF or Silverlight, and Blend or SketchFlow.

    In the first release of Blend, if you wanted to change the value of a property over time, then the Storyboard was your one option. Using a Storyboard is also known as ‘keyframing’. You create a new Storyboard (or create a BeginStoryboardAction and let that workflow create a Storyboard for you), move the playhead to various times and then use the artboard or the property inspector to change values. Each time you change a value, a keyframe is added to Blend’s Timeline meaning that, at that time, the property has that value. During the interval between keyframes, the property value smoothly takes on intermediate values in a process known as interpolation. By default, the interpolation between two values is linear, meaning the value changes steadily as time passes to form a straight gradient on a graph. And you can control interpolation between keyframes by describing an easing curve. Whether you were changing the Y coordinate of a bouncing ball, or changing the color of a rectangle in a Button template in response to a mouse click, in the first release of Blend you would have used a Storyboard to do it. Something you would have known about, too, is a handoff animation. This is an animation that has no keyframe at time 0 so that, when the Storyboard begins, property values are snapshotted and gradually changed to the value of the earliest keyframe. Handoff animations are important when defining the transition into a control state because you need the animation to be continuous even when it is interrupting an already in-flight transition (say you move the mouse over and then away from a control before the transition into the mouseover state completes).

    Storyboards are available in all project types. They’re just as useful today as ever, and they are worth learning how to use, because at some point you’ll probably need to use them. They give you the most control over animation, but control can come at the cost of some effort.

    For the task of customizing the look and transitions of a control’s visual states, there’s an alternative and arguably simpler mental model than using a Storyboard to define the transition into a state. The simpler mental model is that you draw the control in each of its states then, if it’s important to you, specify how long any of the transitions take. I say ‘draw’ because that’s morally what you’re doing; strictly speaking you select a state in Blend’s States panel, set properties, select another state, and so on, but you’re drafting a static image of how the control looks in each state. You needn’t be concerned with animation, although it’s interesting to note that the runtime that supports this mental model (that runtime is known as the Visual State Manager, or VSM for short) does generate a handoff animation for each state transition. For practical purposes, drawing states and setting transition durations like this gets the job done much of the time without needing to see Blend’s Timeline at all. But, if you need a steady state animation (say you want the blue focus rectangle to pulse all the time a control is focused), then yes you’ll need to open the Timeline and drop a couple of keyframes and set the animation to repeat indefinitely. Or if you want a shiny reflection to flash across a glass button during the transition from Normal to MouseOver, then again you’ll need to know what a Storyboard is.

    Of course you can leverage the Visual State Manager in your own UserControls too. This is because states can apply at the level of the individual control (e.g. in the MouseOver state a Brush is a different color) as well as at the level of a page or scene (e.g. in the ShoppingCartOpen state an otherwise hidden panel is visible). So, you can add states to one of your UserControls that represents a page or scene, set different properties in different states, then use GoToStateActions to drive state changes in response to events.

    The Visual State Manager is fully integrated into Blend Silverlight projects and SketchFlow Silverlight projects. You can also use VSM in WPF projects although, while the UserControl experience is the same as for Siverlight, not all WPF custom controls support VSM. I’ve written previously about the States panel and WPF controls.

    The last tool I’ll mention is the SketchFlow Animation, and this tool is available in SketchFlow projects only, both WPF and Silverlight. A SketchFlow Animation is logically a ‘storyboard’ in the true sense of the word: a sequence of frames that tells a story. When you’re building a prototype, you don’t want to implement a feature fully in order to demonstrate it. Playing back a scripted example of the interaction you have in mind gets the job done at the prototyping stage. So if you want to show off how you imagine your application will reorganize and animate in response to the user dragging a product into the shopping cart, you could create a new SketchFlow animation and then draw a few frames showing how the product gets dragged between containers and how the layout of those containers responds, and even specify the easing between frames.

    For those who like to know how things work under the hood, a SketchFlow Animation is represented internally as a VSM state group. But you don’t need to be familiar with VSM to use a SketchFlow Animation. Nor do you need to be aware of what a Storyboard is, nor be able to use Blend’s Timeline. In a sense, each frame (or state) in a SketchFlow Animation is a keyframe, but at a macro level so that each keyframe defines the entire scene at a point in time rather than the micro keyframes in a Storyboard that define a single property’s value at a point in time.

    Now that you have an idea of what these different pieces do, and when they’re available, you’ll be able to pick the most efficient tool for each animation job you want to do.


  • Expression Blend and Design

    Deep Zoom Sample with MouseWheel / Pan / Click-Zoom


    Hi everyone,
    One of the most frequent requests you all have made has been for samples that showcase taking the output from a Deep Zoom Composer project and integrating it with the MultiScaleImage control to have a cool example. We provided an example of that in the previous post. That example only included mouse wheel support but nothing else. In this post we not only incorporate mousewheel support for zooming but we also incorporate using the mouse to pan and clicking/Shift+clicking to zoom in or zoom out thanks to the nice work by Scott Hanselman.

    The following example includes everything you need plus a sample Deep Zoom image containing some Vista wallpapers I arranged and exported via the Deep Zoom Composer:

    slproject Download Sample

    The sample solution contains both a C# Silverlight project as well as a Web Site project:


    In your Web Site project, inside your ClientBin folder, you will see a folder called vistaWallpapers. The vistaWallpapers folder contains the images, xml, and bin files Deep Zoom Composer (DZC) output.

    To reuse this sample for your own projects, delete the vistaWallpapers folder and import your own folder containing the DZC output. Once you have done that, open Page.xaml in your Silverlight project and change the source of your MultiScaleImage control to point to your new folder and its info.bin file in your Web Site project:


    Once you have replaced your images and changed the path to the images in Page.xaml, build your project and view your DeepZoomOutput.html page in your browser. Things should just work...if they don't, please feel free to comment below and I'll take a look!

    Kirupa =)

  • Expression Blend and Design

    Link Round-Up: Behaviors-Related Posts


    In the past couple of weeks, there have been a great number of great blog posts on Behaviors, and since Behaviors are one of those things where writing them is not as straightforward as using them, I figure I will take this opportunity to point you all to blog posts I’ve found.

    If you’ve written about Behaviors and would like to be listed here, please comment below and I will look into adding you up as well.

    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer – February 2009 Preview Released


    Hi everyone,
    We have just released another update to Deep Zoom Composer, and you can download it from the following location:

    dzcicon Download Deep Zoom Composer

    The application itself contains only fixes to issues that you have reported (slightly better memory utilization, a fix for PNG transparency), but the DeepZoomTools.dll library has gone through some significant improvements. In a nutshell, if you had images that did not work properly in the earlier version of Deep Zoom Composer, you should find that most of those images should work now.

    I will blog about the improvements to the Deep Zoom Tools shortly.

    Kirupa & Janete

  • Expression Blend and Design

    Overview of New Features in Expression Blend 3 + SketchFlow: Part 1


    As you all have probably seen by now, we released the release candidate of Expression Blend 3 + SketchFlow to coincide with the release of Silverlight 3 today. The previous post was just a short one letting you know about the release and where to download everything from. In this post, let’s actually go over in a bit more detail on some of the new features.

    There are a lot of new features in Expression Blend 3, so this post will be split into two parts. If you want a more comprehensive overview of all new features now, please read our What’s New document.

    With SketchFlow, Expression Blend 3 introduces a new set of features designed to make it easier for you to experiment with dynamic user experiences and to create compelling prototypes. Christian Schormann has blogged extensively about this, so please read the following posts for more information: SketchFlow Concepts: An Overview, Sketching and Prototyping in Expression Blend. More…

    Design: Adobe PhotoShop and Adobe Illustrator Support
    You can use Expression Blend 3 to import both Adobe Photoshop (.psd) files and Adobe Illustrator (.ai) files directly into your projects, while retaining layers, shapes, text elements, and more for easy editing inside Expression Blend 3 itself. Janete Perez has more to share on her blog, sunnypixels: Introduction to Importing Photoshop Files, Photoshop Import- Supported Features, Photoshop Import – Merging Layers.

    Design: Revamped Assets panel
    The Asset Library has been redesigned and made into a dockable panel that can remain open while you work on the artboard:


    Assets are categorized for easier searching and organization. Beyond just the UI there have been some really nice under-the-hood changes, and Unni Ravindranathan summaries them in his post: The Blend 3 Asset Library.

    Styling Controls: Creating templates from artwork
    You can use the modified Make Into Control command to select artwork on the artboard and to convert it into a skin (control template) for a control.

    Styling Controls: Creating TextBox Templates from Artwork
    If you use the Make Into Control command and choose either a TextBox control or anything derived from a ContentControl control, Expression Blend 3 will copy typographic properties from any TextBlock object that it finds (in the objects that you are converting) into the appropriate part in the resulting control template.

    States: Improved Support for VSM
    Support for the Silverlight Visual State Manager (VSM) in Expression Blend 3 has been improved with a revised user interface for the States panel:


    The new design and general improvements made allow you to pin various states, draw into state, preview transitions, and more. The full What’s New document contains more details.

    Interactivity: Behaviors
    You can add interactivity to your application, without having to write code, by using behaviors. Behaviors are reusable components that can be directly applied to any object on the artboard, and they are composed of extensible triggers, extensible actions, and behaviors. There have been a lot of blogging on this from all of us, so you can read them all here: Blend 3 Behaviors: Interactivity Without Code, Behaviors : Making Interactivity Easy (and Fun!), Using Behaviors - A Quick Walkthrough, Blend 3: Triggers, Actions, and Behaviors, An Introduction to Behaviors, Triggers, and Actions, Blend 3 Behaviors: A Sample Action, Looking at Behaviors, the Class, Behaviors and Commands, Looking at Triggers and Actions, Behaviors: Writing your own Triggers, Behaviors Under the Hood – API Details and Constraining the Type, Pete’s Collection of Behaviors

    Working with and Generating Data
    Expression Blend 3 makes it easy to prototype, build, and test data-connected applications without having access to live data. Unni is back with an overview of this feature along with a link to other blog posts he liked: Introducing sample data support in Blend 3, Blend 3 Databinding.

    Phew. We are about half-way there with our overview of new features, so stay tuned for Part 2 shortly.


  • Expression Blend and Design

    What’s new in Deep Zoom Composer!


    Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the following location:

    dzcicon Download Deep Zoom Composer

    In case you are not familiar with this app, Deep Zoom Composer (DZC) allows you take images, arrange them on a design surface, and export them for use with the Deep Zoom technology found in Silverlight 2. You can see a really impressive demo at Hard Rock Cafe’s Memoribilia site where they use Deep Zoom to show you a lot of high-resolution imagery. You can create something similar using your own images with DZC.

    This update sports a lot of cool features besides just supporting the Silverlight 2 Beta 2 changes, so for the rest of this post, let’s take a look at these new features.

    XML Support
    One of the big changes we made was replacing the old BIN file formats with an XML-based file format instead (dzc_output.xml):


    EDIT: Picture updated on June 9th to refer to correct XML file.

    This means that your MultiScaleImage control will no longer work when you set its Source property to a BIN file. It has to be the new XML-based file, but don’t worry, Deep Zoom Composer takes care of those details for you. The project template we export provides all of the hooks necessary for you to have a working Silverlight 2 Beta 2 application without you doing anything extra.

    Thanks to Avi Dunn, Lutz Gerhard, Dan Cory, and Radoslav Nickolov of the Live Labs team for making these changes to both the encoder as well as the MultiScaleImage control.

    Image Importing Changes, Quality Settings, Transparent PNG Support
    In previous versions, when you imported an image, we flattened everything down to a JPEG whose quality was 95. While that seems like a pretty good tradeoff, it does not help when you are importing a transparent PNG or a lossless format where quality really matters. In this version, we respect whatever file format your input image is in. If it is a JPEG or PNG, we encode it as a JPEG or PNG on the design surface. If it is some other lossless format, we pick the appropriate lossless format for you.

    When exporting, you can now pick between JPEG or PNG, and if you picked JPEG, you have the ability to adjust the image quality:


    We are not providing support for image formats beyond PNG and JPEG because we are only supporting the image types Silverlight 2 currently supports.

    Undo and Redo
    You now have the ability to Undo and Redo any action you perform on the artboard:


    Use the Edit menu or the standard Ctrl + Z and Ctrl + Y key combinations for performing Undo and Redo respectively.

    Simplified Auto-Grid Arrangement
    To quickly help you arrange your images on the artboard, we introduced some cool snapping and guideline functionality in our previous version. Now, if you want to bypass manual arrangement altogether, you can arrange your images into a grid! Simply select multiple images, right click, and select Arrange into a Grid from the Arrange menu:


    This will allow you to constrain your arrangement by either rows or columns:


    All that said, the big takeaway is that you now have a very quick and easy way of arranging all of your images into a grid:


    While the above example only shows same-sized images being arranged, you can work with images of varying sizes as well.

    Support for Tagging
    When working with collections, having a way to filter your images would be useful. Many of you were modifying your SparseImageSceneGraph XML file by adding extra nodes to represent metadata. To help with this, we are now providing tagging functionality within the UI itself:


    Select an image or a group of images, and set the tags you want on them. When you export, we now output an XML file called Metadata that contains your image details, its zorder, as well as any tags you set on it:


    This file closely mimics your SparseImageSceneGraph, so you can use Silverlight 2’s support for LINQ to quickly parse the XML data and associate tags with the appropriate images. We will provide an example of how to do that in a future post.

    Final Remarks
    We hope you like these new changes, and if you have any cool features or ideas on what you would like to see in the next version of the app, let us know by commenting below.

    Celso, Christian, Janete, Kirupa

  • 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

Page 1 of 9 (217 items) 12345»