Expression Blend and Design

The team blog of the Expression Blend and Design products.

June, 2008

  • Expression Blend and Design

    Download Expression Blend 2.5 June 2008 Preview and Deep Zoom Composer

    • 34 Comments

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


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

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

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

    Cheers!
    Kirupa

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

  • Expression Blend and Design

    What’s new in Deep Zoom Composer!

    • 45 Comments

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


    dzcicon Download Deep Zoom Composer

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

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

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

    image

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

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

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

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

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

    imageFormatPNG

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

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

    undoRedo

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

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

    arrangeIntoGrid

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

    arrangeIntoGridWindow

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

    allOfMyImages

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

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

    taggingSupport

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

    metadataXML

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

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

    Cheers!
    Celso, Christian, Janete, Kirupa

  • Expression Blend and Design

    Debugging Design-Time Exceptions

    • 10 Comments

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

    image001

    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:

     image003

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

    attachManageCode

      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:

     image008

      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:

    image009

    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.

    Bad:

    public Page() {
       
    InitializeComponent();

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

    Good:

    public Page() {
            InitializeComponent();
     
        if (HtmlPage.IsEnabled)
            this.InitializeData();
    }

    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

    Localization and What Goes on Behind the Scenes

    • 9 Comments

    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:

    jv3

    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:

    eng

    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:

    jv2

    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]microsoft.com.

    Thanks,

    Marco D’Amico

  • Expression Blend and Design

    Nibbles Tutorials: Snack Tutorials for Hungry Designers

    • 2 Comments

    A great site that covers designer-oriented Expression Blend topics is Celso Gomes’s Nibbles Tutorials site:

    celsog

    This all-Silverlight site features some nice articles on how you can use Blend to create WPF, Silverlight 1, and Silverlight 2 applications. He recently updated it cover the new features in Blend 2.5 such as the Visual State Manager, so if you’ve been itching to learn more about it, head on over to his site.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Upcoming Expression Blend 2.5 Feature – Visual State Manager

    • 5 Comments

    As many of you may have heard, Bill Gates announced during his TechEd keynote today that Silverlight 2 Beta 2 will be released later this week. To coincide with Silverlight 2 Beta 2, we will be releasing updated versions of Expression Blend 2.5 and Deep Zoom Composer as well.

    There are some nifty new tricks up Expression Blend 2.5’s sleeve for this release. One of them is known as the Visual State Manager, or VSM for short, which makes styling your controls easier. To learn more about this feature, visit Christian Schormann’s blog where he provides an overview of Creating Control Skins in the Visual State Manager.

    Here is a snippet from Christian’s post on why this is an interesting feature:

    Styling dynamic visuals, or “skinning”, is an important task for visual designers working on interactive applications for web and desktops. With Beta 2 of Silverlight, and the associated June preview of Expression Blend, we are making this work much easier and faster - and we are adding more creative options at the same time.

    Very importantly, the model does not only work with controls explicitly written to support skinning via templates (such as the built-in and 3rd party controls) - designers can use the same model and tools to easily define dynamic visuals for UserControls they create.

    Stay tuned for more updates later on this week when we provide more information on VSM, tutorial videos by Steve White, and an updated version of Blend 2.5 where you can try out the new VSM features for yourself.

    Cheers!
    Kirupa

Page 1 of 1 (6 items)