The team blog of the Expression Blend and Design
Hi, I’m Bret Ahlstrom, the new release program manager for the Expression Studio suite of products. I’ve only been in this job a few short weeks, and the first thing I get to report on is a problem with the Expression Blend Service Pack 1 that was released last month!
It turns out that some people can’t get the patch to install on their systems. This is due to an incompatibility between the SP1 patch and some versions of Blend (Japanese, Korean and German for starters.)
We think we have identified the problem and are building a new SP1 patch to address it, and this updated path should be ready to go in a few days. To clarify, only people who have had problems installing SP1 should need this patch. If you have already successfully installed SP1, then you won’t need to download and install it again.
Thanks and stay tuned.
But if you want to continue to use the January CTP of EID then please read this post before rushing off and installing anything.
As you know, the WinFX Runtime Components (RTC) are the redistributables (runtime binaries) needed for executing WinFX applications. You target a particular version of WinFX when you develop your Windows Presentation Foundation (WPF) applications. You'll also be aware that Expression Interactive Designer (EID) is itself a WPF application so it is built to run against a particular version of WinFX, as are the WPF applications you build using EID.So, if you want to continue to use the January CTP of EID then you'll need the WinFX Jan CTP installed on your machine. If you've downloaded and played with the new WinFX Feb CTP then you'll need to revert to the WinFX RTC Jan CTP  in order to continue to use EID.
That is, at least for just a little while longer. We have a March CTP of Expression Interactive Designer under starter's orders as we speak so please be patient just a little longer. And the EID March CTP will work with the WinFX Feb CTP.If you'd like to experiment with the new WinFX RTC Feb CTP  then please do so. If you're a developer-type then you'll also be keen to try out the compatible Visual Studio "Orcas" CTP  which contains a WPF visual designer (code name "Cider"). http://www.microsoft.com/downloads/details.aspx?familyid=61DD9CA7-1668-42E4-BD37-03716DD83E53&displaylang=en http://www.microsoft.com/downloads/details.aspx?FamilyId=F51C4D96-9AEA-474F-86D3-172BFA3B828B&displaylang=en http://www.microsoft.com/downloads/details.aspx?FamilyId=AD0CE56E-D7B6-44BC-910D-E91F3E370477&displaylang=en
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
Hi everyone, We have released an update to last week’s Deep Zoom Composer release to address a fairly serious bug related to the image paths we generate during export. You can download the latest version from the following location:
As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.
The export related bug we fixed has to do with image tiles not loading when you export using our custom templates. If you exported using the Default template, everything worked great. To summarize the problem and the solution, if you looked at dzc_output.xml, in our earlier release, we produced URLs to images that looked as follows:
<Items> <I Id="0" N="0" Source="/dzc_output_images/chrysanthemum.xml"> <Size Width="1024" Height="768" /> <Viewport Width="2" X="-0" Y="-0" /> </I> <I Id="1" N="1" Source="/dzc_output_images/desert.xml"> <Size Width="1024" Height="768" /> <Viewport Width="2" X="-1" Y="-0.75" /> </I> <I Id="2" N="2" Source="/dzc_output_images/tulips.xml"> <Size Width="1024" Height="768" /> <Viewport Width="5.1975051975051949" X="-1.5987525987525975" Y="-1.9490644490644482" /> </I> </Items>
The change we made is to remove the leading slash that appears in front of the XML file. The output now looks as follows:
If you already have existing projects that you don’t feel like re-exporting using our new version of Deep Zoom Composer, then feel free to manually remove the leading slash from the image Source value in dzc_output.xml.
Cheers! Kirupa & Janete
Hi everyone, When using Expression Blend, a common task you probably engage in is working with layout. Tasks I commonly associate with “working with layout” involve moving things around, rearranging the order of elements, ensuring everything flows when resized, changing your layout container, etc. For the most part, the changes you make to the layout of your application are pretty harmless…except when it involves DataContexts.
In a nutshell, data contexts allow you to specify the data that elements can inherit and work with. Seems pretty harmless so far. Data contexts can be set on pretty much anything, but because the data is inherited, data contexts are often placed on parent elements (such as a layout container) whose children will inherit the data:
What seemed harmless earlier now has the potential to cause trouble. Because data contexts are often placed on a layout container, and because data contexts primarily benefit any children listening in, you need to ensure that any layout changes you make do not cause your data context to break. The common ways your data context can break are:
Today, Blend does not let you know when you perform a layout operation that breaks data context. It is up to you to be vigilant, and you can see which element has a data context set on it by looking at its DataContext property:
If this property isn’t empty, it means that a data context has been set on it. While having a data context set should not imply that data is actually being used, it is a good gauge on whether a layout operation you perform will have any negative side effects on the children involved.
Cheers! Kirupa =)
The Expression Blend team is currently planning features for future versions of Expression Blend. We encourage everyone to take our Blend 3 Survey and send us your feedback. All eligible participants will be able to enter a drawing to win a FREE Zune HD!
As the winner you will be able to customize your own 32GB Zune HD (color and pattern).
The deadline for submitting a survey response is October 5th, 2009 @ 11:59pm. The winner will be announced on October 9th, 2009.
The survey contains various areas, feel free to respond to the areas you feel most relevant to your experience with Blend. We look forward to receiving your feedback and suggestions.
Cheers! Expression Blend Team
Five (5) new Expression Web Designer training videos are now available for viewing and download at http://www.microsoft.com/products/expression/en/demos.mspx. Simply click the Web Designer tab near the bottom of the page, and then click one of the video links under Training Videos.
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:
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.
When you preview a Silverlight application in Expression Blend, we run the ASP.NET Web Development server in the background to preview your content in an environment that emulates a real-world web server:
On March 9, a signature update to Windows Defender and Microsoft Forefront Security was released that modified your system’s hosts file to address a vulnerability. One of the side effects of this update was that an entry for localhost may have been removed from your hosts file.
This means that, when you preview your application using the ASP.NET Development Server, your browser will simply show a “Page cannot be displayed” (or equivalent) message.
To fix this problem, open C:\Windows\System32\drivers\etc\hosts in Notepad, and add the following entry:
For example, here is what my hosts file looks like (as Lucas pointed out in the comments, if you are not running Windows 7, the below lines may not be commented out):
A subsequent signature update to both Windows Defender and and Forefront Client Security, released on the same day as the earlier update, should not cause this problem.
The original source for this information comes from the Visual Web Developer Team’s blog post on this topic.
Cheers! Kirupa :)
I love 3D, so I'm always trying to incorporate it in my projects. And what better opportunity to work with 3D than a blog post! This week I want to share this Mini Cube project, which is a (2x2) simplified version of that famous game that gave me so many headaches in the past. This is a perfect candidate for a 3D sample, since you have to visualize the cube in three dimensions in order to play it properly.
This project is not finished yet, I've prepared the 3D objects and some interaction, but the cube doesn't "work", which means you can't rotate the blocks. But that's the point of this post... invite you to finish it ;-) So, let me give you an idea of what I have done so far and see if someone wants to take it to the next level:
The workflow I used was Maya 6.0 > Export to Obj > Import Obj in Blend. In Maya I was able to create the geometry, separate materials, and adjust the pivot points for each block. For the geometry, I also created a few extra objects that will receive mouse events in Blend. If you click on one corner, you will notice that a Message Box shows the name of that corner (red1, red2, etc...) Please, see the following image to see where they are located. You can find the original Maya project in the project ZIP file (/miniCube/Maya_files).
To import a Obj file you just need to drag the files to your WPF Project in Blend. Just remember that you have to drag the .obj and the .mtl files. The latter contains all the materials that you defined in Maya. Double click the file cube.obj to insert into the Artboard. Then use Camera Orbit to rotate the 3D space.
Ok, that's the general idea. Now if you open the Blend project you will see that I've prepared a few more steps:
Well, since you have the Holidays, you can use that time off to finish this project! The next steps are not easy, but interesting. You can use the Storyboards that are already there, or you can rotate the blocks using just code. The idea now is to make the cube work, so you can come back from the Holidays and spend your time playing the game at work! Just kidding...
I will publish the final project in January, but I would be glad to publish any solution that you might send us!
Enjoy, and Happy Holidays! -Celso
Hi everyone, As many of you probably already know, the Expression Community site is where you go to learn more about how to use Expression Blend. One of the big components of the Community site is the Expression Gallery where you can download and share all kinds of content with the rest of the world.
I had some time recently, so I’ve uploaded many of the samples that have shipped with Expression Blend to our gallery:
Just head over here and download them all.
I’m not fully done uploading all of them, and I’m tracking down some of the samples we shipped as part of Expression Interactive Designer many moons ago as well, so do periodically keep checking to see if any additions have been made.
Cheers! Kirupa :)
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:
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.
Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expected including layout, databinding, controls and templating. On the Blend team we’re extremely excited about the features arriving in Silverlight 2.0 and are very busy building some excellent tooling for it. We don’t have too much information right now, but rest assured that we’re working on it.
Following from Danc’s earlier post about creating game graphics in Expression Design, a fun Silverlight game that we did together is Sprawl, you’ll see a very similar visual style there:
The game is all Silverlight 1.0 and took about a day of development time to make once the graphics were done. I hadn’t realized Danc was going to post his Planet Cute drawings, otherwise I would have polished up a sample Silverlight app built off of it :)
One thing that many people have been pestering me about (and rightly so!) is an update to the Snoop application used for debugging WPF applications. I just wanted to assure folks that I am working on updating it and hopefully will have a quality update in not too long.
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.
Fellow Blender, Pete Blois, has written a small application called Rooler that allows you to make measurements of everything visible on your screen. You can download it by clicking here.
Rooler helps solve a common problem you have when designing UIs. That common problem is figuring out how large something is or how much space exists between elements. To help with this, you have this nifty tool called Rooler which, to think about it differently, is like having a virtual ruler that you can use to measure things on your screen.
Rooler is a small application that soars above all of your windows and provides you with some common screen measurement tools:
For example, let’s say that I need to create a graphic whose width is the exact size as some text I have:
The above text is actually an image. Right clicking on the image and seeing its properties will give me the width of the image, but it may not translate to the actual width of the content stored inside it. Finding the size of the actual content is where a tool like Rooler comes in handy.
You can click on the Bounds icon to draw an overlay rectangle over the area you want to measure:
Once you have drawn the boundary, release the mouse cursor and Rooler will automatically create the smallest box that bounds all of your data:
Best of all, you all get the width and height of this bounding box as well, and you were able to do this without using another image editing tool and performing various (albeit simple) steps needed to get a similar value as what you see above.
I just showed you one example of what can be done, but you can do a bit more as well. Go check out Pete’s Rooler page for more examples and information on other things this tool does.
Many of you may not know that Expression Blend (and the entire Expression Studio) is available in eight languages other than English. In fact, we just released them earlier today! Here is a small screenshot of Expression Blend running Japanese:
My name is Marco, and I help to create the versions of these products that ship in Japanese, German, Korean, French, Italian, Spanish, and Chinese (simplified and traditional). Creating the international versions of our products is a challenging process that requires several steps, so let’s take a brief look through them in this post.
In order to create our international versions, we first need to be sure our products are globalized so that they can be adapted to different markets around the world where we sell our products. Once our products are globalized properly, we test them via a pseudo localization process. In this process, we introduce different kinds of characters into our UI strings to ensure that our application behaves as we expect it to regardless of which character set is used.
To see why, let’s look at the strings in the English version of the Expression Blend options dialog:
Notice the size of the various text fields and how much space each piece of text takes. Now, let’s look at the corresponding Japanese version:
Notice that in the Japanese version, the amount of space your text takes up varies a bit from the English version. This is important, because, as a designer/developer of an app that needs to be localized, you need to ensure that any control that stores localizable strings will still look OK when the strings inside them are of various sizes as you see above. This is where pseudo localization comes in handy. While we may not have the exact translated strings to use, we have a good idea of whether the user interface can handle the text of various sizes when the pseudo localization process throws random text of various sizes.
Once we are convinced that our code is fully localizable, I work with our developers to isolate all of the visible user interface strings within the application. This includes all of the menus, dialogs, error messages, etc. If a string can be seen in the UI, then I need to be able to access it. I then work with software localization specialists to translate the UI strings.
After the strings get translated, we create the localized versions of our applications. These applications are then tested for both linguistic accuracy as well as functional quality.
As you know, we are always looking for feedback on our products, and this includes our international versions. Feel free to leave a comment here if you have used any of the localized versions of Expression, or if there is something more you would like to see from our international versions.
Alternately, feel free to contact me directly at marcoda[at]microsoft.com.
You can get to the preview either through the Expression website or the Download Center:
Expression site: http://www.microsoft.com/expression/products/download.aspx?key=blend2preview
Download Center: http://www.microsoft.com/downloads/details.aspx?FamilyId=69540337-B619-4A47-AC27-52D8AF3A7830&displaylang=en
Also available is the Update for the Expression Media Encoder Preview…this update ensures templates work properly with the latest Silverlight bits: http://www.microsoft.com/downloads/details.aspx?FamilyId=3A3C901C-C23D-4567-A76F-CC46CB113D1E&displaylang=en
Hi everyone, For a limited time, there is a 30% discount on all Microsoft Expression 3 products (Microsoft Expression Studio + Expression Web, both full and upgrade versions) through the Microsoft Online Store for US-based customers:
No promo code required at all – just go to the store and add to the shopping cart!
Ok, Jeff Kelly is back with Part IV of his coverage on behaviors-related topics. This one talks about some of the built-in value editors we provide to make it easier for your users to use behaviors that you create - Kirupa
In Expression Blend 3, we’ve provided a number of custom ValueEditors in the property inspector to enhance the usability of our standard Behavior set. As an added bonus, we’ve introduced some limited extensibility to allow third-party controls and behaviors to reuse a few of these.
Specifically, the ElementPicker, the StateNamePicker and the StoryboardPicker can all be reused by placing the CustomPropertyValueEditorAttribute on the property you wish to use the editor. The CustomPropertyValueEditor enum provides the available options:
Note that both the ElementPicker and StateName picker expect to be used on properties of type String, whereas the StoryboardPicker expects to be used on a property of type Storyboard. It’s up to your control or behavior to figure out what to do with the value you get back.
A Note on Design-Time Metadata I’ve covered a number of attributes that are meant to help improve the tooling of your behaviors and controls in Blend 3. It is perfectly valid to place these attributes directly on your class and property definitions; they will work fine. However, doing this raises a general architectural concern: design-time metadata should not be encoded in a run-time DLL. This is a valid concern both from a simple conceptual standpoint, as well as a more practical standpoint, as each attribute adds some overhead in terms of size to your run-time assembly.
While an in-depth discussion is outside the scope of this post, there is a way to segregate your design-time metadata from your run-time classes in the form of a .Design DLL. You can find some introductory information about creating and using design assemblies in Blend 3 on UnniR’s blog here and here.
Conclusion I hope that this blog series has provided a solid overview of the API and mechanics behind the new Behaviors feature in Blend 3. While you hopefully have a good understanding of the fundamentals now, we’ve barely scratched the surface of what can be done with this exciting pattern. I encourage you to check out the Expression Gallery to see what amazing things our community can come up with using Behaviors, as well as to watch this blog and others for more tips and tricks in the weeks and months to come!
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.
EDIT: Updated post to reflect an additional PM opening we have.
Jeremy Kuhne has written an article Liven Up Your Office Clip Art  which you can find by visiting the gallery of Expression Graphic Designer samples over on the right of the blog. Look for the box titled 'Article Categories' and then click Samples and Tutorials Gallery - Expression Graphic Designer Jan 06 CTP to take you to the gallery (or just click the link given above). Jeremy is an SDE/T (Software Design Engineer in Test) for Expression Graphic Designer.
We are pleased to present new CTPs of Expression Graphic Designer and Expression Interactive Designer that target Microsoft WinFX Runtime Components Beta 2--the latest release of WinFX.
Follow the links below to start downloading the May CTPs...
Remember, you will need to install WinFX Beta 2 first before installing Expression Interactive Designer May CTP.
Also, before installing the latest CTPs of WinFX and Expression Interactive Designer, please be sure to uninstall previous CTPs of these 2 products to prevent compatibility issues.
Found a bug? Report it to us.
Have something to say about the CTPs? Join a discussion group.
Originally it was the rather witty 'Flickr Browsr', although now an 'e' has crept back in to 'Browser'!
The Flicker Browser sample application which features in the recent Channel 9 video  is available for download from Amir Khella's blog  so please feel free to check it out.
You will need to get a free Flickr API key of your own and paste it in the file called FlickrKey.txt in order for the sample to run correctly. You can get a key from http://www.flickr.com/services/api/key.gne.
Thanks very much to Amir Khella (Program Manager on Expression) and Peter Blois (Software Design Engineer on Expression) for collaborating to produce this sample and showing great developer-designer workflow in the process.
A great site that covers designer-oriented Expression Blend topics is Celso Gomes’s Nibbles Tutorials site:
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.