The team blog of the Expression Blend and Design
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.
ZAM 3D ™ from Electric Rain is a new 3D XAML Tool for Microsoft Windows Vista application development, and a CTP is available for download .
ZAM 3D fits into the designer-side workflow by complementing Microsoft Expression Interactive Designer. The idea is that a designer uses ZAM 3D to easily create 3D interface elements, models, controls, styles or layouts. Then the designer exports the 3D assets to XAML markup with a single click without any need to write, or even understand, the complex markup that goes into building a WPF 3D scene. Now the 3D assets are easily added to an Expression Interactive Designer project using the Project > Add Item... command.
You can see some stunning examples of ZAM 3D assets  in use in Windows Vista applications on Electric Rain's website.
After you buy and install any Expression program, you should immediately license your software to avoid future interruption of the programs. If you don’t license them, the programs will stop running after 60 days or possibly sooner if you have used a trial product key. When you start any unlicensed Expression program, a dialog box may prompt you to enter your product key to license the program. If you’ve closed that dialog without licensing your software or the dialog doesn’t appear, use the following steps to license your software instead:
· To license Expression Blend, Expression Design, or Expression Media, start the program, choose Help > Enter Product Key, and then enter your product key which appears on a sticker on your software box; if you bought Expression Studio, licensing just one of these programs will also license the other two.
· To license Expression Web, enter your product key when prompted during the installation process. If you installed Expression Web with a trial product key, you can license the installed trial program by doing the following: Close Expression Web and open your Control Panel in Windows. Double-click Programs and Features (Windows Vista) or Add or Remove Programs (Windows XP), select Microsoft Expression Web Trial in the list of installed programs, and click Change. In the installer dialog, select Convert and click Continue, and then follow the onscreen instructions to enter your product key.
As you all have probably seen by now, we released the release candidate of Expression Blend 3 + SketchFlow to coincide with the release of Silverlight 3 today. The previous post was just a short one letting you know about the release and where to download everything from. In this post, let’s actually go over in a bit more detail on some of the new features.
There are a lot of new features in Expression Blend 3, so this post will be split into two parts. If you want a more comprehensive overview of all new features now, please read our What’s New document.
SketchFlow With SketchFlow, Expression Blend 3 introduces a new set of features designed to make it easier for you to experiment with dynamic user experiences and to create compelling prototypes. Christian Schormann has blogged extensively about this, so please read the following posts for more information: SketchFlow Concepts: An Overview, Sketching and Prototyping in Expression Blend. More…
Design: Adobe PhotoShop and Adobe Illustrator Support You can use Expression Blend 3 to import both Adobe Photoshop (.psd) files and Adobe Illustrator (.ai) files directly into your projects, while retaining layers, shapes, text elements, and more for easy editing inside Expression Blend 3 itself. Janete Perez has more to share on her blog, sunnypixels: Introduction to Importing Photoshop Files, Photoshop Import- Supported Features, Photoshop Import – Merging Layers.
Design: Revamped Assets panel The Asset Library has been redesigned and made into a dockable panel that can remain open while you work on the artboard:
Assets are categorized for easier searching and organization. Beyond just the UI there have been some really nice under-the-hood changes, and Unni Ravindranathan summaries them in his post: The Blend 3 Asset Library.
Styling Controls: Creating templates from artwork You can use the modified Make Into Control command to select artwork on the artboard and to convert it into a skin (control template) for a control. Styling Controls: Creating TextBox Templates from Artwork If you use the Make Into Control command and choose either a TextBox control or anything derived from a ContentControl control, Expression Blend 3 will copy typographic properties from any TextBlock object that it finds (in the objects that you are converting) into the appropriate part in the resulting control template.
States: Improved Support for VSM Support for the Silverlight Visual State Manager (VSM) in Expression Blend 3 has been improved with a revised user interface for the States panel:
The new design and general improvements made allow you to pin various states, draw into state, preview transitions, and more. The full What’s New document contains more details.
Interactivity: Behaviors You can add interactivity to your application, without having to write code, by using behaviors. Behaviors are reusable components that can be directly applied to any object on the artboard, and they are composed of extensible triggers, extensible actions, and behaviors. There have been a lot of blogging on this from all of us, so you can read them all here: Blend 3 Behaviors: Interactivity Without Code, Behaviors : Making Interactivity Easy (and Fun!), Using Behaviors - A Quick Walkthrough, Blend 3: Triggers, Actions, and Behaviors, An Introduction to Behaviors, Triggers, and Actions, Blend 3 Behaviors: A Sample Action, Looking at Behaviors, the Class, Behaviors and Commands, Looking at Triggers and Actions, Behaviors: Writing your own Triggers, Behaviors Under the Hood – API Details and Constraining the Type, Pete’s Collection of Behaviors
Working with and Generating Data Expression Blend 3 makes it easy to prototype, build, and test data-connected applications without having access to live data. Unni is back with an overview of this feature along with a link to other blog posts he liked: Introducing sample data support in Blend 3, Blend 3 Databinding.
Last October I described how to use the States pane in a WPF project with Blend 2 Service Pack 1. Things are even simpler with Expression Blend 3 so in this post I’ll remind you how to use the States pane with WPF controls.
As you may know, when you create a template for a Silverlight control, the States pane populates with States ready for you to select-and-design. This is because Silverlight controls are designed to work with States, and each Silverlight control advertises the States it works with. But WPF shipped before States did and consequently WPF controls know nothing about States. It’s actually the magic in the WPF Toolkit that makes WPF controls work with States. Blend 3 installs the WPF Toolkit for you automatically, so there is nothing extra you will need to do.
This means that when you create a new template for a WPF control, the States pane is empty initially. But it only takes a few moments to add the correctly-named States and from there you’re on par with the Silverlight experience and you’re ready to select-and-design as usual.
So, here’s a list of the WPF controls that work with States along with the state groups and states you’ll need to add.
Button, GridViewColumnHeader, RepeatButton
CommonStates: Normal, MouseOver, Pressed, Disabled FocusStates: Unfocused, Focused
Normal, MouseOver, Pressed, Disabled
CommonStates: Normal, MouseOver, Pressed, Disabled CheckStates: Unchecked, Checked, Indeterminate FocusStates: Unfocused, Focused
Unchecked, Checked, Indeterminate
CommonStates: Normal, MouseOver SelectionStates: Unselected, Selected
FocusStates: Unfocused, Focused
CommonStates: Determinate, Indeterminate FocusStates: Unfocused, Focused
CommonStates: Normal, MouseOver, Disabled, ReadOnly FocusStates: Unfocused, Focused
Normal, MouseOver, Disabled, ReadOnly
Hopefully this helps you to be more productive in WPF when working with states!
In my previous post, I mentioned that most of the samples from previous versions of Expression Blend have been uploaded to our gallery. One thing that is common with all of the samples is that Celso Gomes had a hand in making them.
Recently, Celso started deconstructing how many of the samples work at his site: http://www.nibblestutorials.net:
Go check out Celso’s site if you are interested in learning more about how these samples work.
Cheers! Kirupa :)
Hi everyone, As you all may know, both Silverlight 3 and WPF 3.5 SP1 introduced support for effects and shaders. One of the features that I work on in Expression Blend is to make sure that you can use these custom effects easily.
Beyond just writing the functionality for making the effects work inside Blend, I enjoy writing custom effects as well, so in this post let me show you an example of a hatching shader effect I created.
Here is a small example containing some shapes and an image:
The same example, with my hatching shader effect applied, looks as follows:
This effect is quite versatile in when and where you can apply it. For example, let’s say I have SketchFlow application that looks like the following screenshot:
By just applying this shader effect, you can go from what you see above to something that looks even more prototype-ish:
You can read more about this shader effect on my blog post that goes into greater detail on this here: http://digitalepiphania.com/blog/2009/07/01/hatching-effect-for-silverlight-3-and-wpf-35-sp1/
For playing with this on your own, you can get the installer for this from the following location: http://digitalepiphania.com/Downloads/HatchingEffectSetup.msi
What are these things – are they different ways of doing the same task? When would I use one in preference to another? Do they all work in all project types?
This post will try to answer those questions by describing the animation and control customization tools that are available to you in Expression Blend 3 + SketchFlow, and discussing what jobs each tool is meant to do. I’ll be classifying project types along two independent axes: WPF or Silverlight, and Blend or SketchFlow.
In the first release of Blend, if you wanted to change the value of a property over time, then the Storyboard was your one option. Using a Storyboard is also known as ‘keyframing’. You create a new Storyboard (or create a BeginStoryboardAction and let that workflow create a Storyboard for you), move the playhead to various times and then use the artboard or the property inspector to change values. Each time you change a value, a keyframe is added to Blend’s Timeline meaning that, at that time, the property has that value. During the interval between keyframes, the property value smoothly takes on intermediate values in a process known as interpolation. By default, the interpolation between two values is linear, meaning the value changes steadily as time passes to form a straight gradient on a graph. And you can control interpolation between keyframes by describing an easing curve. Whether you were changing the Y coordinate of a bouncing ball, or changing the color of a rectangle in a Button template in response to a mouse click, in the first release of Blend you would have used a Storyboard to do it. Something you would have known about, too, is a handoff animation. This is an animation that has no keyframe at time 0 so that, when the Storyboard begins, property values are snapshotted and gradually changed to the value of the earliest keyframe. Handoff animations are important when defining the transition into a control state because you need the animation to be continuous even when it is interrupting an already in-flight transition (say you move the mouse over and then away from a control before the transition into the mouseover state completes).
Storyboards are available in all project types. They’re just as useful today as ever, and they are worth learning how to use, because at some point you’ll probably need to use them. They give you the most control over animation, but control can come at the cost of some effort.
For the task of customizing the look and transitions of a control’s visual states, there’s an alternative and arguably simpler mental model than using a Storyboard to define the transition into a state. The simpler mental model is that you draw the control in each of its states then, if it’s important to you, specify how long any of the transitions take. I say ‘draw’ because that’s morally what you’re doing; strictly speaking you select a state in Blend’s States panel, set properties, select another state, and so on, but you’re drafting a static image of how the control looks in each state. You needn’t be concerned with animation, although it’s interesting to note that the runtime that supports this mental model (that runtime is known as the Visual State Manager, or VSM for short) does generate a handoff animation for each state transition. For practical purposes, drawing states and setting transition durations like this gets the job done much of the time without needing to see Blend’s Timeline at all. But, if you need a steady state animation (say you want the blue focus rectangle to pulse all the time a control is focused), then yes you’ll need to open the Timeline and drop a couple of keyframes and set the animation to repeat indefinitely. Or if you want a shiny reflection to flash across a glass button during the transition from Normal to MouseOver, then again you’ll need to know what a Storyboard is.
Of course you can leverage the Visual State Manager in your own UserControls too. This is because states can apply at the level of the individual control (e.g. in the MouseOver state a Brush is a different color) as well as at the level of a page or scene (e.g. in the ShoppingCartOpen state an otherwise hidden panel is visible). So, you can add states to one of your UserControls that represents a page or scene, set different properties in different states, then use GoToStateActions to drive state changes in response to events.
The Visual State Manager is fully integrated into Blend Silverlight projects and SketchFlow Silverlight projects. You can also use VSM in WPF projects although, while the UserControl experience is the same as for Siverlight, not all WPF custom controls support VSM. I’ve written previously about the States panel and WPF controls.
The last tool I’ll mention is the SketchFlow Animation, and this tool is available in SketchFlow projects only, both WPF and Silverlight. A SketchFlow Animation is logically a ‘storyboard’ in the true sense of the word: a sequence of frames that tells a story. When you’re building a prototype, you don’t want to implement a feature fully in order to demonstrate it. Playing back a scripted example of the interaction you have in mind gets the job done at the prototyping stage. So if you want to show off how you imagine your application will reorganize and animate in response to the user dragging a product into the shopping cart, you could create a new SketchFlow animation and then draw a few frames showing how the product gets dragged between containers and how the layout of those containers responds, and even specify the easing between frames.
For those who like to know how things work under the hood, a SketchFlow Animation is represented internally as a VSM state group. But you don’t need to be familiar with VSM to use a SketchFlow Animation. Nor do you need to be aware of what a Storyboard is, nor be able to use Blend’s Timeline. In a sense, each frame (or state) in a SketchFlow Animation is a keyframe, but at a macro level so that each keyframe defines the entire scene at a point in time rather than the micro keyframes in a Storyboard that define a single property’s value at a point in time.
Now that you have an idea of what these different pieces do, and when they’re available, you’ll be able to pick the most efficient tool for each animation job you want to do.
If you haven’t had a chance to check out the sessions from MIX10 that showcased Expression Blend 4, the links below should help you out:
Authoring for Windows Phone, Silverlight 4 and WPF 4 with Expression Blend by Christian Schormann and Pete Blois
Dynamic Layout and Transitions for Microsoft Silverlight 4 with Microsoft Expression Blend by Kenny Young
Prototyping Rich Microsoft Silverlight Applications with Expression SketchFlow by Chris Bernard
This post only focuses on the sessions from MIX that are Expression Blend specific. By now, all of the sessions from MIX should be available online, so head over to the MIX Sessions page to view more: http://live.visitmix.com/Sessions
Cheers, Kirupa =)
It’s been a while since the last article where I promised to write about all of the behaviors that ship with Expression Blend in greater detail. I’ll try to be more prompt in the future. Today, let’s look at the ControlStoryboardAction and the StoryboardCompletedTrigger.
Storyboards are one of the primary ways you create animations in Silverlight, WPF, and Windows Phone using Expression Blend. Creating a storyboard is fairly easy, but actually using a storyboard such as having it play is not. To help with this, you have the ControlStoryboardAction.
Simply put, the ControlStoryboardAction is an Action that allows you to select a storyboard and specify what you would like to do to it:
Let’s look at some of the properties it contains in greater detail.
When it comes to this behavior, there are only two properties that you need to concern yourself with. They are the ControlStoryboardOption and Storyboard properties.
The ControlStoryboardOption property lists the tasks you would like to perform:
From here you can choose whether you want to play a storyboard, stop it, toggle between play/pause, pause, resume, or jump to the end.
The only missing piece so far is knowing which storyboard to affect. Not to worry, because you specify the storyboard using the aptly named Storyboard property:
This property will list all of the Storyboards your behavior has access to. Once you have selected a Storyboard, you are done!
Another little behavior component we have is the StoryboardCompletedTrigger:
This trigger invokes an Action when a specified storyboard (set via the Storyboard property) has fully run to completion. Of course, because it is a trigger, you can use it with any Action.
Creating great looking and functioning applications is tough. It requires having a good eye for design, but it also requires some technical knowledge about how to make the design functional.
As you can probably guess, it is our goal to help you use Expression Blend, Visual Studio, and our related tools to create those great applications. We spend a great deal of time adding new features and making existing features better to help you do just that. Making improvements to the applications is only one side of how we try to help you create great applications, however.
The other side involves helping you better understand how to actually create great applications, and we try our best to provide some valuable training resources. Some notable shoutouts include the .toolbox and the Expression Community sites. While looking at videos or reading tutorials is useful, we wanted to go further and also provide you with a library of xaml+code samples that showcase something small, something specific, something cool. We felt that, in many cases, simply being able to deconstruct how something was done can be equally (if not more useful) in learning how to do something.
This library of xaml+code snippets, known better by its friends and family as the Pattern Library, lives as an extension to the Expression Gallery:
You can learn more about the Pattern Library by reading Lars Power’s newsletter article introducing it.
Please feel free to download and play with the patterns. If there is something you feel is missing, please feel to let us know or just create it yourself and upload it.
Cheers, Kirupa =)
We released important news today about the Expression family of products. Please visit the Expression Community site for details.
As you can imagine, shortly after a major release like we had, most of us shift our focus slightly towards talking about and sharing how to use some of the cool new features we released. In this first of a two-part series, I hope to make up for the long period of inactivity on this blog by sharing two Windows Phone focused videos that Unni, Billy, and I recorded for Channel 9.
Overview of Expression Blend for Windows Phone 7 The first video on this list is one that walks you through, at a breakneck speed, most of the new features we added to Expression Blend to help make building Windows Phone 7 apps easier:
Through the guise of building a Bing Search application, I cover features ranging from our Device Panel to Application Bar support to creating Sample Data from a Class file. You can learn more about these features by looking at some of my more in-depth Windows Phone 7-focused articles.
Windows Phone Design Templates Billy and Unni are up next to showcase some of the templates they created to make creating common Windows Phone 7 UI layouts really easy:
The templates they created cover a wide range of common UIs that you will see, so feel free to use these directly in your own projects or simply as a source of inspiration. Before you can do any of that, of course, download the templates from codeplex first.
As always, if you have any questions, feel free to comment below. If you recorded some interesting videos, post them in the comments as well.
Cheers, Kirupa =)
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, As many of you may have noticed, our new release of Deep Zoom Composer contains a lot of new features. Unfortunately, due to time constraints, we did not have time to adequately update our documentation to explain how all of these new features work.
To help with this, fellow Blender and officemate, Janete Perez has written a few blog posts with some really nice Deep Zoom examples (static screenshots only posted below) highlighting some of our new features:
So be sure to click on the above links to see them. We hope to have a version of Deep Zoom Composer with the updated documentation available soon, though it will not be in our next release.
Cheers! Kirupa =)
Evgeny is back with a great blog post describing some cool features related to the new Sample Data feature we introduced in Expression Blend 3.
Visit his blog post to go read it: http://etvorun.spaces.live.com/blog/cns!6054141F335D00D3!130.entry
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. When drawing, the parenting rules are different. If a container element is selected and the mouse down gesture of the draw happens inside its bounds, then the selected container becomes the parent. Otherwise the activated element becomes the parent.
That covers how new elements are parented. But what about dragging an existing element to another parent? In Windows Forms, when you drag an element to a new location the design surface re-parents the element inside the front-most container at the mouse pointer. Expression Interactive Designer doesn't assume that you wish to re-parent an element when you drag it to a new position. This is mainly due to (partially) transparent elements. I may want to drag an element from one cell of a Grid to another cell which happens to be behind part of a Canvas with an opacity mask. In this case I don't want to have my element re-parented just because the Canvas is in front of the Grid, and EID leaves the element under its current parent (at the new position) unless I indicate otherwise. Whenever I drag an element into the boundary of a candidate parent container, EID offers the tip: Alt-drag to place into [container_type]. Only if I hold down ALT while completing the drag is the element re-parented.
Hi, we’re glad to have you visit the Expression team’s blog - we hope you’ll like the resources and information you find here and we hope you’ll return often to see what’s new.
This introductory post will talk about what the Expression family of products is. It will also talk about the blog itself, what it’s for, and what kinds of things you can expect to find here over the coming months.
So, first, what is Expression? Microsoft Expression is a suite consisting of three products each intended for use mainly by the professional designer community. Expression Graphic Designer is a visual arts package equally at home with vector or with bitmap graphics. Expression Interactive Designer gives interaction designers the environment in which to build Windows applications for the Windows Presentation Foundation platform - in other words, to build the new Vista-wave generation of Windows user experiences. Expression Web Designer is the product which offers all the tools you’ll need to produce high-quality, standards-based Web sites.
For lots more information, videos and downloads about Expression, please see the Microsoft Expression product website.
Now, about the blog. The blog’s scope embraces all three Expression products so there will be a great diversity of resources to be found here, all brought together with the intention of being of interest to designers and to the designer sensibility. Although we expect professional designers to be our main audience, if you’re a design dilettante or a Windows or Web developer, please feel free to dive in and experience and enjoy Expression too!
In the Article Categories section of the blog, you will find up-to-date directories of sample applications, tutorials and visual artwork. As the names indicate, these samples are targeted at particular pre-release or Community Technology Preview (CTP) versions of the Expression products.
In the same section there are also articles which contain the ‘readme’ files for particular pre-release or CTP versions of the Expression products.
The types of blog posts you can expect to see include these:
- the Expression team
We thought it was worth calling out this item as it may be an issue some of you encounter.
If you are trying to test build a project (Project | Test Project) immediately after installing WinFX and Expression Interactive Designer, but Expression Interactive Designer was never launched before, your build attempt might fail with the following message: “Error MC1000: Unknown build error”. If this occurs, you will need to close Expression Interactive Designer and launch it again.
Quite painless, hopefully, but worth knowing.