Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Editing in Visual Studio 2008 Instead of Visual Studio 2005


    In Expression Blend 2, when you choose to edit a code file or insert an event handler for an event, by default, Visual Studio will be launched. If you have multiple versions of Visual Studio (VS) installed, though, you may find that a different version of VS than the one you intended to open will get launched. The most common case is where you have both VS 2005 and VS 2008 installed, but VS 2005 gets launched by Blend instead of VS 2008.

    The fix for this involves editing your registry. From the Run prompt (WinKey + R), type regedit and press enter:


    With your Registry Editor now running, navigate to HKEY_CLASSES_ROOT\VisualStudio.DTE.9.0\CLSID. Copy the Value Data from this key:


    With that value copied, go to HKEY_CLASSES_ROOT\VisualStudio.DTE\CLSID, and overwrite its existing value with the data you just copied a few seconds.

    This change should let Expression Blend know to launch Visual Studio 2008 instead of Visual Studio 2005.

    Jeetendra “Jeetu” Kukreja

  • Expression Blend and Design

    Holiday Savings – Add Expression Blend 2 to Your Design Tool Set


    Hi everyone. The following post is written by Renee Yong, Marketing Manager for Expression. I hope you find the content interesting!
    -- Kirupa


    For a limited time, customers in the United States can shop the Microsoft Online Store for Microsoft Expression Blend,  Expression Studio and Expression Web and get 50% off.

    Chances are good that you qualify for the Upgrade pricing if you have any existing web design or creative software, or Microsoft Office software, including any ONE of the following:

    • A licensed copy of an earlier version of Expression Web
    • Adobe Creative Suite (any version)
    • Adobe/Macromedia Flash or Director (any version)
    • Adobe/Macromedia Dreamweaver (any version)
    • Adobe GoLive (any version)
    • Microsoft Office (any version)
    • Microsoft FrontPage (any version)
    • Quark QuarkXPress (any version)

    [Note: Pricing and specials are set on a locale-by-locale basis.  This deal applies only to US customers of the Microsoft Online Store and is valid only for a limited time.]

  • Expression Blend and Design

    2.5D UserControl for Silverlight 2


    2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided an implementation that has no lighting, materials, lines or polygons. But it does enable you to locate 2D (that is, flat) objects at x,y,z coordinates and place the camera where you want it. The implementation then projects the objects onto the camera, scaling and translating them appropriately, and handles mouse input to move the camera.

    You can see a small example demonstrating this below:

    Get Microsoft Silverlight

    Holding the left mouse button and moving the mouse rotates the camera; holding down Ctrl zooms; holding down Shift adjusts the field of view.

    Often, rotation causes an object to come in front of another, in terms of their distance from the camera. So each time it draws the scene, the implementation calculates the distance of each object from the camera and then sorts and draws them from back to front. It also culls (that is, removes from the scene) any object behind the camera. Other frills this implementation has are a kind of depth-of-field effect and a fog effect. The depth-of-field effect can be seen whenever an object gets very close to the camera: in this case its opacity falls off exponentially. The fog effect causes the saturation of distant objects to reduce, and their brightness to increase, so that they appear to be melting into fog or haze.

    Anyway, you can download the source for the above project from the following location:

    folderfiles Download 2.5D User Control Source

    You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how

    TwoAndAHalfDUC (the first class in the file TwoAndAHalfDUC.cs) is a UserControl base class from which you can derive your own classes. In that same file you will find the CubeUC class that derives from TwoAndAHalfDUC to provide an example of what to do. All you need to do is provide an override of the InitializeSprites method that creates and initializes a number of TwoAndAHalfDSprite objects.

    The base class always draws the sprites as colored circles (and of course it does this from any viewing angle so the objects behave as spheres would) but you can amend that behavior so that other 2D objects are used. I tried TextBlocks (and scaled them via their RenderTransform) and the result was very interesting.



  • Expression Blend and Design

    Localization and What Goes on Behind the Scenes


    Many of you may not know that Expression Blend (and the entire Expression Studio) is available in eight languages other than English. In fact, we just released them earlier today! Here is a small screenshot of Expression Blend running Japanese:


    My name is Marco, and I help to create the versions of these products that ship in Japanese, German, Korean, French, Italian, Spanish, and Chinese (simplified and traditional).  Creating the international versions of our products is a challenging process that requires several steps, so let’s take a brief look through them in this post.

    In order to create our international versions, we first need to be sure our products are globalized so that they can be adapted to different markets around the world where we sell our products.  Once our products are globalized properly, we test them via a pseudo localization process.  In this process, we introduce different kinds of characters into our UI strings to ensure that our application behaves as we expect it to regardless of which character set is used.

    To see why, let’s look at the strings in the English version of the Expression Blend options dialog:


    Notice the size of the various text fields and how much space each piece of text takes. Now, let’s look at the corresponding Japanese version:


    Notice that in the Japanese version, the amount of space your text takes up varies a bit from the English version. This is important, because, as a designer/developer of an app that needs to be localized, you need to ensure that any control that stores localizable strings will still look OK when the strings inside them are of various sizes as you see above. This is where pseudo localization comes in handy. While we may not have the exact translated strings to use, we have a good idea of whether the user interface can handle the text of various sizes when the pseudo localization process throws random text of various sizes.

    Once we are convinced that our code is fully localizable, I work with our developers to isolate all of the visible user interface strings within the application.  This includes all of the menus, dialogs, error messages, etc.  If a string can be seen in the UI, then I need to be able to access it.  I then work with software localization specialists to translate the UI strings.

    After the strings get translated, we create the localized versions of our applications.  These applications are then tested for both linguistic accuracy as well as functional quality.

    As you know, we are always looking for feedback on our products, and this includes our international versions.  Feel free to leave a comment here if you have used any of the localized versions of Expression, or if there is something more you would like to see from our international versions.

    Alternately, feel free to contact me directly at marcoda[at]


    Marco D’Amico

  • Expression Blend and Design

    A/C Controls - Skinning the RotaryControl


    Download the RotaryControl source code

    Download the ACControls source code

    As promised, in this post I’ll show how to customize the template of the RotaryControl. I wanted to model automobile A/C controls and the result is shown below.


    If you want to open and examine the project files as I describe the steps, download the source code and unzip it so that the RotaryControl and ACControls folders are siblings. Then open the ACControls solution in Blend 2 September Preview.

    For the button design work I went to see Sam Paye, one of our designers, and he used Expression Design to create the visuals. Knowing that the control template requires three specially-named parts, Sam separated out the graphics into three top-level layers, or groups, each named after a template part. We then exported the graphics as three XAML files and opened those directly in Blend. After drawing out three instances of RotaryControl on the artboard and then making a copy of the template for each, it was very easy to copy all three layers from each XAML file and paste them directly into a Grid at the root of the corresponding template. Because the layer names matched the part names, and the Expression Design graphics were the same size (in pixels) as the Grid at the root of the templates, everything worked like a charm. The control code automatically turned off mouse hit testing on the topmost 'shine' layer and allowed the middle 'dial' layer to rotate in response to mouse gestures.

    When you select a RotaryControl, a number of custom properties are listed in the Miscellaneous category of the property inspector. None of the controls are meant to spin freely through 360 degrees: all are constrained, so for each I set RotationIsConstrained to true and CounterClockwiseMostAngle and ClockwiseMostAngle to suitable values. For the leftmost control, the mode control, I set SnapToSnapAngle to true and SnapAngle to 40. For the other two controls I set SnapToSnapAngle to false so that they roll smoothly. When SnapToSnapAngle is false, both SnapAngle and RotationIsAnimated are ignored.

    The mode control has five positions, and therefore five values, so I used Blend’s collection editor in the property inspector to enter five strings in the SnapValues property – one to describe each position in clockwise order. I then bound a TextBlock’s Text property to the mode control’s SnapValue property so that the current position is always translated into some meaningful string value beneath the mode control.

    I hope you find the RotaryControl, and the example templates given here, of use.

    Steve White

  • Expression Blend and Design

    Using Brush Strokes to Create a Design


    Design has an extensive library of  brushes that can be used to create artwork. In the spirit of upcoming elections, I created this stars & stripes piece:


    Download Design File (33k)

    All of the elements you see can be found in Design’s default brush strokes:


    To create similar brush effects, simply draw strokes and increase the width until you get the desired effect. Then to manipulate further, select Object/Convert Stroke to Path. For example, I didn’t want as many large stars as the brush gave me so after converting to path I just deleted the extras. This works great for adding abstract elements to a background or creating wallpapers.

    Hope you like it, and if you have any questions, feel free to leave a comment below!

    - Kim

  • Expression Blend and Design

    End to End Hands on Lab – Blend 2.5 and Silverlight 2!


    Our colleagues in Microsoft Switzerland have published a comprehensive hands-on-lab that explains in detail everything you need to get started with creating Silverlight 2 applications using Blend 2.5.

    You can learn more and download the project files from here: Silverlight 2 Beta 1 Hands-on-Lab

    They cover a lot of great topics including templating, isolated storage, and more. Beyond just talking about it, they provide actual projects for you to play with. They even have a Deep Zoom collections demo:


    If you are looking to make the jump into Silverlight 2, then this lab is a good place to start!

    Kirupa :)

  • Expression Blend and Design

    Expression Blend 3 Survey- Win a free zune HD!!!



    The Expression Blend team is currently planning features for future versions of Expression Blend. We encourage everyone to take our Blend 3 Survey and send us your feedback. All eligible participants will be able to enter a drawing to win a FREE Zune HD!

    image As the winner you will be able to customize your own 32GB Zune HD (color and pattern).

    The deadline for submitting a survey response is October 5th, 2009 @ 11:59pm. The winner will be announced on October 9th, 2009.

    The survey contains various areas, feel free to respond to the areas you feel most relevant to your experience with Blend. We look forward to receiving your feedback and suggestions.

    Expression Blend Team

  • Expression Blend and Design

    Check out Rooler – A free Screen Measurement Utility!


    Fellow Blender, Pete Blois, has written a small application called Rooler that allows you to make measurements of everything visible on your screen. You can download it by clicking here.

    Rooler helps solve a common problem you have when designing UIs. That common problem is figuring out how large something is or how much space exists between elements. To help with this, you have this nifty tool called Rooler which, to think about it differently, is like having a virtual ruler that you can use to measure things on your screen.

    Rooler is a small application that soars above all of your windows and provides you with some common screen measurement tools:


    For example, let’s say that I need to create a graphic whose width is the exact size as some text I have:


    The above text is actually an image. Right clicking on the image and seeing its properties will give me the width of the image, but it may not translate to the actual width of the content stored inside it. Finding the size of the actual content is where a tool like Rooler comes in handy.

    You can click on the Bounds icon to draw an overlay rectangle over the area you want to measure:


    Once you have drawn the boundary, release the mouse cursor and Rooler will automatically create the smallest box that bounds all of your data:


    Best of all, you all get the width and height of this bounding box as well, and you were able to do this without using another image editing tool and performing various (albeit simple) steps needed to get a similar value as what you see above.

    I just showed you one example of what can be done, but you can do a bit more as well. Go check out Pete’s Rooler page for more examples and information on other things this tool does.

    Kirupa :)

  • 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

  • Expression Blend and Design

    Deep Zoom Developer Resources


    Since we released Deep Zoom Composer a while ago at MIX, we relied extensively on all of you to both create cool things using it as well as suggest new features for subsequent releases. Another major area that many of you have helped us with is documenting some of the cool things that you all have done with Deep Zoom.

    In this post, I’ll try to point out some of the cool documentation to help you out in your deep zoom quest:

    • Working with Collections & Deep Zoom Primer
      Jaime Rodriguez provides two great overviews on how Deep Zoom works and how you can manipulate the collections in greater detail.
    • A Deep Zoom Blog
      Lutz Gerhard is one of the people responsible for Deep Zoom in Silverlight, and his blog provides valuable tips and tricks to the common asks people have made.
    • Project Silverlight
      Wilfred Pinto has a lot of great examples dissecting various requests such as hit-testing on images, etc.
    • Filtering by Tag
      Here is an example I wrote showing how you can use the Metadata.xml file generated by Deep Zoom Composer to filter.
    • Deep Zoom Tag Cloud
      Craig Dunn extends my filtering example by generating a tag cloud based on the items – really cool!
    • Deep Zoom : Selecting an Image
      Matthew Serbinski shows you how to bring a Deep Zoom image into focus when a thumbnail of that image has been selected.

    If you have something really cool about Deep Zoom that you’ve written that I did not mention here, please send me an e-mail kirupac[at], and I will look into adding it.

    Kirupa :)

  • Expression Blend and Design

    Silverlight 2 RC Compatible Deep Zoom Project Templates


    Because the Silverlight 2 RC that was released is aimed primarily at developers wishing to update their projects to the final version of Silverlight 2 due out sometime this year, we didn’t provide an update to Deep Zoom Composer because most everyone who views Deep Zoom content will still be on Silverlight 2 Beta 2.

    Instead, we have provided you with the updated project templates that are compatible with Silverlight 2 RC:

    folderfiles Download Updated Deep Zoom Composer Project Templates

    Once you have downloaded the above ZIP file, extract its contents to your [Program Files]\Microsoft Corporation\Deep Zoom Composer\ folder. Your ZIP file contains an updated version of the DeepZoomProject folder, so your old files will be overwritten with your new ones.

    Anyway, once you have overwritten your old files, if you run Deep Zoom Composer and preview your output via the Export view’s Silverlight tab, you should be able to see and interact with your Deep Zoom images.

    Comment below if you are running into any issues or things just aren’t working.


  • Expression Blend and Design

    Simulating Sample Data in Blend 2 SP1


    Using sample data can make designing your Silverlight 2 applications more predictable. Given some data, you have a lot of flexibility in designing around this data in Expression Blend. The challenge is that there are are many cases where you simply won’t be able to see your data on the design surface. Think of an example where some data is displayed only after you query a web service. One way around this would be to hard-code the data to display. The problem is that this leaves you with extra work in the end to make sure you switch out your hard-coded data with real data.

    In this post, I will show you some code for a workaround where you can have sample data on the design surface while still retaining your ability to have live data when you are testing your actual app in the browser:

    public class Member
          public string FullName { get; set; }
          public double Delta { get; set; }
          public int Status { get; set; }
    public class MyData
          public ObservableCollection Members { get; private set; }
          public MyData()
                this.Members = new ObservableCollection();
                bool designTime = (System.Windows.Browser.HtmlPage.IsEnabled == false);
                if (designTime)
                      // TODO: runtime
          private void LoadDesignTimeData()
                this.Members.Add(new Member() { FullName = "Bunda3", 
    Delta = -2.39,
    Status = 0 }); this.Members.Add(new Member() { FullName = "SneakerHead",
    Delta = 14.92,
    Status = 1 }); this.Members.Add(new Member() { FullName = "NobodyMan",
    Delta = -4.62,
    Status = 3 }); } }

    The corresponding XAML will look like the following:

          <DesignTimeData:MyData x:Key="MyDataDS" d:IsDataSource="True"/>
                <DataTemplate x:Key="MembersTemplate">
                      <TextBlock Text="{Binding Path=Delta}"/>
                      <TextBlock Text="{Binding Path=FullName}"/>
                      <TextBlock Text="{Binding Path=Status}"/>
    <Grid Background="White">
          <ListBox ItemTemplate="{StaticResource MembersTemplate}" 
          ItemsSource="{Binding Mode=OneWay, 
                        Source={StaticResource MyDataDS}}"/>

    The code I have pasted above should be pretty self-explanatory. What I am doing is checking to see if I am currently editing this XAML file in Expression Blend. For Silverlight, you can do that by checking your HtmlPage.IsEnabled boolean property.

    If I am currently in Expression Blend, I pull in data from my sample data class, MyData. This allows me to edit my data template and style my data easily. When I preview this application in the browser, because HtmlPage.IsEnabled will be set to true, you will not see the sample data. Instead, you would see real data!

    - Evgeny

  • 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 Design Service Pack 1 is now available!


    This service pack addresses critical issues and expands the XAML export feature to better support the 1.0 release of Silverlight. You can download and install the service pack from the Expression Design web site or the Download Center.

    What's new in the Service Pack?

    Highlights of XAML Export improvements and fixes

    • The XAML Export UI has been updated to make it easier and more intuitive to select the desired export settings.
    • Text can now be exported as TextBlocks for Silverlight applications.
    • In the release version of Expression Design, all objects were given default names. Naming objects is now optional. When the "Always name objects on export" option is not selected, only objects you have explicitly named in Expression Design are given a name on export.
    • Gradient midpoints are now exported.
    • Since the release of Expression Design, the direction of the slashes in filenames for Silverlight applications has changed. Expression Design now writes out forward slashes in filenames and paths for Silverlight and WPF XAML. 

    Highlights of other issues fixed

    • Anti-aliasing can now be applied on export to large images.
    • The quality of image export has been improved.

    To see a full list of the contents of the service pack and issues fixed see the Knowledge Base article.



    The Expression Design team

  • 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

    Using Design-Time Attributes to Categorize Dependency Properties in User Controls


    In most cases, when you create user or custom controls, you will expose dependency properties to allow you to set values or make modifications to your control directly via XAML. Because XAML is the language of Blend, Blend will expose those dependency properties in the property grid itself. For example, let's say you have a user control that displays information in a colored box:


    This user control has two dependency properties. The first property is called QuickInfo that displays some text such as "Hello World!", and it returns a value of type String. The second property is called BackgroundColor, and as its name implies, sets the background color of our user control. As you may guess, the BackgroundColor property returns a value of type Brush.

    Default Behavior
    In Blend, if you select a user control on the design surface, by default, any dependency properties you expose are displayed in the property grid. Blend looks at the return type of each dependency property and categorizes it in the appropriate location accordingly.

    For example, our BackgroundColor dependency property will find its way into the Brushes panel because it returns a value of type Brush:


    Our QuickInfo dependency property isn't quite as lucky. Because QuickInfo simply returns a string, Blend doesn't know exactly where to place it. Any dependency properties you create that can't be easily categorized are placed in the Miscellaneous panel:


    For just two dependency properties, the default behavior may be fine. If your user control has a lot of dependency properties or someone other than yourself will be using this user control, then you should look into categorizing them.

    Using Design-Time Attributes
    To help design tools such as Blend and Visual Studio, the .NET Framework allows you to use design-time attributes. The following MSDN article ( goes into greater detail, but in a nutshell, you can specify the category and a description for your dependency property. Blend will take care of the rest.

    The general format for a design-time attribute is [Category("Value"), Description("Value")]

    In your  user control's code-behind file, in Visual Studio, find the locations where you declare the CRL wrappers for your dependency properties. Above the declaration, add your design-time attribute. For example, the following is what I declared above my BackgroundColor wrapper:


    I do something similar for my QuickInfo dependency property also. Once you have provided the category/description for each dependency property you are interested in, go back to Blend, rebuild your project, and select the user control whose code you modified in Visual Studio. Look in your property grid. At the very bottom, you will see your custom categories and properties that fall under them.

    In my case, I categorized both of my dependency properties into InfoBubble:


    If you hover over each dependency property's name, the description value you provided will display:


    As you can see, by using design-time attributes, you have some flexibility over how Blend will behave when faced with a dependency property that it doesn't know how to categorize. Beyond design-time attributes, there are many other classes of attributes that various developments tools such as Blend and Visual Studio listen for, so be sure to look into them and see if they can help you out.

    Kirupa =)

  • Expression Blend and Design

    Trick or Treat : Resolution = 96 PPI


    Have you ever imported an image or Illustrator file into Expression Design or Expression Blend then noticed that it seems either bigger or smaller than your original image? In this post I will explain why this occurs as well as point out a few tips you can use to get your images and other assets imported into Design and Blend at the pixel size you expect.

    Expression Blend assumes a resolution of 96 pixels per inch (PPI). WPF, Expression Blend and Silverlight all assume one pixel is approximately 1/96th of an inch and therefore use a resolution of 96 PPI. You might be asking yourself why 96 PPI? I've been using 72 PPI for all of my web work. The short answer is that Microsoft has standardized to using 96 PPI. There are many web sites that describe why this decision was made and why the standard for Apple is 72 PPI. I encourage the reader who would like to learn more about this choice to search on 96 PPI in your favorite search engine.

    If you work with assets that were saved specifying a resolution other than 96 PPI, Design and Blend will scale the asset to be the same physical size at 96 PPI. For example, an image that is 72 PPI and has a width of 6.667 inches and height of 8.889 inches has a width in pixels of 480 and height of 640. If I wanted to display that same image at a resolution of 96 PPI, it would need to have a width and height in pixels of 640 and 853 respectively. Therefore, if you import a 480 X 640 image into Design or Blend that was originally created at 72 PPI, its actual size after import will be 640 X 853.

    The best way to ensure your assets come in at the same pixel size in Design or Blend as they are in your other content generation tools is to use 96 PPI throughout your workflow.

    When using Expression Design be sure to select 96 PPI in the File > New dialog.


    In addition, you should set your zoom level to Actual Pixels in order to see your content at full size. For 96 PPI this is 133%.


    In Photoshop, you can change the stored resolution of an image in the Image Size dialog to 96 PPI. Be sure to uncheck Resample Image.


    Unfortunately, Illustrator files are 72 PPI and currently always scale when imported into Design when the document resolution is 96 PPI. In this case, you can get the object back to the desired pixel size by selecting Scale As Percentage from the Transform options popup menu in the Action Bar. Make sure width and height are linked and change either the width or height to 75% (72 / 96 = .75).



    Hopefully these tips will help keep the import goblins at bay!

    Joanna Mason

  • Expression Blend and Design

    Living Without App.xaml (…and still being able to use Blend!)


    While default WPF (and Silverlight) projects make it very easy for you to get up and running with your application for a majority of scenarios, often, there are scenarios where you want better control of your application. A good example of this scenario is the Expression Blend source code itself. We perform a number of tasks (for example, displaying a splash screen) before the main application Window is shown to you.  For making this happen, we don’t use the App.xaml concept in WPF projects, but instead go with a code generated Application object which gives us better control over how things work. We then load a number of external resource dictionaries that control the look and feel of our application into the Application’s resources.

    However, the lack of App.xaml causes issues when you design your application inside Blend. Blend provides a lot of design-time experiences around App.xaml – for example, all resources in App.xaml are always available in all the projects that are referenced from the main project. This is essentially a feature that lets you easily centralize your shared resources across control libraries into one location. Another example is that we allow you to link your external resource dictionaries into App.xaml, again, to make sharing of resources easier for you.

    If you ever run into this, you can use another feature in Blend to work around this issue. You can include your App.xaml into the project file on a conditional basis such that when the project is loaded inside Blend, you get the normal experience that you are comfortable with. While building your application, though, App.xaml is not included in the build process, so your code continues to work as before (for example, WPF automatically creates an entry point for your application when you build App.xaml, but you might already have an entry point defined in code).

    The below sample will show how you can leverage this by just making a couple of lines of edit to your project files. Essentially, the changes to the project boil down the following two lines:

    <DesignTime Condition="'$(SolutionPath)'!='' AND Exists('$(SolutionPath)')">true</DesignTime>

    <ApplicationDefinition Condition="'$(DesignTime)'=='true' AND '$(BuildingInsideVisualStudio)'!='true' AND '$(BuildingInsideExpressionBlend)'!='true'" Include="App.xaml">

    Download the project files from below:

    slproject Download Sample

    Hope this helps. If you have any questions, feel free to comment here or on our forums.



  • Expression Blend and Design

    Expression Blend 2 and Expression Design 2 Released!


    In case you missed our announcements and 3rd party coverage, we shipped Expression Studio 2 yesterday! You can download trial versions of all our applications by visiting our Downloads Page!

    This post will focus more on Expression Blend and Design, and since Expression Blend ships in its own box as well, check out our cool box design:


    Our version 2 release comes around just a year after we shipped version 1, and there have been a slew of new features that we’ve added. Many of you have already played with them through the various previews we’ve released over the past year, but just for fun, I’ve tried to list the ones, in no particular order, that come to my mind:

    Support for Visual Studio 2008 and WPF 3.5

    Silverlight 1.0 Support with built-in JS Editor

    UI Refinements (More incremental search, ability to close panels, etc.)

    Storyboard Picker for Managing your Animations

    Vertex and Clipping Path Animations

    KeySpline Editor for Editing Ease In/Out

    SplitView for Seeing your Design as well as the XAML

    Importing from Expression Design

    Font Subsetting

    Design-time Sizing

    Easier Ways to Incorporate Media

    New WPF and Silverlight Samples

    Support for more Object Manipulations (Being able to uniformly scale, resize, and rotate multiple selected elements.)

    Breadcrumb Bar

    Making and Editing User Controls from the Design Surface

    Being able to export Slices in Expression Design

    I’m sure there are some that I’ve missed, so be sure to check out the higher-level feature overviews of Expression Blend 2 and Expression Design 2 from our newly re-designed Expression Studio product site.

    What are some of your favorite features? What are some of the features you would like to learn more about?

    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer Forum + Filtering Code/Example


    Hi everyone,
    For the past month, all of the feedback and questions about the Deep Zoom Composer (DZC) were posted here on the blog. To make it easier on everyone, we found a better place for you all to post questions, send us feedback, etc. That location is the Deep Zoom Composer forum. If there any questions that you had asked us earlier that we didn’t notice, please re-post that in our forum.

    This is something that many of you have asked us about. We’ve been busy working on the next preview version of Deep Zoom Composer, so we haven’t been able to post an example for you all to use. Thankfully, Wilfred Pinto has done some really nice work with the Deep Zoom technology, and you can see all of his examples (including filtering, clicking on a subimage, etc.) here:

    This blog will probably go a bit quiet on Deep Zoom material until we have our next release (soon!), but expect interesting topics on Expression Blend, Expression Design, and other things you all mentioned in the previous post instead.

    Kirupa :)

  • Expression Blend and Design

    Deep Zoom Composer Updated to Fix an Export Related Bug


    Hi everyone,
    We have released an update to last week’s Deep Zoom Composer release to address a fairly serious bug related to the image paths we generate during export. You can download the latest version from the following location:

    dzcicon Download Deep Zoom Composer

    As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

    The export related bug we fixed has to do with image tiles not loading when you export using our custom templates. If you exported using the Default template, everything worked great. To summarize the problem and the solution, if you looked at dzc_output.xml, in our earlier release, we produced URLs to images that looked as follows:

      <I Id="0" N="0" Source="/dzc_output_images/chrysanthemum.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-0" Y="-0" />
      <I Id="1" N="1" Source="/dzc_output_images/desert.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-1" Y="-0.75" />
      <I Id="2" N="2" Source="/dzc_output_images/tulips.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="5.1975051975051949" X="-1.5987525987525975" Y="-1.9490644490644482" />

    The change we made is to remove the leading slash that appears in front of the XML file. The output now looks as follows:

      <I Id="0" N="0" Source="dzc_output_images/chrysanthemum.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-0" Y="-0" />
      <I Id="1" N="1" Source="dzc_output_images/desert.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="2" X="-1" Y="-0.75" />
      <I Id="2" N="2" Source="dzc_output_images/tulips.xml">
        <Size Width="1024" Height="768" />
        <Viewport Width="5.1975051975051949" X="-1.5987525987525975" Y="-1.9490644490644482" />

    If you already have existing projects that you don’t feel like re-exporting using our new version of Deep Zoom Composer, then feel free to manually remove the leading slash from the image Source value in dzc_output.xml.

    Kirupa & Janete

  • Expression Blend and Design

    Silverlight Control Styling Tips Articles


    We’ve published eleven new articles on the blog and they all contain information and tips that you’ll find useful when styling common Silverlight 3 controls. First there’s an article with some general tips: it discusses template binding, different ways of binding Content in your template, some of the smarts in the Make Into Control command, and some tips on visual states. Then there are ten articles focusing on specific commonly-used controls. For each of these specific articles the article format includes a list of the control’s visual states and parts, an explanation of the function and importance of each part, a graphical comp of a control and its states, a XAML representation of the control in artwork form, and then in-depth steps for turning that artwork into a template for the control. Here are links to the articles. Enjoy!

    - Steve

  • Expression Blend and Design

    A Look at SketchFlow


    Christian Schormann has written a nice article on SketchFlow, so be sure to check it out at the following link:

    Kirupa :)

  • Expression Blend and Design

    Minor Update to The Expression Blend 4 Release Candidate


    As most of you know, last week we released the release candidate version of Expression Blend 4. Shortly after many of you had a chance to play with it, some of you reported that Expression Blend crashes during launch.

    If you are one of those people whose Expression Blend crashes after launch, please download this minor revision of the release candidate we released last week:

    blendicon_3 Expression Blend 4 Release Candidate (Updated)

    If you aren’t having any problems launching Blend, you do not have to upgrade. There are no new features or changes besides some changes to make sure Expression Blend runs properly on launch.

    Submit Error Reports!
    We were able to detect this issue thanks largely through the error reports those of you with this crash submitted. We constantly go through all of the crash reports we receive, and we try to fix as many of them as possible.

    While we hope you never have to experience crashes from running Expression Blend, if you do experience a crash, please do submit the error reports!


    - The Expression Blend Team

Page 3 of 9 (217 items) 12345»