The team blog of the Expression Blend and Design
In this tutorial, you will process an ADO.NET DataTable into an ObservableCollection ready to be bound to controls within Expression Interactive Designer. The first task requires Visual Studio 2005 and SQL Server 2005 (with the AdventureWorks sample database installed). If you prefer, you can fill an ADO.NET DataTable or DataSet from another source. If you do so then please skip the first task and then adapt the remainder of the tutorial to suit the shape of the data you have. The principles will be exactly the same.
Also remember that there are several tutorials in the Article Categories section over on the lower right of the blog. For other tutorials targeting the Expression Interactive Designer Jan 06 CTP, please see the Samples and Tutorials Gallery  for that product. It's recommended that you begin with the Fabrikam Catalog series of tutorials as these provide the basics on which the other tutorials build.
This is to announce that Karsten has a blog post (authored by Andrew Whiddet) on the subject of asynchronous data binding . It's likely to be of interest to you if you're a software developer or you're a designer with a developer sensibility. It's relevant to our previous post about the AdventureWorks Product Photos  sample and tutorial which loads data from a database into a collection ready for data binding inside Expression Interactive Designer. Typically, data access is expensive in time, so a good pattern is to keep the user-interface responsive whilst the data loads in the background as the post discusses.
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:
Expression Design is a vector based graphics design tool that is part of Expression Studio. It is targeted at graphic designers who need to build visual assets for new WPF (Windows Presentation Foundation) applications. The goal of Exrpession Design is to bring artists into the process of building great user experiences. We've been getting feedback on CTPs for a while now under the codenames of Acrylic and Expression Graphic Designer. Now we have a shiny new name and a brand new interface.
Back in 2005, we released a preview of Acrylic, a graphics design program based off the venerable vector tool Creature House Expression. As the months passed, we realized that the UI just wasn’t clicking with our audience. The whole Expression suite is about bringing elegant and beautiful design to the process of application development. So why not create a UI that embodied our team’s core principles?
After many moons (and numerous late night dinners by our rock star team), we now have a stylish UI running in WPF on top of our C++ artboard. Stylistically, the UI matches Expression Blend so you’ll be comfortable in both applications. For now it comes in a soulful dark gray, but there is also a light theme in the works for all those folks that like a dash of sunshine in their lives. We still have quite a bit of polishing to do, but the foundation is in place. This is mad scientist stuff. I like working with mad scientists.
I’m a big believer that a good product is a collection of a lot of little things done right. This only happens when you ask good questions and get a ton of rapid feedback from your actual users. Taking this feedback philosophy to the extreme, we hired some very talented graphic designers to be part of our team. They slogged through our daily builds and attended the feature design meetings. When stupid decisions were made, they yelled. Along the way, the programmers listened and fixed hundreds of subtle workflow issues.
Expression Design has a long life ahead of it and we wanted designers to be part of the development process (and culture!) from the very beginning.
This release has dozens of small workflow improvements that add up to a much nicer experience. You can find the big list here:http://www.microsoft.com/products/expression/en/expression-design/free-trial-faq.mspx
Here are some of my personal favorites.
· Fewer palettes: I’m constantly switching between various applications, which means inevitable resizing of the app. I must admit I tend to get a bit retentive when it comes to keeping my palettes so I waste a surprising amount of time lining the half dozen palettes straight again. With fewer palettes that you can dock with a click of a button, this isn’t an issue any longer.
· The color dropper on the color palette: When you select this color dropper you can pick a color anywhere on the screen, even if it is outside the current application. Quite the time saver.
· Pen tool: The Bezier pen tool is a subtle instrument. Most designers I know play the modifier keys like a piano when they are drawing vector shapes. Half the time, when you ask “What steps are you performing?” they honestly can’t say. It is all muscle memory stored up from years in the pit of production. But if you put change how the tool works, it is immediately obvious. The feel is wrong. We spent a lot of time getting the feel of our pen tool right.
· Updated XAML exporter: This is really the heart of why you would use Expression Design right now. It is currently the best way to get complex graphics into Expression Blend.
You can grab the December CTP of Expression Design here: http://www.microsoft.com/products/expression/en/expression-design/free-trial.mspx
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.
In Blend you can author keyframes with ease out and ease in interpolation to give your animations acceleration and deceleration: in other words, life. You can also draw a motion path and animate an element along it. A value curve is a graph of the change in a property value over time, and the combination of different value curves for different properties allows fine control over advanced scenarios such as acceleration along a curved trajectory.
The previous post Keyframe easing and key splines explains the string of numbers in a XAML KeySpline attribute such as those generated by Blend’s ease out and ease in settings. In a nutshell, the numbers are one keyframe’s worth of control points on a value curve. You can draw a value curve in Blend using the Pen tool and if you associate that curve with an element, a double property, and scales for the axes, then it’s a simple task to generate a set of keyframes and key splines. There are some scenarios where doing this is more appropriate than using Blend’s timeline so here’s a sample application which will get you started. The sample is unsupported but it is offered in the hope that it will be useful, instructive, or interesting.
Download the ValueCurve2KeySplines source code (Blend Beta 1).
Once you’ve downloaded and unzipped the sample project files, open and test (F5) the application. After building, the message on the artboard will disappear and the scene will display correctly. In the running application you can see three different-colored value curves, each of which targets a different property of the red plus sign-shaped element. When you click the ‘Generate’ button, an animation is generated from each of the value curves and these animations are saved in XAML format into the build folder in a file named Storyboard.xaml. The animations are also inserted into the application and previewed. The animation generated from the value curves included in the sample resembles an object spring-mounted on a surface and set in motion with a twang. If you’d like to know how the value curves and parameters were assembled then you can recreate it with the following procedure.
First, you need to delete the value curves and parameters so you can recreate them. Expand LayoutRoot > Graph > ValueCurves and delete the Path elements named X, Y and Angle. Expand LayoutRoot > LegendBd > [StackPanel] > LegendLB and delete the ValueCurveParameters elements named XParms, YParms and AngleParms. On the artboard you’ll notice that the Legend list box is now empty. Running and clicking ‘Generate’ now will have no effect.
The ‘spring twang’ animation happens over a small area and time period so let’s scale everything up while we’re designing it and then we can set the correct scale later without having to change any curves. Find the TextBlock element LayoutRoot > Graph > Axes > TimeAxis > TimeMax and set the Text property to ‘10’ so that the animation has a duration of ten seconds.
To recreate the value curve which controls the element’s X coordinate, first double-click ValueCurves to activate it; the yellow border confirms the activated state. Click the Pen tool (or press P) and draw a curve like the one in the diagram:
Make the first point with a click-drag toward the top-right of the screen to set the control point in that direction. Click-drag to the right to draw each of the subsequent points which will set horizontal tangents at the same time. In the previous post I mentioned that it is not valid for a control point to fall outside the bounding box of the spline which owns it. But some of the tangents shown above (and likely some of the tangents you will draw) are not perfectly horizontal so the control point on one end of the tangent will be breaking the rule. The ValueCurve2KeySplines sample will silently tolerate such errors up to a configurable limit (by default, 5% of the corresponding side-length of the bounding box) and will correct the control point. Any error greater than this tolerance will still be corrected but will provoke a warning message when the ‘Generate’ button is clicked. If you don’t want any automatic correction to take place then set the Window1.controlPointWarningTolerance member to zero and correct your control points manually until no warning message is shown. You can manipulate the control points individually with ALT and the Direct Selection tool (A). In the object tree, name the Path ‘X’ and set its Stroke to DarkSeaGreen and its Fill to No brush.
Now the value curve needs parameters so you need to create a parameter object which refers by name to the Path element representing the value curve. Make sure the ListBox named LegendLB is visible in the object tree. Click the Asset Library tool (the bottom tool in the Toolbox), click User Controls, and drag ValueCurveParameters out of the library. Be aware that the Asset Library will close as soon as your drag begins, but keep the mouse button pressed and drop the object onto LegendLB in the object tree to create a new ValueCurveParameters item in the ListBox. Name the object ‘XParms’ and then, in the Property Inspector, expand the Miscellaneous category and set the following property values: MaxValue = 350, MinValue = 50, set PathBrush to a SolidColorBrush with the Color DarkSeaGreen, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children).(TranslateTransform.X)’, and ValueCurveName = ‘X’. An easy way to determine the TargetProperty and to make sure any necessary property elements exist on the target element is to create a new timeline and animate that property. You can copy the correct property path from the Storyboard.TargetProperty attribute in the XAML. Then you can delete the timeline and the necessary property elements will remain on the element.
For the element’s Y coordinate, draw a similar curve to the first but out of phase with it. Name the curve ‘Y’ and color it Navy with no Fill. Add a second parameter object (named ‘YParms’) to the ListBox and set the following property values: MaxValue = 350, MinValue = 50, PathBrush = ‘Navy’, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children).(TranslateTransform.Y)’, and ValueCurveName = ‘Y’.
Finally, for the element’s angle, draw a third curve out of phase with the other two. Name the curve ‘Angle’ and color it Orange with no Fill. Add a third parameter object (named ‘AngleParms’) to the ListBox and set the following property values: MaxValue = 30, MinValue = -30, PathBrush = ‘Orange’, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children).(RotateTransform.Angle)’, and ValueCurveName = ‘Angle’.
The finished application should look similar to this:
Test the animation and make any adjustments to the value curves to get the behavior you want. Essentially the frequency should be increasing while the amplitude is decreasing. When you’re happy, scale the whole animation down. Set TimeMax to ‘1.5’, set the MinValue and MaxValue of the X and Y parameter objects to 220 and 230 respectively, and set the MinValue and MaxValue of the Angle parameter object to -20 and 20 respectively. Now test the animation again. If you want to use the animation in another application then make sure a target element with the correct name and property elements exist and paste the contents of Storyboard.xaml into Window.Resources. You’ll also have to change the xmlns attribute into an x:Key attribute.
For another example set of value curves and parameters, you’ll find a file called Example2.txt in the zip file along with the source code. Replace the ValueCurves and LegendLB element in Window1.xaml with the ones in Example2.txt and give the result a try. It’s an example of an element moving along a circular path with increasing speed.
Expression Design Users,
If you have tried to use Expression Design after December 31st, 2006 you have no doubt found that the product is not working. This was caused by an unfortunate time-related bug in the code that somehow escaped our rigorous testing.
I very much regret that this has happened and I hope you will accept my apology. We appreciate the time and effort that you take when testing our products and especially the feedback that you give us -- whether positive or negative.
You should expect a fix for this problem to be posted no later than end of day tomorrow (January 3rd,) or possibly sooner.
Once again, myself and the Expression Team regret this unfortunate problem.
Douglas K. OlsonProduct General Manager Microsoft
An updated version of the Expression Design December CTP is now available that no longer expires at the beginning of 2007. This should let you start testing again with hopefully a minimal interruption. The team appreciates all the great feedback we've been hearing and many of us have taken to reading the news groups daily in order to catch up on the latest issues.
You can download the updated CTP here:http://www.microsoft.com/products/expression/en/expression-design/free-trial.mspx
Today we are going public with beta 1 of Expression Blend, and a new CTP for Expression Design. Before you ask – these are the new product names for what previously was known as Expression Interactive Designer and Expression Graphic Designer.
Much more importantly, these new versions are not just about new names. If you have seen the previous evolutions of these Expression applications, a single look will show you that we've been working hard on more than new features:
Expression Blend and Design are the first Expression applications to show off a new user interface design for the entire Expression product line. We want to offer friendlier, easier, more elegant and beautiful tools to enable designers to build great user experiences – and our UX is a big step in this journey.
We can’t wait for you to give our new family a spin and to let us know what you think.
Software Test Engineer, Dante Gagne, takes us through a tutorial of how to bind media to playback controls in Expression Interactive Designer.
For more tips and tricks like this, check out Dante's blog.
After you've completed Dante's tutorial, try using Expression Graphic Designer to style your PlayPause button just like the cool new gel buttons in Windows Media Player 11 Beta.
Martin Grayson also has a 3-part tutorial on making Vista-like gel buttons using WPF.
Hello,The Microsoft Expression Blend Program Management team is currently working on planning features for future versions of Expression Blend. We encourage all newsgroup participants to take our Blend 1.0 Survey and send us your feedback. All participants will be eligible to enter a drawing to win a free Zune!The deadline for submitting a survey response is Tuesday, April 3, 2007.
The Blend Connect homepage is:
Survey Link: https://connect.microsoft.com/Survey/Survey.aspx?SurveyID=3761&SiteID=32
(Note: Make sure to be signed into Connect by clicking on the "Sign in" button on the top right.)The survey contains various areas, feel free to provide feedback on the areas you feel most relevant to your experience with Blend.
Two new tutorials for Expression Design have been added to the Samples and Tutorials Gallery - Expression Design section. Follow the step by step instructions and learn how easy it is to Blend Photos and Remove Backgrounds from Photos.
You can download a 60 day trial version of Expression Design from the Expression web site. Need help with Expression Design? Consider joining our Expression Design discussion group.
The Expression team has become aware of a problem with the Visual Studio 2005 Standard DVD included in the packaging of the Expression Blend and Expression Studio products (specifically, setup repeatedly prompts for the DVD). Please accept our sincere apologies for our mistake and, if you're affected by this issue, here is a temporary remedial solution. We will follow up this post with a more official solution very soon.
To work around the issue:
1. Create a new folder on a hard drive on your system that has at least 3 GB of free space. Name the folder "VS2005STD" without the quotes.
2. Open a command prompt by clicking on the Start button, click Run and type "Cmd" (without the quotes), and then click OK.
3. Type the drive letter of the source drive. For example, if the DVD-ROM drive is drive R, type "R:" (without the quotation marks). Press ENTER.
4. With the DVD disc in the drive, type the following command:
XCopy *.* X:\VS2005STD\ /h /v /s
where X: is the drive letter where you created the folder in Step 1.
7. Press ENTER.
8. Once the file copy is finished, close the CMD window and navigate to the VS2005STD folder you created and then to the VS subfolder. Double click Setup.exe to start the installation.
Note: The folder you created in Step 1 can be deleted after the installation is complete.
Again, we apologize for any inconvenience and we will get back to you very soon with an improved solution. If you have any further questions/comments please use the Expression Blend public newsgroup: http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.interactivedesigner&lang=en&cr=US
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
We're pleased to present the second Beta version of Expression Blend. Here are some of the changes since the Beta 1:
Download Microsoft Expression Blend beta
The availability of the first Release Candidate of Blend is an exciting milestone that takes us another step closer to shipping. With an updated User Guide, a host of quality improvements, and a shiny all-new set of impressive and informative samples, the RC is available now on the Expression Web Site .
The Samples and Tutorials for Expression Blend have been updated with the following changes:
The company X-Coders has launched two new websites - ExpressionBlend.com and ResourceDictionary.com - each carrying information, blogs, videos, forums and downloads related to Expression Blend.
The videos are great - we recommend you go and check them out.
We are pleased to announce that the Beta 1 release of Expression Web (formerly Expression Web Designer) is now available! For more insight into Expression Web Beta 1, please see the Expression Web team blog.
Additionally, September CTPs of Expression Graphic Designer and Expression Interactive Designer are available and target the Release Candidate 1 (RC1) of .NET Framework 3.0.
Found a bug? Report it to us.
Have something to say about the Betas and CTPs? Join a discussion group:
Unni Ravindranathan , Program Manager on Expression Interactive Designer, has an article published on Coding4Fun  called Designing FreeCell using Expression and Visual Studio Toolsets . In the article Unni tells how he re-created the game FreeCell using the January CTP of Expression Interactive Designer and Visual Studio 2005 Express and he describes his experiences on the brief one-day journey and how much fun it turned out to be.
If you're a parent or an educator (or even a kid!) then, while you're looking at the Coding4Fun website, you might be interested in the Kids' Programming Language 
Steve White, Technical Writer, EID
Microsoft Expression Interactive Designer (EID) is largely about creating and editing trees of user-interface elements. When you use the double-click gesture in the Library palette (View > Library) to create a new element, Interactive Designer needs to know into which container in the tree to put the new element. So we have this idea of the 'active' or 'activated' container which refers to an existing container which will become the parent of the new element. Only one container in the tree can be activated at any time. By the way, I use the term 'activated' because the container in question is in a particular state, ready to receive the new element. 'Active' implies the container is somehow going to do something whereas in fact its state is passive. Either term is ok to use and they refer to the same idea.
So, how do you set a container to be activated and how do you identify the currently activated container? I would recommend that you go to the element tree (in the Timeline palette - View > Timeline) and expand the tree until you find the container you want to activate. Then double-click the container and note that it now appears in both the element tree and on the artboard with a yellow highlighted border. It's the highlighted border which shows which container is activated.
Now, when you double-click an element type from the Library palette (View > Library), EID will create the new element and nest it as a child of the activated container. If the activated container is one which may have only one child, and that container already has a child, then your double-click-to-create gesture will replace the previous child (and all its children, if any). This is sometimes what you want, other times it may be an indication that the activated container was not the one you intended. Always check for the yellow highlighted border before double-clicking from the Library palette.
The other way to create a new element is to select the element type in the Library palette and then draw it onto the artboard. EID will place the new element as a child of the container most appropriate to the location in which you are drawing.