Expression Blend and Design

The team blog of the Expression Blend and Design products.

November, 2007

  • Expression Blend and Design

    Game Graphics Created in Expression Design


    Today I wanted to share some game prototyping graphics created in Expression Design.   These are useful for would-be game developers who happen to be missing a set of quality graphics and/or people who want sample files that can help them understand basic vector drawing techniques.

    For example, the following is something I created using Design:

    You can download the files used for the above image here: (540k)

    Tips and Tricks Used to Create These Files

    Expression Design was built to be familiar to folks that already know how to use a vector drawing tool.  However, there are a couple of unique tricks that I use every day that make my life much easier.

    Always Work in Pixels
    I always set up my document units to be pixels (at 96 PPI to be exact!).  This dramatically reduces any confusion exporting to XAML. If you want more information on why that is done, read Joanna's blog post.

    Set your Grid to 10-pixels and Nudge Increment to 1-pixel
    All the tiles are built on a grid that is 10 px by 10 px.  When you set your nudge increment to 1 pixel a nice trick becomes possible.  If you hold down Shift while pressing an arrow key, the object will move 10X the nudge increment.  In this case, that happens to be 10 px, the exact size of the our grid.  Now, instead of manually dragging elements with grid snapping on, I can use Shift + my arrow keys to move elements around and I’ll be guaranteed that they’ll be aligned with my grid.  This is quite useful when making tile graphics for games.

    You can change your grid size and nudge increment with the following steps:

    1. Go to the Edit menu.
    2. Select Options, and from the menu that appears, select Units and Grids. 
    3. Set Document units to ‘Pixels’
    4. Type in '10 px' for Grid size
    5. Type in ‘1 px’ for Nudge increment
    6. Click OK to accept these changes.

    Shading with Gradients that use Transparent Stops
    Most of the 3D shading results are done using gradients that have transparent stops.  This simple feature, accessible through the Stop Alpha property on every gradient stop, dramatically increases the usefulness of the old reliable gradient.  Here’s an example of how I use gradients with transparent stops to create the tile based shadowing system used by the rest of the tiles.

    Download Large (more readable!) Version

    Can you make a game?

    This set of graphics is pretty flexible.  Be creative. Can you make a platform game?  Can you make a role playing game?  Or a puzzle game? The possibilities are endless.  If you find that the set doesn’t include the exact tiles you need for your rocking game design, it is easy enough to open up the .design file in Expression Design, change some colors, or add some shapes. Voila! New tiles and new characters.

    I just added the treasure chest graphic and I'm waiting for someone to bust out the first Silverlight Pirate game. Yarr.

    To see what other folks have done with these tiles, stop by my website.

    Best wishes,

  • Expression Blend and Design

    Expression Blend Service Pack 1 Released


    Yesterday, we released the Expression Blend Service Pack 1, and you can download it from the following location. One of the major goals of this service pack was to make sure that Visual Studio 2008 was better supported, but we made other minor fixes and changes also.

    You can see a comprehensive list of the changes in the following document, and there is more coverage of this release on Soma's blog.

    Expression Blend Team

  • 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

    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.


Page 1 of 1 (4 items)