Expression Blend and Design

The team blog of the Expression Blend and Design products.

  • Expression Blend and Design

    Deep Zoom Composer Updated for Silverlight 2 (And More!)

    • 18 Comments

    Yesterday was a busy day, for we released an updated version of Deep Zoom Composer as well! You can download the updated version from the following link:


    dzcicon Download Deep Zoom Composer

    This version of Deep Zoom Composer presents several under-the-hood changes to improve reliability. We are getting close to wrapping up work on version 1 of this powertoy, so we are focusing on improving our existing features in lieu of adding anything new. Expect to see some details on some of those under the hood changes in the upcoming months.

    With that said, that isn’t to say you won’t find anything new in this release. The biggest change is that our project templates now work with the released version of Silverlight 2. Previewing in the browser should just work, and our Deep Zoom upload/sharing service, PhotoZoom, has been updated as well.

    The next feature is something pretty minor but one we received a ton of requests from all of you on. That feature is…the ability for you to launch Deep Zoom Composer by double-clicking on the DZPRJ file itself:

    image

    As always, if you have any questions or suggestions on what you would like to see in future versions of Deep Zoom Composer, please let us know by commenting either here or on our forums.

    Cheers!
    Celso, Christian, Janete, Kirupa

  • Expression Blend and Design

    Download Expression Blend 2 SP1

    • 11 Comments

    Yesterday night, to coincide with the release of Silverlight 2, we released Expression Blend 2 SP1. You can download it by clicking on the following link:


    blendicon Download Expression Blend 2 SP1

    While Expression Blend 2 allowed you to easily design Silverlight 1 and WPF applications, this service pack extends that support to Silverlight 2 as well. You now have the ability to take advantage of Silverlight 2 features such as control templating / styling, visual state manager, font embedding / subsetting, and more directly within Blend itself.

    You can learn more about Expression Blend 2 SP1 from both the Expression Community Site as well as our Expression Products Site where more details are provided.

    Cheers!
    Kirupa & the Expression Blend Team

  • Expression Blend and Design

    Silverlight 2 RC Compatible Deep Zoom Project Templates

    • 7 Comments

    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.

    Cheers!
    Kirupa

  • Expression Blend and Design

    Expression Blend 2 SP1 Preview Released

    • 23 Comments

    Today, we have released a preview of Expression Blend 2 Service Pack 1 that allows you to create content for the release candidate of Silverlight 2. You can download the Service Pack from the following location:


    blendicon Download Expression Blend 2 SP1 Preview

    This Service Pack provides you with all of the functionality you had with our earlier Expression Blend 2.5 June 2008 Preview. Besides allowing you to create new projects for WPF, Silverlight 1, and Silverlight 2 RC, we are also exposing new platform functionality like Font Embedding / Subsetting for Silverlight 2 projects. More on this new functionality in future blog posts.

    One thing to note, which is different from how we handled releases in the past, is that Expression Blend 2 SP1 Preview will install on top of Expression Blend 2. This will not be a side-by-side installation. This service pack is also an evolution of Expression Blend 2.5, so there will be no future Expression Blend 2.5 releases.

    You can find more information on the FAQ page we have created for Expression Blend 2 / SP1.

    Cheers!
    Kirupa & the Expression Blend Team

  • Expression Blend and Design

    Editing in Visual Studio 2008 Instead of Visual Studio 2005

    • 10 Comments

    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:

    image

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

    image

    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.

    Thanks,
    Jeetendra “Jeetu” Kukreja

  • Expression Blend and Design

    Deep Zoom Developer Resources

    • 8 Comments

    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]microsoft.com, and I will look into adding it.

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Cutting Shapes in Expression Blend

    • 15 Comments

    Currently, Expression Blend does not have a scissor tool which allows you to cut shapes like you can in Expression Design. Instead, what you do have are geometric operations that allow you to not only achieve a similar result as “cutting a shape” but also do much more.

    Christian Schormann wrote a nice post outlining how to use many of these geometric operations to slice and dice your vector content, so check it out from the following link: http://electricbeach.org/?p=135

    Cheers!
    Kirupa

  • Expression Blend and Design

    How to Animate a Drawing Line

    • 11 Comments

    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!

    -Steve

  • Expression Blend and Design

    Do You Want to Help Implement Interesting Ideas? The Blend Team needs you!

    • 3 Comments

    A few months ago, we asked you for feedback on what are some of the things you would like to see improved in Expression Blend. You all had a lot of great suggestions...A LOT. If you are interested in helping us both implement some of the feedback but also help define cool features,  we are looking for Program Managers to join our team!

    The specific job details can be found on the following links for our two current PM spots: Position 1, Position 2.

    Cheers!
    Kirupa

    EDIT:
    Updated post to reflect an additional PM opening we have.

  • Expression Blend and Design

    Deep Zoom Composer Updated (Again!)

    • 20 Comments

    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:

    createPZaccount 

    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:

    uploadingFile 

    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:

    dzc_about

    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.

    Cheers!
    Janete, Kirupa

  • Expression Blend and Design

    Download the New Deep Zoom Composer Preview!

    • 20 Comments

    A few hours ago, we released another update to Deep Zoom Composer. Click on the link below to download it:


    dzcicon Download Deep Zoom Composer

    Some of the major new features outside of the usual bug, performance, and stability changes include Panoramic Stitching and PhotoZoom Upload.

    NOTE:
    Our PhotoZoom Upload functionality inside Deep Zoom Composer is causing some uploads to not fully finish before timing out, and we hope to have a fix for this really soon.

    PhotoZoom Upload *
    To help make uploading and sharing your creations with others easy, Deep Zoom Composer nicely integrates with the Live Labs PhotoZoom service: http://photozoom.mslivelabs.com. When you choose to Export, the default selection will be PhotoZoom:

    clip_image002

    You can use your Live ID to sign-in. Once you have signed in, you can specify an album name, choose a cover image, and just upload:

    clip_image004

    Once you have uploaded your contents, you will see a dialog that allows you to browse your newly created album in your browser. For example, the following link shows you a sample project I uploaded directly to PhotoZoom: http://photozoom.mslivelabs.com/Album.aspx?alias=kirupa&album=15

    Panoramic Stitching
    Deep Zoom Composer now allows you to stitch similar images inside the application using some cool technology from Microsoft Research's Interactive Visual Group. Take a series of photos that share similar characteristics, right click on them, and select “Create panoramic photo”:

    clip_image006

    After a short while (the time depends on the number of images, how large the images are, and how much calculation is needed), you will see a dialog allowing you to specify the part of the image that you would like to save. After you have specified region of image to save, your stitched image will appear on your design surface just like any other image you can interact with:

    clip_image008


    We hope you like our latest release. This is still a beta/preview release, so if you run into any problems, please feel free to post on our forums.

    Cheers!
    The DZC Team (Celso Gomes, Christian Schormann, Janete Perez, and Kirupa Chinnathambi)

    * Edit:
    If you are receiving a 401 error when attempting to upload to PhotoZoom, please try again in a short while. There may be some temporary glitches as we deal with some issues related to this.

  • Expression Blend and Design

    Collection of Expression Blend Learning Resources

    • 4 Comments

    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)

    contentpresenter.com - WPF Video Tutorials (Lee Brimelow)

    Lynda.com - 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)

    kirupa.com - 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]microsoft.com to let me know!

    Cheers!
    Kirupa :)

  • Expression Blend and Design

    Where do You Go to Learn More About Expression Blend?

    • 3 Comments

    One of the things that we are planning on doing is providing easier access to learning content. Besides the influx of learning content (videos, articles, etc.) we will be generating ourselves, we also want to link to content around the web that many of you like as well.

    Please comment below on sites, blogs, etc. that you have found very useful for learning more about Expression Blend. In the future, I will create a follow-up post that will hopefully act as a central location we can point individuals to if they want to learn how to use Expression Blend.

    Thanks,
    Kirupa

  • Expression Blend and Design

    Animating control Content between States

    • 4 Comments

    You’re probably very familiar with Content in WPF and Silverlight. For example, two Buttons can use the same Template but can look different by virtue of having different Content in them. And the Content property is of type object so it can be Text, or an Image, or a Panel containing yet more elements, or anything else. In the Template, the uncertainty of what the Content might be is taken care of by the ContentPresenter element which is analogous to a TV screen showing whatever Content happens to be in the control instance.
    This generality of Content is a good thing. But it does give rise to an issue in scenarios where you would like your Template (or Skin, if you prefer) to alter some aspect of the Content in a visual state. Say you’d like the Content’s Stroke color to animate to red during MouseOver. Naturally, that requirement only makes sense as long as the Content has a Stroke property.

    A safe, but limited, solution is to make use of the small number of properties that ContentPresenter has. For example, in WPF, the Template might respond to an IsMouseOver Trigger by animating the ContentPresenter’s OpacityMask to Red. Then the Templated control instance could bind some property of its Content to that OpacityMask like this:

    <Button Style="{DynamicResource ButtonStyle1}">
        <Path Stroke="{Binding Path=OpacityMask,
                       RelativeSource={RelativeSource
                                       AncestorType={x:Type ContentPresenter},
                                       Mode=FindAncestor}}"
                       Data="… "/>

    </Button>

    That approach is limited because you soon run out of ContentPresenter properties. Another approach is for the Template to make assumptions about what will be in the the Templated control instance’s Content. You can try this in a Silverlight 2 project in the Blend 2.5 June Preview. Draw a Button and then draw a Path into the Button’s Content. Then edit a copy of the Button’s Template, select the MouseOver state, select the ContentPresenter and change its Background to Red. Now you’ll need to do some XAML editing. In the XAML, find the MouseOver state and the Background animation and change the Storyboard.TargetProperty attribute’s value to "(ContentPresenter.Content).(Shape.Stroke).(SolidColorBrush.Color)".

    Build and run and you’ll see the result. This is flexible, but it is also unsafe in the sense that if a control instance uses your Template without satisfying the Template’s assumptions (say its Content is a TextBlock instead of a Shape) then a run-time error will result. However, so long as you’re careful to only use this Template on control instances whose Content is a Shape then you’ll be fine.

    Corrina Barber came up with a scenario which is not addressed by the above approaches. The scenario is that of a Button which, in its Normal state, shows a still image (say, vector art of the MSN butterfly) and, in its MouseOver state, shows an animation (say, an image sequence or video of the butterly exercising its wings). Naturally, each Button instance should be able to specify the Normal and the MouseOver Content. This can’t be done by simply animating existing types’ properties in states so in this post I’ll show some of the principles of my solution to that requirement.

    I wrote a fairly simple subclass of ContentControl and I called it FlipContent:

    [System.Windows.Markup.ContentProperty("UnflippedContent")]
    public class FlipContent : ContentControl
    {
        public static readonly DependencyProperty IsFlippedProperty =
            DependencyProperty.Register(
            "IsFlipped",
            typeof(double),
            typeof(FlipContent),
            new PropertyMetadata(new PropertyChangedCallback(IsFlippedChanged)));

        public double IsFlipped
        {
            get { return (double)GetValue(IsFlippedProperty); }
            set { SetValue(IsFlippedProperty, value); }
        }

        public static void IsFlippedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FlipContent o = d as FlipContent;
            if (o != null)
            {
                if (o.IsFlipped > 0)
                {
                    o.Content = o.FlippedContent;
                }
                else
                {
                    o.Content = o.UnflippedContent;
                }
            }
        }

        public object UnflippedContent
        {
            get { return _unflippedContent; }
            set { _unflippedContent = value; }
        }

        object _unflippedContent = null;

        public object FlippedContent
        {
            get { return _flippedContent; }
            set { _flippedContent = value; }
        } object _flippedContent = null;
    }

    The value proposition of the FlipContent type is that it can be made to flip its Content in reponse to a property change, therefore it can be made to flip its Content in reponse to a state change in a control template. Further, the Template needs to know nothing about the objects which constitute the FlipContent’s Content; the control instance contains those:

    <Button>
        <local:FlipContent>
            <local:FlipContent.UnflippedContent>
                <Ellipse Fill="#FFFFFFFF" Stroke="#FF000000"/>
            </local:FlipContent.UnflippedContent>
            <local:FlipContent.FlippedContent>
                <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000"/>
            </local:FlipContent.FlippedContent>
        </local:FlipContent>
    </Button>

    You can try this in a Silverlight 2 project in the Blend 2.5 June Preview. Paste the class definition given above into Page.xaml.cs then add the Button XAML above. Then edit a copy of the Button’s Template, select the MouseOver state, select the ContentPresenter and change its Opacity to 50%. Now you’ll need to do some XAML editing. In the XAML, find the MouseOver state and the Opacity animation and change the Storyboard.TargetProperty attribute’s value to "(ContentPresenter.Content).(local:FlipContent.IsFlipped)". Now press F5 to test the result. You experiment with different content, and you will be able to use Blend to add and edit UnflippedContent because it is the default content property. But you won’t get as much help with FlippedContent.

    You can download the project source files from below:


    folderfiles Download Project Files

    Please note that the solution to Corrina’s exact requirement (switching an image for some video) will probably call for a FlipMediaElementSource class which assumes its content is a MediaElement and which switches its Source property instead of its own Content property. I’ll leave that as an exercise for the reader – you maybe!

    -Steve

  • Expression Blend and Design

    More articles on Visual State Manager

    • 11 Comments

    Karen Corby is the Program Manager who worked with the Expression Blend team in developing the Visual State Manager feature. Karen has written four excellent and comprehensive blog posts (starting here) which explain the motivation for VSM, everything you can do with VSM and how it works under the covers, and how to build and skin a custom control. Even if you won't be writing your own custom control, this is highly recommended material on the subject from someone who designs the platform itself.

    Below I've shamelessly copied out Karen's further reading section so we have a good set of links in one place:

     -Steve White

  • Expression Blend and Design

    Deep Zoom Composer : (Possible) Collection Layout FIX

    • 3 Comments

    If you’ve browsed through the Deep Zoom Composer forums lately, you will have seen a few cases where Deep Zoom Composer was having difficulties maintaining layout when exporting collections. More specifically, the arrangement and position of images seen inside Deep Zoom Composer was not what you saw when you previewed your collection in your browser.

    If this describes the handful of you who were having difficulties, we have a manual solution for you until we release our next version of Deep Zoom Composer. The solution is for you to open your dzc_output.xml file in Notepad and do a find/replace on all instances of commas ‘,’ with periods ‘.’ instead:

    image

    Save your dzc_output.xml file, and you should be set!

    The problem is that in certain locales, commas are used to indicate precision as opposed to decimal units. Replacing the commas with periods will take care of this issue for you. In the next release of Deep Zoom Composer, we will take care of this automatically so you don’t have to worry about it.

    Credit for finding the cause of the problem and the possible solution goes to Avi Dunn and Rado Nickolov of the Live Labs team.

    Cheers!
    Kirupa :)

  • 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

    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

    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

    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

    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

  • Expression Blend and Design

    Using the KeySpline Editor to Add Animation Easing

    • 3 Comments

    Previously on the blog I’ve explained how a KeySpline can be used to do animation easing. I also demonstrated a tool for converting an animation curve (in this case a Path drawn in Blend) into an actual animation.

    This time let’s look at the new KeySpline editor in Blend 2 and walk through an example of how to visualize and edit your easing graphically. If you want to follow along, create a new project (WPF or Silverlight) and draw a red-filled circular Ellipse at the top of the page to serve as our falling object. Create a new Storyboard, move the playhead to time 1 and move the Ellipse to the bottom of the page and change its Fill to gray. If you preview the Storyboard now, or build and run, you’ll see the ‘ball’ falls at a steady rate and changes color at a steady rate. Now, what if we want the ball to look like it’s falling under gravity (so, speeding up as it falls) and cooling down from red-hot back to gray (so, cools quickly at first, then more slowly).

    In Expression Blend 2 you can actually select a keyframe and edit its KeySpline. The KeySpline is the thing that determines how the animated property changes between the previous keyframe and the keyframe you selected. You can think of each keyframe as being a point on a curve. Each keyframe is connected to the one before it by a segment of this curve. So selecting a keyframe then editing its KeySpline is actually editing the shape of the curve between the selected keyframe and the keyframe before that. Even the first keyframe has a curve going from time 0 to the keyframe (a special case of this is when the first keyframe is at time 0, in which case that curve has no size so editing it will have no  effect).

    Let’s see how to edit the KeySpline to get the acceleration and cooling behavior we want. With the Storyboard still open, go to the object tree and expand your ellipse. Now select the keyframe icon on the RenderTransform row by clicking it once:

    image

    In the property inspector you’ll see an Easing category inside which is the KeySpline editor. It’s currently a straight line but you can drag the two yellow control point handles around to change that, or use the number editors below to edit the coordinate values more precisely. Make the KeySpline look like the picture below.

    image

    Across the top of the KeySpline editor is a little graphic that serves as a reminder for where your selected keyframe lives on the curve you’re editing. I’ve put a red circle around the gray graphic representing your selected keyframe. Remember, the selected keyframe is the one at the end of the curve segment you’re editing. The previous keyframe (or the value at time 0 if you’ve selected the first keyframe) is represented by the lighter keyframe icon graphic at the top-left. So this curve is showing that the animation from the value at time 0 to the value of your selected keyframe makes very little progress in the first half of its duration but then makes up for that towards the end by changing the value very rapidly. Imagine this behavior with respect to the position of a falling ball and then preview your Storyboard, or build and run, to see the new curve in action.

    For the cooling effect, you want a differently shaped curve. This time you’re animating from Red to Gray but you want to progress along this animation rapidly at first then slowing down. So select the keyframe on the Fill row and make its KeySpline look like this:

    image

    You can create more interesting curves, including inflection points, by moving both control points (the yellow handles). Have fun and please keep the Blend feedback coming.

    Steve

  • Expression Blend and Design

    What Would You Like to See in the Next Versions of Blend and Design?

    • 115 Comments

    Even though we just shipped Expression Blend and Design 2, we are already busy planning what to do for future releases. To better help us with our planning, we'd like to hear from you.

    What are some things that you would like to see in Blend and Design? What are some of the things that you wish were done differently? Also, what are some of the things in our products that you like?

    Let us know by posting in the comments below! We take your feedback very seriously, and your input goes a long way in helping us improve our products.

    Cheers!
    Kirupa

    (On a related note, based on feedback from many of you, this blog has been restyled. A big thanks to Tim Sneath for the help.)

  • Expression Blend and Design

    An Update to Deep Zoom Composer

    • 38 Comments

    Ever since we released Deep Zoom Composer during MIX, there has been a ton of great feedback you have all sent us on what you liked and what you would like to see improved in future versions. To give you a sneak peek at where we are currently, we're releasing an updated version of Deep Zoom Composer for you all to play with:


    dzcicon Download the Deep Zoom Composer

    Before installing this version, please uninstall earlier versions of Deep Zoom Composer. All of your older projects should still work, so don't worry! Once you have it installed, besides a ton of changes under the hood to make creating your Deep Zoom content faster and more memory-efficient, some of the bigger features that you will immediately notice are the following:

    Improved Exporting

    The single biggest thing we heard consistently from all of you was to make exporting better. In the earlier version, all we did was just output the image tree. To figure out where you had to go from there, our Composer didn't help. Luckily, you had quality blog postings from individuals such as Scott Hanselman, Pete Blois, Wilfred Pinto, Jaime Rodriguez, and others who helped answer the question "Where to go from here?" In this version of Deep Zoom Composer, we try to make that easier for you by outputting a working Silverlight 2 project along with your image tiles:

    exportDZC

    Now, you no longer have to worry about what to do with these bizarre cutouts of images that you get as your output, and we even provide all of the mousewheel, pan, zoom, and keyboard functionality that you otherwise had to write yourself!

    Better Design Experience

    Arranging images can be a time-consuming task. To make it easier for you to do that, we've added snapping and guidelines that appear when you are dragging either a single or a group of images around:

    imageSnapping

    We also took care of the various filling/scaling issues you would have encountered when zooming in on images on the design surface. In case you didn't know, Deep Zoom Composer actually uses a variation of the tiling technology from Deep Zoom on the design surface itself, so we would be swapping images in an out at a frantic pace if you happened to be zooming and panning around while composing your images. We still do that....but it just feels more natural without the distortions you saw earlier.

    Updated Collections Export

    When exporting collections, Deep Zoom Composer would often misrepresent the position of your arrangements when you actually previewed in our browser. Thanks to the Live Labs team (Lutz, Dan, Avi, and Rado), they were able to pinpoint the problem and fix it for us in this release. You no longer have to worry about what you see in Deep Zoom Composer not being what you saw in the browser.

    Greater Access to Help

    There will be times when you would need more help than what the application provided. We've tried to call out both our support forum and this blog throughout the application so that you can quickly get unblocked on any issues you run into:

    gettinghelp

    In the past, all of these questions have been handled directly on the blog. For archival purposes, it would be great if you could post those questions on the forums instead. Scanning through several posts with 50+ blog comments for solutions probably isn't fun, and we don't want your question to get lost and go unanswered.

    Where Next?

    There are still a lot of great features that we will be adding in the future, so if you have any requests, complaints, wishes, etc., please feel free to let us know by posting a comment here or in our Deep Zoom forum on the Expression Forums.

    Cheers!
    Celso, Janete, Kirupa

Page 4 of 9 (217 items) «23456»