The team blog of the Expression Blend and Design
People have been wondering how to do this so I thought I’d write up an explanation.
The HyperBar sample which ships with Blend Beta 1 has a fixed set of eleven images in it. But what if you want to combine the HyperBar effects with the flexibility of binding to data – be it XML data or CLR object data? The solution is to draw out a ListBox and bind your data to that. Then you edit the ListBox’s control template and place a HyperGrid panel in there as the items host. It’s the HyperGrid panel that does all the magic in the HyperBar sample. Here are the steps you’ll need to follow to get this to work, and then links to some files so you can study/copy the code in there.
// Clear the ColumnDefinitions and re-add one per child.
foreach (UIElement uie in InternalChildren)
protected override void OnInitialized(EventArgs e)
Now you’re done. Build and run. If you have any problems then you can study the following files to see if they differ from what you have. One final point is that the image files are still embedded in the project and the data.xaml refers to them as embedded resources. An exercise for the reader is to store these in a folder which the .exe reads at runtime.
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
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 :)
This webcast describes the powerful features and capabilities of Microsoft Expression Graphic Designer, Microsoft Expression Interactive Designer, and Microsoft Expression Web Designer, and includes a 40 minute demonstration of Expression Web Designer.
The first twenty minutes cover concepts of user experience, the .NET 3.0 and WPF (Windows Presentation Foundation) platforms and how they enable the next generation of user experience, and designer and developer collaboration using XAML (Extensible Application Markup Language). The discussion about Expression products and CSS begins around minute 21, and the Expression Web Designer demo begins around minute 27.
Register now to replay this session:
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:
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:
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:
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:
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!
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!
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, 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
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 :)
Hi everyone, If you have watched the BUILD keynotes and sessions, you may have seen some exciting things about Expression Blend’s support for Metro-style applications.
For all future news and updates concerning Expression Blend, please visit our new team blog called BlendInsider. The BlendInsider blog will provide you with the types of content you found here…and hopefully much more!
This blog will be kept around for archival purposes, but no new content will be added.
See you all “on the Inside!”
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
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.
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.
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
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.
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.
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!
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.
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.
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
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.