Expression Blend and Design

The team blog of the Expression Blend and Design products.

October, 2008

  • Expression Blend and Design

    Blend 2 SP1 + WPF Toolkit = Visual State Manager for WPF


    The Blend 2 Service Pack 1 contains a secret ingredient that can be activated by installing the WPF Toolkit and then setting a Registry value. In a nutshell, this ingredient is Visual State Manager support for Windows Presentation Foundation projects. As you know, Visual State Manager is built into Silverlight 2 but the WPF Toolkit gives you an early peek into the future of VSM-for-WPF.

    The WPF Toolkit is a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle. The WPF Toolkit not only allows users to get new functionality more quickly, but allows an efficient means for giving feedback to the product team.

    Once you have the Blend 2 Service Pack 1 installed, here are the steps you need to follow to get to the VSM-for-WPF goodness:

    1. Install the WPF Toolkit from
    2. Create the following registry value and make it non-zero. The value should be of type DWORD. Or run the appropriate .REG file attached to this post (or by clicking here).
      • 32 bit OS : HKLM/Software/Microsoft/Expression/Blend/EnableVSM
      • 64 bit OS : HKLM/Software/Wow6432Node/Microsoft/Expression/Blend/EnableVSM
    3. If Blend was running during the previous step then restart it.
    4. Create a new WPF project.
    5. Add %Program Files%\WPF\WPF Toolkit\...\WPFToolkit.dll to the References folder (Right-click the References node in Project, then click Add Reference…).
    6. Close and reopen Window1.xaml. The States pane will now appear for the project.

    Here are some VSM resources to get you going:

    Even though the built-in WPF controls (such as Button and CheckBox) weren’t designed with VSM in mind, the toolkit works some event interception magic that means your Visual States are applied provided they’re given the standard names such as Normal, MouseOver, Pressed, Disabled, Unchecked, Checked and so on. You can also use VSM-for-WPF to add interactivity to new custom controls you author yourself, although be aware that Blend will not read any default VisualState information out of the default template. And of course you can also add VSM interactivity to UserControls.

    We hope you have fun!


  • 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 Updated for Silverlight 2 (And More!)


    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:


    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.

    Celso, Christian, Janete, Kirupa

  • Expression Blend and Design

    Download Expression Blend 2 SP1


    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.

    Kirupa & the Expression Blend Team

Page 1 of 1 (4 items)