Expression Blend and Design

The team blog of the Expression Blend and Design products.

December, 2007

  • Expression Blend and Design

    Creating Falling Snow Using Code


    With WPF, you have several ways of creating animations. A common way is by using Storyboards/keyframes, and you can do that easily using Blend itself. If you are willing to take a trip through the dark side and use code to create your animations, you have the ability to create some really cool effects.

    Snow is the big thing during this part of the year in much of the world...except if you live in a place that is too warm to have snow in December. To those of you who can't experience real snow (like me who is spending the holidays here), I decided to create a small application that uses UserControls, some old-fashioned C# code, and a dash of CompositionTarget.Rendering to simulate falling snow on your computer:


    Click here to run the application, but if you are unable to run the ClickOnce application, download and extract the source code and use Blend 2 or Visual Studio 2008 to open and run this application instead. Let's look at some interesting bits and pieces of code that make up this application:

    When creating animations via code, you need some sort of a loop structure that updates what is displayed on your screen. The loop structure in our case is provided via the CompositionTarget.Rendering event which calls our MoveSnowFlakes event handler each time your scene is drawn/re-drawn:

    if (!IsInDesignMode())
        CompositionTarget.Rendering += 
    new EventHandler(MoveSnowflakes); }

    For more information on what the CompositionTarget.Rendering event does, refer to its MSDN documentation page.

    Creating the Oscillation
    If you observe the snowflakes as they fall, you'll see that they oscillate horizontally. The oscillation effect is provided by the Cosine function which takes a number as its argument:

    radians += .5*speed;
    cX = Canvas.GetLeft(this) + Math.Cos(.1*radians);

    The oscillations are possible because Cosine is considered to be a periodic function whose output always falls within -1 and 1.

    Setting the Positions
    We looked at how we create a loop to update what gets displayed and how the oscillation effect is created. The next thing to look at is how the actual positioning works:

    Canvas.SetLeft(this, cX);
    Canvas.SetTop(this, cY);
    if (cY > stageHeight)
        cY = -50;
        Canvas.SetTop(this, cY);

    Because I am interested in positioning each snowflake precisely, each snowflake is placed inside a Canvas layout control, and the exact position is set using the SetLeft and SetTop attached properties. With this approach, I gain the ability to position my snowflake with exact x/y coordinates, but I do lose the automatic layout functionality WPF provides.

    I hope this post helped you to see a new way of creating animations in WPF. Because WPF uses hardware acceleration and provides decent drawing support, feel free to experiment and create far cooler animations than what I have shown above or were able to create in the past with other technologies.

    Kirupa =)

  • Expression Blend and Design

    Mini Cube - Ready for Developers (Can you finish it?)


    I love 3D, so I'm always trying to incorporate it in my projects. And what better opportunity to work with 3D than a blog post! This week I want to share this Mini Cube project, which is a (2x2) simplified version of that famous game that gave me so many headaches in the past. This is a perfect candidate for a 3D sample, since you have to visualize the cube in three dimensions in order to play it properly.

    This project is not finished yet, I've prepared the 3D objects and some interaction, but the cube doesn't "work", which means you can't rotate the blocks. But that's the point of this post... invite you to finish it ;-) So, let me give you an idea of what I have done so far and see if someone wants to take it to the next level:

    Download the project here (Maya and Blend projects included).


    Creating the 3D Objects

    The workflow I used was Maya 6.0 > Export to Obj > Import Obj in Blend. In Maya I was able to create the geometry, separate materials, and adjust the pivot points for each block. For the geometry, I also created a few extra objects that will receive mouse events in Blend. If you click on one corner, you will notice that a Message Box shows the name of that corner (red1, red2, etc...) Please, see the following image to see where they are located. You can find the original Maya project in the project ZIP file (/miniCube/Maya_files).


    Importing the Obj File in Blend

    To import a Obj file you just need to drag the files to your WPF Project in Blend. Just remember that you have to drag the .obj and the .mtl files. The latter contains all the materials that you defined in Maya. Double click the file cube.obj to insert into the Artboard. Then use Camera Orbit to rotate the 3D space.


    What else is Ready in Blend?

    Ok, that's the general idea. Now if you open the Blend project you will see that I've prepared a few more steps:

    • I've created new groups in Blend for the blocks (b1, b2, b3, etc...)
    • The project has several Storyboards for each block. Those Storyboards are rotating each block in X, Y and Z, in both directions.
    • The code behind (Window1.xaml.cs) has basic interaction to rotate the cube.
    • If you click on a corner, you can see a Message Box that shows you which corner got the event (look for the method OnMouseUp in Window.xaml.cs).

    What's Next?

    Well, since you have the Holidays, you can use that time off to finish this project! The next steps are not easy, but interesting. You can use the Storyboards that are already there, or you can rotate the blocks using just code. The idea now is to make the cube work, so you can come back from the Holidays and spend your time playing the game at work! Just kidding...

    I will publish the final project in January, but I would be glad to publish any solution that you might send us!


    Enjoy, and Happy Holidays!

  • Expression Blend and Design

    Silverlight 2.0, Sprawl, and a Dash of Snoop!


    Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expected including layout, databinding, controls and templating. On the Blend team we’re extremely excited about the features arriving in Silverlight 2.0 and are very busy building some excellent tooling for it. We don’t have too much information right now, but rest assured that we’re working on it.

    Following from Danc’s earlier post about creating game graphics in Expression Design, a fun Silverlight game that we did together is Sprawl, you’ll see a very similar visual style there:


    The game is all Silverlight 1.0 and took about a day of development time to make once the graphics were done. I hadn’t realized Danc was going to post his Planet Cute drawings, otherwise I would have polished up a sample Silverlight app built off of it :)

    One thing that many people have been pestering me about (and rightly so!) is an update to the Snoop application used for debugging WPF applications. I just wanted to assure folks that I am working on updating it and hopefully will have a quality update in not too long.

    Happy Blending!


  • Expression Blend and Design

    What a Release PM Does


    In my previous post, I introduced myself as a Release PM for the Expression Studio suite of products. Some of you may be wondering what a Release PM does. Before I get into that, to give you some background about me, I’ve been at Microsoft for over 13 years. I first started as a tester, then spent 8 years as a developer on Publisher and Movie Maker, and then spent 5 years as a Program Manager (PM). As a PM, I had the responsibility for designing the features that developers would then code. A large part of that involved managing the schedule and progress towards releasing the finished product. Towards the end of that role, I started doing release management, which is focused on integrating the various parts of products together (Windows Vista, in my case) and driving the team towards completion. This also involves completing all of the legal and corporate-mandated requirements necessary to ship a product to you!

    That is my job here in Expression land – working with the various teams to get all of our software releases out the door in a timely manner and communicating with the various teams: product development, test, program management, marketing, operations, website management, localization, international subsidiaries, etc. It’s a great job that permits me to work with lots of different people while drawing on my experience with actually shipping products for many years. More importantly, I also get to to learn new aspects of the business that I haven’t been exposed to before.

    Blend 2 December Preview
    So our most recent release was the Blend 2 December Preview. After the product team completed their work on the setup package (known as an MSI), they hand it off to me to get it released. That means coordinating with the editors to get the Microsoft Download Center website text written, getting the package through a gauntlet of automated tools for verifying the package is safe to release (virus checkers, etc.) and getting the Expression website content up to date.

    To give a more specific example in the context of the newly released Blend 2 December Preview, part of release management involves coordinating the web site content so that you all can actually download our latest preview. The coordination matters because the download center uses different servers than the Expression website. If we want them to go live at the same time we have to pull all of the levers together. Even then, propagation across the servers around the world takes time, and sometimes things can get a little out of sync. Knowing how to deal with some of these delays helps ensure everything related to the release goes smoothly.

    If you like doing different things every day, fighting fires, working with people, helping to shape processes and policy, Release Program Management may be the job for you! Hopefully this post gives you a brief idea of what a Release PM does, and feel free to comment below if you have any further questions.

    - Bret

  • Expression Blend and Design

    Expression Blend Service Pack 1 Update


    Hi, I’m Bret Ahlstrom, the new release program manager for the Expression Studio suite of products. I’ve only been in this job a few short weeks, and the first thing I get to report on is a problem with the Expression Blend Service Pack 1 that was released last month!

    It turns out that some people can’t get the patch to install on their systems. This is due to an incompatibility between the SP1 patch and some versions of Blend (Japanese, Korean and German for starters.)

    We think we have identified the problem and are building a new SP1 patch to address it, and this updated path should be ready to go in a few days. To clarify, only people who have had problems installing SP1 should need this patch. If you have already successfully installed SP1, then you won’t need to download and install it again.

    Thanks and stay tuned.

    - Bret

Page 1 of 1 (5 items)