Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Expression Blend -- What Is That?


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

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

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

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

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

  • Expression Blend and Design

    Deep Zoom Composer Updated (Again!)


    To address many of the issues you all had with the PhotoZoom functionality, we have released an updated preview version of Deep Zoom Composer. You can download the updated version from the following link:

    dzcicon Download Deep Zoom Composer

    Be sure to uninstall your current version of Deep Zoom Composer before attempting to install the latest version. The issues we fixed revolve around making the log-in screen more clear and ensuring uploads do not time out.

    More specifically, you need to create an account on PhotoZoom prior to being able to upload via Deep Zoom Composer. The PhotoZoom Export tab now makes that step explicitly clear:


    The second set of changes revolved around the log-in and upload difficulties many of you pointed out. We significantly increased the timeout for uploads so that most large uploads on slow connections will still succeed:


    Do you have the latest build?
    Because we released the updated version so quickly after we released the last one, do check to make sure you are running the latest version. You will know if you have the latest build by going to Help | About and seeing the build date, 3 August 2008:


    Overall, this update is designed to make using PhotoZoom via Deep Zoom Composer usable. We think this is a great feature that makes Deep Zoom Composer more approachable by non-technical users, so please let us know if you continue having any difficulties, and we will be glad to take a look at.

    Janete, Kirupa

  • 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

    Expression Studio 4 Launches


    Today at Internet Week in NYC, we announced the availability of Expression Studio 4. You can download the trial of Expression Studio 4 Ultimate that includes Expression Blend 4 and SketchFlow by clicking below:

    s4 Expression Studio 4 Ultimate

    Keep watching this blog for more news, updates, and in-depth looks at some of the new features that we’ve introduced. Until then, here are some related links:

    1. Microsoft Expression home page
    2. Christian Schormann’s blog
    3. Soma’s Favorite Expression Studio 4 Features

    Note that if you are currently doing Windows Phone development, please do not upgrade to the final version of Expression Blend 4 yet. We will release an updated version of all of our phone components in the future, so please continue using Expression Blend 4 RC.

    Of course, no major release would be possible without the feedback all of you have provided, so thank you!

    - Expression Blend Team

  • Expression Blend and Design

    Debugging Design-Time Exceptions


    It’s not entirely uncommon for projects that run fine to not work when loaded into Blend for editing:


    There are a variety of issues that can cause this- some are bugs that we’re working to address, others are things that need to be fixed by the application developer. Unfortunately designability doesn’t always come free.

    The exception information that’s displayed often has some useful information, but for complex projects I can save some guessing by just debugging through it using VS. This post will describe some steps to help you out.

    Steps to Debug Exceptions on the Design Surface in Blend

    1. Open the project with the error in Blend, but close the XAML file which contains the error.
    2. Open the same project in Visual Studio.
    3. Attach the VS debugger to the Blend process:
      1. In Visual Studio, go to Debug->Attach to Process.
      1. Select Blend.exe from the Available Processes list:


      1. Ensure that the “Attach To:” field reads ‘Managed Code’, if not, click Select… and change it to “Managed Code”


      1. Click Attach
    1. Set Visual Studio to break on all exceptions:
      1. In Visual Studio, go to Debug->Exceptions…
      2. Ensure there’s a checkbox beside Common Language Runtime Exceptions:


      1. Click “OK” 
    1. Go back to Blend, and open up the XAML file containing the error.
    2. What ideally will happen is that you’ll get a nice stack trace leading to some of your code in Visual Studio and the cause is readily apparent:


    Common Examples of Errors We See
    Let’s look at some common errors we often encounter with Silverlight 2 projects:

    Common Error
    Accessing the web page while in the design surface, such as the above example. Anything related to HtmlPage is off-limits when in design time since the app is not being hosted in a web page:

    if (HtmlPage.IsEnabled) {
    HtmlPage.Window.Alert("Hello World!");

    Common Error
    Accessing isolated storage in the design surface, or even accessing a method which contains a call to isolated storage. When hosted at design-time the Silverlight application is actually running on the desktop .NET runtime where these APIs do not exist. This means that methods which contain a call to isolated storage cannot be called even if the isolated storage is never accessed.


    public Page() {

    if (HtmlPage.IsEnabled) {
    using (Stream s =
                                             .CreateFile("testdata")) {


    public Page() {
        if (HtmlPage.IsEnabled)

    public void InitializeData() {
           using (Stream s = IsolatedStorageFile.GetUserStoreForApplication()
                                                .CreateFile("testdata")) {

    Bonus Trick
    One of the other complaints that I’ve heard frequently is that debugging templates errors in Silverlight 2 Beta 2 is not so easy. Too often you just get a stack trace with a bunch of nonsense calls to Measure or MeasureOverride. To help debug these errors in my own projects I’ve started overriding MeasureOverride in my own controls so that they’ll appear in the stack trace as well. This way when a template fails to load, I can quickly tell where it was in the application.

    protected override Size MeasureOverride(Size availableSize) {
    return base.MeasureOverride(availableSize);

    Hope this helps!

    - Pete Blois

  • Expression Blend and Design

    How to Animate a Drawing Line


    In Blend you use the Pen tool to draw lines and they appear in the XAML as <Path> elements. But after you’ve drawn your lines and you test your application, the Paths appear immediately: they don’t replay the gestures you used to create them. But sometimes that’s the effect you want, so how do you do that?
    The manual way is only practical if you have very few points. First draw out a Path consisting of straight segments. Then create a new Storyboard, move the playhead forward a tenth of a second and, using the Direct Selection tool, move the last point to the same position as the second-to-last point. Move the playhead again and repeat, each time moving an increasing number of points back to the previous position. When all your points are at the same position as the very first point, move the playhead to time 0 and click the Record Keyframe button. Now reverse the Storyboard and you’re done.

    Any more than a very small number of points and you’ll need an automatic way of generating the Storyboard. You can do that with the code in the assembly dll built from the PathScribbler project I’ve provided below:

    folderfiles Download PathScribbler Project Files

    PathScribbler works with WPF paths but you could easily port the code to work with Silverlight. After building the dll and referencing it in your project, the way you use it is you first draw your Path (which may contain curved segments but they will be straightened by the PathScribbler code) and then you create a new, empty Storyboard. Finally just call PathScribbler.Generate() and pass the name of the Storyboard into which the animations are to be generated along with some other optional parameters. Then you can trigger your Storyboard any way you wish.

    The PathScribbler project is contained in an example project named PencilWriter attached to the post. For this project I made a TextBlock into a Path and I trigger my Storyboard when the main window is clicked. Build and run the project then click the window and wait a moment until the animation is generated and then begins. Hope you have fun with PathScribbler!


  • Expression Blend and Design

    Simple Cartoon Animation using Visual States


    One of the goals of Silverlight’s Visual State Manager technology is to let you do quite a bit of control customization without needing to use Blend’s Timeline, nor even having to know what a Storyboard is! Feel free to test-drive the Silverlight Button below, and then read on for a run-down of how easily it can be built.

    Get Microsoft Silverlight

    I started out with some vectors (Paths) depicting the face in its normal resting state. Then I used the Tools > Make Into Control command to make the artwork into a template applied to an actual Button. After deleting the ContentPresenter from the template, I selected the MouseOver state in the States pane, so that the changes I was about to make to the existing elements (to produce a face that looks alert and ready) would be recorded only in the MouseOver state. I moved the head and the features upward a little, and the rest of the changes involved using the Direct Selection tool to move Path points around.

    Because I wanted the Pressed state to be a variation on the MouseOver state, I used the Tools > Copy State To command to duplicate all my changes into the Pressed State. Then, with the Pressed state selected, I adjusted one eye and the mouth to make the wink.

    For the Disabled state I decided I needed new graphics instead of adjusting properties of the existing graphics. So I created a simplified grayscale version of the face and made that version opaque only in the Disabled state.

    For transition timing, I created a number of transitions to and from various states and set their durations to taste.

    Finally, so that each Button instance can customize some aspect of the template, I used template bindings so that Brush colors used in the template to draw various pieces of the face are bound to properties of the Button instance. So for example I selected shoulders, then selected Fill in the property inspector, and then clicked Advanced property options > Template Binding > Background. So now, by setting a value for Background, Foreground, BorderBrush and OpacityMask, a Button instance with this style set on it can determine the colors of the shoulders, face, hair, eyes and nose.

    You can download the sample project files here.


  • 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

    Deep Zoom Composer - June 2009 Preview!


    We know you’ve been waiting, and we know you just can’t wait any longer, so here it is:

    dzcicon Download Deep Zoom Composer

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

    A few months ago, we asked you what you all wanted to see in Deep Zoom Composer, and a lot of you gave some really great ideas. The following sections highlight just a small list of the new features we’ve added and improved based on your ideas, and our subsequent blog posts will delve into these features in greater detail.

    Navigation Support
    A common request has been around doing more with your Deep Zoom images than just being able to zoom in and out on them. In this release, we have introduced some cool navigation features which allow you to navigate between images or areas of images in a web/hyperlink-like fashion. You can also link images to external URLs as well.

    Better Memory Usage
    Deep Zoom Composer now uses significantly less memory than it did before, so you should now be able to work with more images in your composition.

    First Draft of Updated Collection Exporting
    We have now added the ability for you to import images, tag them directly from your image list in the Compose view, pick from a set of pre-defined templates, and export. All of this was done without you having to first place your image on the design surface.

    This is an area we are going to significantly improve in our upcoming releases, so stay tuned for some further updates on what we have planned.

    If you are an advertiser, knowing which images get the most attention is pretty valuable. We have put in place some early functionality that allows you to do this.

    ...and More!
    There are numerous little improvements we have made, and we’ll try to mention them as we go along in future Deep Zoom Composer related posting.

    Where Next?
    A lot of the features we have introduced are a bit rough on the edges, and we are going to be investing heavily the UI/styling/usability of them for our upcoming releases. Please feel free to comment below on things you like or don’t like, and that will help us prioritize things for future releases.

    Deep Zoom Composer is a collaborative effort of various groups at Microsoft, and for this release, we would like to give a HUGE thanks to the team at Microsoft Innovation Labs in Israel who contributed to making all of the above features possible for this release.

    Janete & Kirupa

  • Expression Blend and Design

    Expression Studio 3 LAUNCHED TODAY!

    US_Prd_Bx_Tilt_L_Expression_Studio_3 Today we announced the official launch of Expression® Studio 3, a suite of professional design tools for creating Rich Internet Applications. This announcement comes shortly after the July 10th Silverlight 3 launch and the availability of the release candidate for Expression Blend 3 + SketchFlow. It is super exciting for us on the Expression Web, Expression Design, Expression Blend + SketchFlow, and Expression Encoder teams to showcase the final versions for the 3rd release of the Studio. Below are various links to the trials, blog posts and other info from the Expression Studio 3 site, community site,  team blogs, and forums. Stay tuned for upcoming related blog posts! 

        Expression Studio 3 Overview Video 
        The Visual Kitchen Video 
        Soma’s blog about Silverlight 3
        Download the Expression Studio 3 60 day trial!


    Expression Web 3 Expression Web 3
    Microsoft Expression Web 3 gives you the tools you need – PHP, HTML/XHTML, CSS, JavaScript, ASP.NET, ASP.NET AJAX, visual diagnostics and sophisticated CSS design capability – to produce high-quality, standards-based Web sites. Includes SuperPreview.

    Useful Links:
    Expression Web 3 Overview + Video + 60 day trial
    Expression Web Community Site
    Expression Web Forums

    Blog Posts:
    Expression Web Blog
    Soma’s Expression Web 3 blog post
    Blog posts on the xWeb blog related to SuperPreview

    Expression Blend 3

    Expression Blend 3 + SketchFlow

    Microsoft Expression Blend 3 revolutionizes the speed and efficiency with which you can take your ideas from initial concept to completed project on the Silverlight and .NET platforms. Includes SketchFlow.

    Expression Design 3

    Expression Design 3

    Microsoft Expression Design 3 is the perfect companion to Expression Blend or Expression Web. Create sophisticated assets with their fidelity maintained throughout the entire designer-developer workflow.

    Expression Encoder 3  

    Expression Encoder 3
    With Microsoft Expression Encoder, you can import and encode video files, produce live webcasts, enhance media with watermarks and advertising, and publish with Microsoft Silverlight.

    Useful Links:
    Expression Encoder Overview + Video + 60 day trial
    Expression Encoder Community Site
    Expression Encoder Forums

    Blog Posts:
    Expression Encoder Blog
    What’s new in Expression Encoder 3 blog post by the Encoder Team

    The Expression Blend Team

  • Expression Blend and Design

    Expression Blend 4 Release Candidate Available!


    Recently, the final versions of both Silverlight 4 and .NET 4 have been released! To coincide with this, we are releasing a release candidate version of Expression Blend 4 that you can use to target them:

    Download everything you need below:

    .NET Framework 4
    blendicon_3 Expression Blend 4 Release Candidate

    There are two things that you really need to know about this release.

    First, if you are doing Windows Phone development, you should not use the Expression Blend 4 RC. We will have an update for you soon with updated components, but in the meantime, please use Expression Blend 4 Beta.

    Second, this release of Expression Blend 4 targets the final versions of Silverlight 4 and .NET 4, you can share your creations with the rest of the world. You no longer are limited to only sharing your creations in source code form or for private testing.

    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

    Deep Zoom Composer has been Updated: Documentation and Bug Fixes!


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

    dzcicon Download Deep Zoom Composer

    NOTE: Please uninstall any older versions of Deep Zoom Composer prior to installing this new version.

    This release was really about fixing the bugs that many of you have found as well as addressing some major shortcomings in the app. One of the biggest shortcomings was the lack of comprehensive and updated documentation….until now!

    Updated Documentation
    Thanks to some great work by Chris Lohr and his team, Deep Zoom Composer has some really informative (and nifty-looking) documentation in the form of a User Guide:


    The User Guide covers topics ranging from what Deep Zoom is to how to actually use Deep Zoom Composer to create your own content.

    You can access the User Guide inside Deep Zoom Composer by going to Help | User Guide or by pressing F1.

    Random Trivia
    The photographs used as examples inside the user guide were taken by Chris himself.

    Improved Memory Handling
    One of the areas we have made and continue to make investments in is memory usage. Dealing with many high-resolution images on an interactive design surface is a challenge, but Deep Zoom Composer should now allow you to compose more images than you could in the past. We aren’t quite there yet, so expect future releases to address them in greater detail.

    Improved Project Support
    For the past few releases, we made some major changes to our project structure and how the DZPRJ files are written and opened. Unfortunately, for some of you, those changes meant your older projects were no longer opening. We have tried to fix as many of those incompatibilities in this release, and a big thanks to all of you who have have e-mailed us your projects for testing.

    If you find that your projects are still not opening, we apologize. To help us out, do e-mail your .dzprj files to kirupac[at] to aid in troubleshooting.

    Updated Seadragon Ajax Templates
    In our previous release, you got to use Deep Zoom Composer to export your content to Seadragon Ajax. The approach that was used then was to have you upload the JS libraries along with your images to the server. That was a bit messy. In this release, we are deferring all JS downloading to the Live Labs team’s server itself, so you will no longer have to upload a large quantity of JS files.

    Numerous Little Fixes
    Besides the major changes listed above, we made many little tweaks that are too many to publish and list here. Some of them are bigger such as using an updated version of DeepZoomTools.dll, and some of them are less big like the numerous wording and string changes made.

    If you have any questions or comments, feel free to comment below or post on our forums :)

    Janete, Kirupa

  • Expression Blend and Design

    Creating a Vista Style Button Template Tutorial


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

  • Expression Blend and Design

    Collection of Expression Blend Learning Resources


    This post will try to showcase an updated list of useful (and free!) training material available for Expression Blend:

    Training Resources from Microsoft

    Expression Blend and Design Blog: Tips & Tricks

    Expression Community

    Expression Blend (Online) User Guide

    Expression Blend Tutorials

    MIX 07/08 Video Sessions

    Building Rich Client Experiences with Blend and WPF (by Celso Gomes and Christian Schormann)

    Building Rich Web Experiences (by Celso Gomes)

    Applications = Designers + Developers (by Celso Gomes and Kirupa Chinnathambi)

    Designing Next Generation User Experiences (Johnathan Lansing)

    Tutorials (Videos)

    A Lap Around Microsoft Expression Blend (Steve White)

    4 Visual State Manager Videos (Steve White)

    Animation and Media (Peter Blois)

    Blend for Programmers (Jesse Liberty) - WPF Video Tutorials (Lee Brimelow) - Video Tutorials 1, Video Tutorials 2 (Lee Brimelow)

    Tutorials (Articles)

    Nibbles Tutorials (Celso Gomes)

    Collection of Visual State Manager (VSM) Resources (Steve White)

    Electric Beach (Christian Schormann) - Blend + WPF, Blend + Silverlight (Kirupa Chinnathambi)


    If there is some useful resource you would like to see added to the list, please drop me an e-mail at kirupac[at] to let me know!

    Kirupa :)

  • Expression Blend and Design

    Windows Phone Developer Tools Beta Released


    It’s been a while since we released an update for those of you working on Windows Phone 7 projects! Well, wait no more! Today we’ve released an updated version of Expression Blend that supports all of the latest changes made to the Windows Phone 7 runtime along with some cool new features.

    First, download everything you need below:

    blendicon_3 Windows Phone Developer Tools (Beta)

    As you can see, you no longer need to download and install Expression Blend separately. You can just run the single Windows Phone Developer Tools installer and get Windows Phone variants of Expression Blend, XNA Game Studio, and Visual Studio for free.

    This version of Expression Blend installs and runs side-by-side with Expression Blend 4 and only supports working with Windows Phone projects.

    New Features
    As mentioned earlier, beyond supporting the changes made to the runtime since the last release, we’ve added a lot of new functionality that makes designing Windows Phone 7 applications easier. Some of the more notable features are described below.

    Improved Design Time Previewing
    Because your applications can be viewed in different orientations, themes, and accent colors, we’ve made it easier for you to visualize within Expression Blend what your application would look like.

    All of this functionality is exposed via the improved Device panel:


    The Device Panel now provides you with easy access to preview between Landscape and Portrait orientations, Light and Dark themes, and Accent color.

    For example, here is a preview of what your application looks like in the default Dark theme:


    Clicking the Light theme button in the Device panel swaps out all of the dark theme resources to display the light theme variants of them:


    This allows you to design and make sure that your applications look the way you want regardless of which light/dark mode the user has their phone in.

    Preview Text Styles
    Windows Phone 7 applications emphasize consistent use of text as a key design element. To make it easier for you to preview and apply existing text styles, we’ve added the ability to preview inline what a particular text style would look like:



    Initial Application Bar Design Experience
    One of the unique and differentiating features found in Windows Phone 7 when compared to Silverlight and WPF is the Application Bar:


    In this release, we have exposed a very early preview of our support for allowing you to design the Application Bar. You have the ability to create an Application Bar, add Application Bar Buttons, and add Application Bar Menu Items. Because Application Bar Buttons display a 48x48 PNG icon, you can specify your own icon or pick from a collection of icons we have provided for you:


    A future blog post will go over in greater detail how to use what you have today to design a working Application Bar!

    Easier Page Navigation
    Because Windows Phone applications are very page centric, we decided to make navigating between pages easy. To navigate from one page to another, we exposed a Navigate To context menu:


    This menu can be accessed when you right click on any element that you wish to start the navigation when clicked.

    Updated FluidMoveBehavior
    We have revised the FluidMoveBehavior to be on par with the improvements we made for Silverlight 4 and .NET 4. You can learn more about what this means by reading Kenny Young’s blog post on this topic.

    Optimizing the On-screen Keyboard
    Unlike Silverlight and WPF where a full keyboard for input is almost always guaranteed, Windows Phone users may not have that luxury when working on their phones. While a on-screen keyboard is available, given the size of the screen, having the full keyboard with all of the keys appear on-screen may not be ideal for all situations either. It may be helpful to users if the keys displayed were optimized for the type of information they would be entering at that particular moment.

    To address that need, we improved our support for the InputScope property on TextBox that allows you to specify what kind of data will be entered:


    For example, if Number was selected for the InputScope on a TextBox, here is what the on-screen keyboard looks like when you focus on it on the emulator/device:


    Notice that you are not seeing the traditional full keyboard. Instead, you are seeing a keyboard optimized only for numerical input.

    As always, if you have any questions or feedback, please feel free to comment below or post on our forums.

    Expression Blend Team

  • Expression Blend and Design

    PDC 2008 Session – Microsoft Expression Blend: Tips and Tricks


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


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

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

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


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


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

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

    folderfiles Download Twitter Source

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


  • Expression Blend and Design

    Creating and Editing Gradients in Expression Blend 3 Preview


    One of our goals for Expression Blend 3 is to provide better tools and user experience for visual designers. At a high level, we prioritized features that allow the designer to keep their focus on the artboard more often. This translated into an improved selection model, predictable layout, familiar and efficient keyboard shortcuts and a flexible and powerful gradient editing experience. This blog post is the first in a series that will highlight features and improvements targeted to the visual designer. Let’s start with the new gradient editing tools. The UI is subject to change for the final release but this overview should give you an idea of the features available in the Preview.


    For Blend 3 we have separated out the Brush Transform tool into two different tools, Gradient and Brush Transform. The Gradient tool allows you to create and edit the properties of linear (LinearGradientBrush) and radial (RadialGradientBrush) gradients on the artboard. The Brush Transform tool allows you to transform any brush type by modifying the translation, rotation, scale and skew. These values are stored as a part of the RelativeTransform property on the brush. Separating out these tools gives you greater control and predictability of which properties are edited, creates cleaner XAML, and makes it easier to animate and bind gradient properties.

    All you have to do to create a gradient is select the Gradient tool in the Toolbar or press the ‘G’ keyboard shortcut and click and drag to define the start and end points.  This creates a gradient for the selected object and sets start and end point to the same positions that you clicked and released the mouse.

    The Gradient tool adorner shows the start point, end point, individual stops and the selected stop. Now you can use the adorners to edit the start (StartPoint) and end (EndPoint) of the gradient by rotating and dragging the adorner. To add a new stop press Alt and click anywhere on the line (Note: In the final release you will not have to press Alt, just click and release). To change the position of a gradient stop (Offset) just click and drag it along the line. To remove a gradient stop click and drag it off the line. To edit the color just double click on the stop and a color picker is displayed where you can select a color for the stop.


    Another really useful feature for editing gradients is the Gradient eyedropper. This is located in the color editor in the Brushes panel when you have an object with a gradient selected.


    Just select the Gradient eyedropper and click and drag anywhere inside or outside of Blend to grab a gradient.  For example, if I have a picture displayed in my browser with a nice gradient I can easily apply this gradient to my shape using the Gradient eyedropper by clicking and dragging:


    Once the gradient has been selected, you will notice that your selected element in Blend now features the range of colors you selected earlier:


    The range of colors I picked in the above example was pretty simple, so you are able to see the four gradient stops and the colors they represent. For more complicated source images, you may have stops that are located close to each other. To adjust these stops, just zoom in to create more visual space between the stops on the artboard so that it is easier to select and edit them.

    Closing Tips
    By using the Gradient eyedropper, it can be easy to get some pretty complex gradients. Have you ever wondered how to reset the gradient back to the black to white default?  Blend uses the gradient from the object that was last selected. 

    1. Set your object to No brush in the Brushes panel.
    2. Select none by clicking on an empty area of the artboard or pressing Ctrl + Shift + A.
    3. Select your object and then select the Gradient brush tab.

    There are also a few additions in the Brushes panel that will help you create and edit gradients.

    • Use the Offset editor to specify a value numerically.
    • Reverse the order of your gradient stops with the Reverse gradient stops button.
    • Select the previous or next gradient stop using the gradient stop iterator. This is useful for selecting stops when you have two stops with the same or very similar values.
    • Hover over a stop to get a tooltip of its offset and color value.

    Finally, there is also an Advanced properties section for the Brushes panel that includes other brush properties like MappingMode, SpreadMethod and RelativeTransform:


    Well, that’s the overview of the new gradient editing features in Expression Blend 3 Preview! I hope you find it easier to work with gradients.


  • Expression Blend and Design

    Expression Design -- New name, new UI


    Expression Design is a vector based graphics design tool that is part of Expression Studio.   It is targeted at graphic designers who need to build visual assets for new WPF (Windows Presentation Foundation) applications.  The goal of Exrpession Design is to bring artists into the process of building great user experiences.   We've been getting feedback on CTPs for a while now under the codenames of Acrylic and Expression Graphic Designer.  Now we have a shiny new name and a brand new interface.

    New UI

    Back in 2005, we released a preview of Acrylic, a graphics design program based off the venerable vector tool Creature House Expression.  As the months passed, we realized that the UI just wasn’t clicking with our audience.  The whole Expression suite is about bringing elegant and beautiful design to the process of application development.   So why not create a UI that embodied our team’s core principles?

    After many moons (and numerous late night dinners by our rock star team), we now have a stylish UI running in WPF on top of our C++ artboard.  Stylistically, the UI matches Expression Blend so you’ll be comfortable in both applications.  For now it comes in a soulful dark gray, but there is also a light theme in the works for all those folks that like a dash of sunshine in their lives. We still have quite a bit of polishing to do, but the foundation is in place.   This is mad scientist stuff.  I like working with mad scientists.

    Designers on the team

    I’m a big believer that a good product is a collection of a lot of little things done right. This only happens when you ask good questions and get a ton of rapid feedback from your actual users.   Taking this feedback philosophy to the extreme, we hired some very talented graphic designers to be part of our team.  They slogged through our daily builds and attended the feature design meetings.   When stupid decisions were made, they yelled.  Along the way, the programmers listened and fixed hundreds of subtle workflow issues.    

    Expression Design has a long life ahead of it and we wanted designers to be part of the development process (and culture!) from the very beginning.

    All those little improvements

    This release has dozens of small workflow improvements that add up to a much nicer experience.  You can find the big list here:

    Here are some of my personal favorites.  

    ·         Fewer palettes: I’m constantly switching between various applications, which means inevitable resizing of the app. I must admit I tend to get a bit retentive when it comes to keeping my palettes so I waste a surprising amount of time lining the half dozen palettes straight again.  With fewer palettes that you can dock with a click of a button, this isn’t an issue any longer.

    ·         The color dropper on the color palette:  When you select this color dropper you can pick a color anywhere on the screen, even if it is outside the current application.  Quite the time saver.

    ·         Pen tool:  The Bezier pen tool is a subtle instrument.  Most designers I know play the modifier keys like a piano when they are drawing vector shapes.  Half the time, when you ask “What steps are you performing?” they honestly can’t say.  It is all muscle memory stored up from years in the pit of production.  But if you put change how the tool works, it is immediately obvious.  The feel is wrong.  We spent a lot of time getting the feel of our pen tool right.

    ·         Updated XAML exporter:  This is really the heart of why you would use Expression Design right now.  It is currently the best way to get complex graphics into Expression Blend.  

    You can grab the December CTP of Expression Design here: 

    Take care

  • Expression Blend and Design

    Check Out The New Pattern (XAML+CS) Library!


    Creating great looking and functioning applications is tough. It requires having a good eye for design, but it also requires some technical knowledge about how to make the design functional.

    As you can probably guess, it is our goal to help you use Expression Blend, Visual Studio, and our related tools to create those great applications. We spend a great deal of time adding new features and making existing features better to help you do just that. Making improvements to the applications is only one side of how we try to help you create great applications, however.

    The other side involves helping you better understand how to actually create great applications, and we try our best to provide some valuable training resources. Some notable shoutouts include the .toolbox and the Expression Community sites. While looking at videos or reading tutorials is useful, we wanted to go further and also provide you with a library of xaml+code samples that showcase something small, something specific, something cool. We felt that, in many cases, simply being able to deconstruct how something was done can be equally (if not more useful) in learning how to do something.

    This library of xaml+code snippets, known better by its friends and family as the Pattern Library, lives as an extension to the Expression Gallery:


    You can learn more about the Pattern Library by reading Lars Power’s newsletter article introducing it.

    Please feel free to download and play with the patterns. If there is something you feel is missing, please feel to let us know or just create it yourself and upload it.

    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

    Try to Define Visuals in XAML


    Ok, pop-quiz time. Below, you will find two screenshots I took from two different applications:


    [ Screenshot 1 ]


    [ Screenshot 2 ]

    Can you tell what is different between those two images? If you said that the button in the second image seems a few pixels off from the image on the top (or something similar), you are wrong. The UI depicted in both of the screenshots is exactly the same. Yes, it was a trick question.

    While both applications look almost the same when run, let’s look at both of these applications when opened in Blend. Here is what the application depicted in Screenshot 1 looks like:


    The application depicted in Screenshot 2 looks as follows:


    As you can tell, there is a major discrepancy between the first and second screenshot when viewed in Blend. More specifically, the second version of the application seems to be missing some UI and the button is not styled at all.

    What Happened?
    The source of the discrepancies have to do with what Blend actually shows on the design surface. By and large, Blend is a XAML editor. Anything defined in XAML, we will do our best to display it on our design surface. For visuals defined in your code-behind files, you may not always be able to see them in Blend.

    This is where the differences between the two apps stems from. In the first app, everything was defined in XAML. In the second app, some of the visuals were defined in XAML, but a many of the visuals were not. That is why Blend is only showing an incomplete subset of what your application actually looks like when you view it on the design surface. This is a problem.

    Why is this a problem?
    The word “problem” may be a harsh word for this, but the outcome is less than ideal if your application is a collaborative effort between someone technical and someone less technical. If you are a developer, being able to visualize code and make changes may be straightforward. If you are more design oriented, looking at code to define the look and feel of an application is not natural. You would prefer something that looks like the application depicted in Screenshot 1 where everything is exposed in Blend’s design surface and you can make changes visually without writing code.

    Some Solutions
    The first and obvious answer that I have is to have you resist the temptation to add controls, define layout, or perform other visual tasks using code. The reason is that, as you saw in the screenshot of the second application, Blend’s design surface won’t be able to help you out.

    Of course, there are many cases where such an extreme solution will not work. It is common for many applications to fall into a gray area where visuals are partly defined in XAML and partly defined in code. Fortunately, there are some simple steps you can take to make designers more productive while still giving developers the flexibility to develop the application.

    Use UserControls
    If you have visual content that needs to be added programmatically, make sure that content is defined as UserControls. The reason is that you can define the UserControl and make changes entirely within Blend. Programmatically, you can add this UserControl – which may have been edited inside Blend – to your application without sacrificing the designability of the UserControl itself.

    Create Styles in XAML, Apply them Programmatically
    Sometimes, UserControls may be a bit excessive. For example, in the second screenshot, I have a button that is unstyled:


    Instead of having a dedicated UserControl to wrap your styled button, you could just define the style in Blend and programmatically apply the style. Let’s say you have a style called GreenButtonStyle defined in your Resources panel:


    To apply this style to your button, use the following code:

    greenButton.Style = this.Resources["GreenButtonStyle"] as Style;

    This allows you to still define the look and feel of your Button using Blend, but its application is handled entirely via code.

    Hopefully this post helped give you some ideas on how to ensure the visuals of your application have the ability to be modified by Blend. I didn’t enumerate all of the various cases, but if there is something clever that you do to enable developers and designers to work together, please comment below.

    Kirupa :-)

  • Expression Blend and Design

    Keyframe easing and key splines


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

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

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

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

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

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

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

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

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

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

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

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

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


  • Expression Blend and Design

    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

  • 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

    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

Page 3 of 9 (217 items) 12345»