Welcome to MSDN Blogs Sign in | Join | Help

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.

Steve

As you probably know, Silverlight and WPF have a runtime piece called the Visual State Manager (or VSM for short). As I’ll describe in this post, VSM and the Expression Blend tooling support for VSM lend a nice clean mental model to the business of visual states and visual state changes for both custom controls and UserControls.

Although chronologically the story begins with the control author, I’ll talk about that aspect later in this post simply because there are more people in the world concerned with the visual stuff than with the logical stuff. The visual aspect begins in Blend, with a set of already-defined visual states organized into groups in the States panel.

You can identify three stages in the design of visual states and transitions. First, the static stage. Here you make each visual state look the way you want it to, and you do so ideally without any thought of transitions. You select a state in the States panel and you change object properties. And speaking of the States panel, this is probably a good time to introduce the idea of state groups.

Visual states are grouped in such a way that a) the states within a state group are mutually exclusive of one another and b) the states contained in any group are independent of the states contained in any other group. This means that one, and any one, state from every group can be applied at the same time without conflict. An example is a check box where the checked states are independent of, and orthogonal to, the mouse states. Changing an object’s property in more than one state within the same group is common practice. For example, you might change a Rectangle’s Fill to different colors in MouseOver, Pressed and Disabled. This works because only one state from the CommonStates state group is ever applied at a time. But changing an object’s property in more than one state group breaks the independent nature of the state groups and leads to conflicts where more than one state is trying to set the same object’s property at the same time. Blend will display a warning icon (with a tooltip containing details) next to any affected state group whenever this conflict situation is detected.

Each state group should contain a state that represents the default state for that group. CommonStates has ‘Normal’, CheckedStates has ‘Unchecked’, and so on. It is a good (and efficient) practice to set objects’ properties in Base such that no changes have to be made in any ‘default’ state. So, for example, you would hide a check box’s check glyph and focus rectangle in Base and then show them in Checked and Focused respectively.

So now you can click through the states to confirm that each looks correct. You can build and run, and test your states, and you might even stop at this stage if you’re happy that the control switches instantly from one state to another. But if instant state switches are not what you want then you can breathe life into your transitions in stage two, the transitions stage. First, add any transitions you want to see, then set transition durations and easing on them, still in the States panel. And again, in very many cases this will be enough for your scenario. What’s interesting for those designers who can stop at this point is that there was no need to open the Timeline and no need to be bothered with the attendant concepts of what a Storyboard is, etc. To keep unnecessary concepts and UI out of your face, by default Blend keeps the Timeline closed when you select a visual state or edit a transition duration. You can of course open it at any time with the Show Timeline button.

Still in the transitions stage, there may be times when you need a property’s value to change during the transition from StateA to StateB but, because of the way StateA and StateB are defined, the property either doesn’t change or doesn’t pass through the desired value. In this case you need to customize that transition. Select the transition and then use the Timeline as normal to define the animations that should take place during the transition.

The last stage is dynamic states. If, for example, you want a blue rectangle to subtly pulse while a control has focus then you need a steady-state animation. I also call them ‘in-state animations’ because the animation happens while you’re ‘in a state’. To do this, just select the state, open the Timeline, and go ahead and keyframe as usual, possibly also selecting the Storyboard and setting repeat behavior and auto reverse.

Now let’s move onto the topic of how states relate to control authoring. Before a designer can begin deciding what states and transitions look like, the control author must decide what states exist. As a control author, your job is not to think about visual states, but logical states. Forget what it looks like; what does it mean? You need to consider all the ways the end user (and possibly other factors such as invalid data) can interact with the control, and from that thinking build out a set of candidate states; and the states are logical at this point because they have no ‘look’. Now’s the time to think about whether your candidate states need factoring. Look for islands of states: closed graphs that don’t link to other states. There are two kinds: orthogonal and nested. Orthogonal islands should be put in their own state group. An example is that of CheckedStates and FocusedStates. There are no transitions between a CheckedStates state and a FocusedStates state, and a control is either checked or not, and focused or not, and there is no dependency between those two aspects. Islands that should be nested have the characteristics that there are no transitions between a StateGroupA state and a StateGroupB state, and the states in StateGroupB are only effective for one state in StateGroupA. For example if StateGroupA contains LoginPageHidden and LoginPageShown, and StateGroupB contains LoginNormal and LoginError, then it’s clear that StateGroupB is only effective during StateGroupA.LoginPageShown. In this case the two state groups are not orthogonal so you may choose not to use state groups. An alternative, and arguably cleaner, design would be to put StateGroupA at one level of hierarchy with StateGroupB defined on a nested control. Another point to bear in mind, related to naming states, is that each state name must be unique for a control type, even across state groups.

When a control initializes, it first has to get itself onto the state graph. This is important. If a control doesn’t do this then it is still in Base after initialization. Base is not a state; it merely represents the control with its local (or ‘base’) property values set, with no states applied. When the mouse pointer first moves over this control it will go to MouseOver but it will go there from Base, so the Normal -> MouseOver transition will not run the first time. This is a subtle bug that the consumer of your control cannot fix by defining Base -> MouseOver, because Base is not a state. So when you author your own templated control or UserControl, you should define a ‘default’ state in each state group. Have the control go to those ‘default’ states when it initializes, and do so with transitions suppressed so that it happens without delay. Once it’s on the state graph, the control is ready for state transitions to occur so now you can implement the event-handlers that trigger the transitions within the state graph.

I hope this post has been useful and has helped clarify some of the less obvious aspects of designing and authoring controls to work well with the Visual State Manager. If you want to see a walkthrough of some of the ideas presented here, you could try my Button styling video.

-Steve

Hello!

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!

image 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

We’ve published eleven new articles on the blog and they all contain information and tips that you’ll find useful when styling common Silverlight 3 controls. First there’s an article with some general tips: it discusses template binding, different ways of binding Content in your template, some of the smarts in the Make Into Control command, and some tips on visual states. Then there are ten articles focusing on specific commonly-used controls. For each of these specific articles the article format includes a list of the control’s visual states and parts, an explanation of the function and importance of each part, a graphical comp of a control and its states, a XAML representation of the control in artwork form, and then in-depth steps for turning that artwork into a template for the control. Here are links to the articles. Enjoy!

- Steve

With Blend 3 it’s now possible to draw a marquee (or lasso) around keyframes to select all the keyframes that fall within it. Hold down the CTRL key then drag out a marquee with the mouse pointer as shown below. You can even begin your drag operation when the mouse pointer is over a keyframe or an animation bar; so long as CTRL is pressed, this will not result in selecting and/or moving any keyframe or animation.

marqueeSelect

If you ever used the time ruler area above the Timeline to move the yellow playhead (current time marker) you’ll be pleased to know that you can now click, or click-and-scrub, in any empty area of the Timeline to set the current time. And if the mouse pointer is over a keyframe or an animation bar then hold down the ALT key and click, or click-and-scrub, and you’ll be able to move the current time without either selecting or moving any keyframe or animation.

You’ll also notice the new blue drag-handles on the animation bars in the illustration above. You can use these to move the start and end times of the animation, and the times of the keyframes within it will be scaled up or down accordingly. This makes it very easy to change the time taken by an entire keyframe animation without having to move all the keyframes around. You can also click and drag on the gray background of the animation bar to shift the whole animation in time.

-Steve

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:

image

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.

image

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!

Jeff

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:

nibblesTutorial_v2

Go check out Celso’s site if you are interested in learning more about how these samples work.

Cheers!
Kirupa :)

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:

blendGallery 

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,
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:


dzcicon Download Deep Zoom Composer

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:

<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>

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

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

CheckBox, RadioButton

CommonStates:

        Normal, MouseOver, Pressed, Disabled

CheckStates:

        Unchecked, Checked, Indeterminate

FocusStates:

        Unfocused, Focused

ListBoxItem

CommonStates:

        Normal, MouseOver

SelectionStates:

        Unselected, Selected

FocusStates:

       Unfocused, Focused

ProgressBar

CommonStates:

        Determinate, Indeterminate

FocusStates:

        Unfocused, Focused

TextBox, RichTextBox

CommonStates:

       Normal, MouseOver, Disabled, ReadOnly

FocusStates:

        Unfocused, Focused

Hopefully this helps you to be more productive in WPF when working with states!

-Steve

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

Cheers!
Kirupa :)

Hi everyone,
Some of you have let us know that the version of Deep Zoom Composer you downloaded yesterday is actually the version from a few weeks ago. The reason for this has to do with the delays in propagating the downloads across the various servers, and sometimes it does take a bit longer than expected to keep everything in sync. Complicating this problem is our decision to not create a new page for our Deep Zoom Composer download pages. This means that some of you may see a cached version of the page as well.

Please make sure that your download page mentions the version as 1.0.000.0 with a publish date of 7/22/2009:

dl_qd

Your about dialog inside Deep Zoom Composer should look as follows as well:

aboutDialog

Sorry for the confusion, and hopefully by now, all of the download servers are serving the most recent, up-to-date version of Deep Zoom Composer.

Cheers!
Kirupa

Hi everyone,
To coincide with the official launch of Expression Studio 3, we have released the first final version of Deep Zoom Composer as well. You can download it from the below location:


dzcicon Download Deep Zoom Composer

As always, please uninstall all existing versions of Deep Zoom Composer before installing the new version.

What’s New
This release pulls together a lot of the ideas that we had been previewing to you in bits and pieces for the past releases – some for over a year! The following sections describe a few of them in some detail.

Easily Create Interactive Deep Zoom Experiences
The Deep Zoom technology in Silverlight can be used to do a lot more than just allowing you to zoom in on high resolution images. Deep Zoom Composer makes it possible for you to create, without writing a single line of code, interactive content involving slideshows, inline navigation, web links, tooltips, and more.

slideshows

In our latest release, we really tied a lot of the loose ends together to create something that makes it really easy for you import your images and quickly add some of the functionality described earlier. You can learn more about some of these features by reading Janete’s blog posts on these features: Slideshow Support, Creating Menus, and Adding Links.

Analytics Tracking
This release of Deep Zoom Composer enhances the support for analytics tracking we exposed in our earlier release. Specify tracking URLs that will silently get called when you zoom in on an image or region. Don’t worry, we made all of this fairly customizable:

impressionProfie

Expect to see us blog more about this feature really soon.

Improved DeepZoomPix Player
The enhanced player Deep Zoom Composer uses has been ported over to the online DeepZoomPix service. You can now upload your Deep Zoom creations and view/share them with others while maintaining any interactivity you may have added to your images.

Below is a simple example of a Windows 7 wallpaper slideshow uploaded to DeepZoomPix directly from Deep Zoom Composer. Click on the image to see the example live on the DeepZoomPix site:

dzc_images 

Go Further (Easily) with your Exported Content
With this release, we made it extremely easy for you to go from having a Deep Zoom composition to something you can edit in Expression Blend or Visual Studio. Based on a lot of your feedback, we expanded our default list of templates to include more templates that contain source files:

export_templates

The templates with source files range from ones that do everything for you such as our Behaviors and Classic templates, but one of our templates is nothing more than an empty project containing just a simple Silverlight Application + WebSite containing just your exported images.

To learn a bit more about our new exporting features, check out Kirupa’s two blog posts on this topic: Extensible Templates in Deep Zoom Composer and Improved Collection Support in Deep Zoom Composer

Revamped UI
One of the first things you may notice by looking at Deep Zoom Composer is the more refined look:

newUI

We took quite a number of design cues from the work our excellent designer on Expression Blend, Billy Chow did. We hope these subtle UI changes make it easier (and possibly more fun!) for you to work with your content.

Online Documentation
To make it easier for us to provide you with direct access to more frequently updated content, we have decided to point users to our online documentation which can be found here. The documentation on our new features has not been published yet, but it will soon. In the interim, you have the links to blog posts we have written posted above.

Support for Smooth Streaming
Smooth Streaming is an extension available to IIS web servers where you can easily stream content using adaptive streaming. Deep Zoom Composer now allows you to export your images into a form that is optimized for use on servers enabled with the smooth streaming technology:

smoothStreamingSupport 


We will continue to blog more about some of these new features, so keep watching this blog for original content or links to content on either of our blogs.

A Big Thanks to You All
It wouldn’t be fair to conclude this post without saying how grateful we are to all of you who have provided us with feedback and requests on things you would like to see. You all rock.

Of course, Deep Zoom Composer also wouldn’t be possible without the talented work of some brilliant colleagues spread out across Microsoft’s Israel Innovation Labs, Seadragon, and DeepZoomPix teams:

aboutDialog

See you all in our blog comments or on our forums.

Cheers!
Kirupa & Janete

US_Prd_Bx_Tilt_L_Expression_Studio_3 Today we announced the official launch of Expression® Studio 3, a suite of professional design tools for creating Rich Internet Applications. This announcement comes shortly after the July 10th Silverlight 3 launch and the availability of the release candidate for Expression Blend 3 + SketchFlow. It is super exciting for us on the Expression Web, Expression Design, Expression Blend + SketchFlow, and Expression Encoder teams to showcase the final versions for the 3rd release of the Studio. Below are various links to the trials, blog posts and other info from the Expression Studio 3 site, community site,  team blogs, and forums. Stay tuned for upcoming related blog posts! 

 
    Expression Studio 3 Overview Video 
    The Visual Kitchen Video 
    Soma’s blog about Silverlight 3
    Download the Expression Studio 3 60 day trial!

 

Expression Web 3 Expression Web 3
Microsoft Expression Web 3 gives you the tools you need – PHP, HTML/XHTML, CSS, JavaScript, ASP.NET, ASP.NET AJAX, visual diagnostics and sophisticated CSS design capability – to produce high-quality, standards-based Web sites. Includes SuperPreview.

Useful Links:
Expression Web 3 Overview + Video + 60 day trial
Expression Web Community Site
Expression Web Forums

Blog Posts:
Expression Web Blog
Soma’s Expression Web 3 blog post
Blog posts on the xWeb blog related to SuperPreview


Expression Blend 3

Expression Blend 3 + SketchFlow

Microsoft Expression Blend 3 revolutionizes the speed and efficiency with which you can take your ideas from initial concept to completed project on the Silverlight and .NET platforms. Includes SketchFlow.


Expression Design 3

Expression Design 3

Microsoft Expression Design 3 is the perfect companion to Expression Blend or Expression Web. Create sophisticated assets with their fidelity maintained throughout the entire designer-developer workflow.


Expression Encoder 3  

Expression Encoder 3
With Microsoft Expression Encoder, you can import and encode video files, produce live webcasts, enhance media with watermarks and advertising, and publish with Microsoft Silverlight.

Useful Links:
Expression Encoder Overview + Video + 60 day trial
Expression Encoder Community Site
Expression Encoder Forums

Blog Posts:
Expression Encoder Blog
What’s new in Expression Encoder 3 blog post by the Encoder Team

Cheers!
The Expression Blend Team

Jeff Kelly is back with Part III of his behaviors coverage. This time, he focuses on the more advanced uses of Behaviors  - Kirupa

In previous posts, I’ve touched on the basic pieces of the Behaviors API and some basic usages of them. In this post, I want to wrap up the discussion of the basic Behaviors API with some discussion of some of the more advanced features exposed by the Behaviors API.

Advanced Behaviors
A large amount of interactive scenarios can be described in the language of triggers and actions; that is, when X happens, do Y. However, say I have two actions, A and B, both of which want to read and store information in a hidden (i.e. not exposed to the designer) but shared Foo object. If I implement A and B as actions, each action needs to know how to access the Foo object. There are a number of different ways to approach this, each with various merits and drawbacks. Rather than explore these in depth here, I want to point out a way to approach this problem using Behaviors.

The complexity in this scenario comes from multiple independent actions sharing a dependency on the Foo object. Consider that rather than having multiple Actions that share and operate on the same data objects, you can instead encapsulate the shared data objects into a Behavior and expose the functionality that would have been provided via Actions as commands on the Behavior. The benefits are two-fold: cohesion is greatly improved, as the data and the commands that act upon that data are now encapsulated in a single class, and second, the interface exposed to the designer in Blend 3 is much more explicit (no more wondering which Actions in a large class library are meant to be used together). Rather than relying on class-naming conventions or first-hand implementation knowledge to convey the relationships between several Actions that all act upon the same data object, the user is presented a single Behavior with each possible operation enumerated and customizable by the designer.

image

This is all tied into the Behavior system with the appropriately named InvokeCommandAction. By placing these actions directly on the behavior that exposes the ICommands, we get a really nice benefit: we can use any Trigger built against the Behavior Trigger API to invoke both Actions AND ICommands exposed on Behaviors! In addition to the assorted tooling work in Blend 3 to make invoking these ICommands from XAML easy for a designer, we’ve also added the ActionCommand support class for developers to make creating Behaviors exposing ICommands a breeze. A bare-bones implementation of ICommand that takes a function with either zero or one parameter, ActionCommand saves you the trouble of writing your own ICommand implementation each time you want to write a Command-able Behavior:

public class MyCommandBehavior : Behavior<DependencyObject>
{
	public MyCommandBehavior()
	{
		this.MyCommand = new ActionCommand(this.MyFunction);
	}

	public ICommand MyCommand
	{
		get;
		private set;
	}
	 
	private void MyFunction()
	{
		// do work...
	}
}

 Figure 2: Example Behavior exposing an ICommand

<Button x:Name="BehaviorHostButton" Content="Behavior Host>
   <i:Interaction.Behaviors>
      <local:MyCommandBehavior>
         <i:Interaction.Triggers>
            <i:EventTrigger SourceName=" BehaviorHostButton" EventName="Click">
               <i:InvokeCommandAction CommandName="MyCommand"/>
            </i:EventTrigger>
         </i:Interaction.Triggers>
      </local:MyCommandBehavior>
   </i:Interaction.Behaviors>
</Button>

Figure 3: Example invocation of an ICommand on a Behavior using InvokeCommandAction

There is one major caveat to consider with this approach. Because InvokeCommandAction is not a TargetedTriggerAction, you cannot set TargetName to target an arbitrary Behavior; the InvokeCommandAction must be hosted on the Behavior it is invoking commands on. This means that the Trigger that fires the InvokeCommandAction must either be retargeted (by setting SourceName), or must be source agnostic. Also note that like any string-based reference system, the CommandName parameter of InvokeActionCommand is susceptible to falling victim to changing property names or refactorings down the road. Special care must be taken to avoid breaking these implicit links if these names are still in flux.

DefaultTriggerAttribute
You may find yourself writing Actions and Behaviors that have a fairly common use case, and you may want to improve the default design-time experience around that use case. By default when you create an Action, Blend 3 will trigger it with an MouseLeftButtonDown  EventTrigger where we can, or a Loaded EventTrigger if MouseLeftButtonDown isn’t available. However, you may want a custom Trigger instead of an EventTrigger, or maybe just a different default event in an EventTrigger. In order to facilitate this, we’ve added the DefaultTriggerAttribute in the System.Windows.Interactivity namespace:

public DefaultTriggerAttribute(Type targetType, Type triggerType, 
                                                params object[] parameters)

By setting this attribute on an Action class definition or an ICommand property definition exposed on a Behavior, you can specify one or more Triggers to instantiate automatically when that Action or Behavior is created by a user in Blend 3. The first parameter is the type for which to create this Trigger, the second is the type of Trigger to create, and the final is a list of constructor arguments to pass to the Trigger when it is created. If more than one attribute is defined, the most derived targetType that is applicable when the user created the Action/Behavior will be used.

For example, in the following definition:

[DefaultTrigger(typeof(UIElement), typeof(EventTrigger), "MouseLeftButtonDown")] 
[DefaultTrigger(typeof(ButtonBase), typeof(EventTrigger), "Click")] 
public class MyAction : TriggerAction<UIElement> 
{ 
    … 
} 

If MyAction is dragged onto a Button (or another ButtonBase derived class), the Action will be created under a Click EventTrigger. However, if MyAction is dragged onto any other UIElement, a MouseLeftButtonDown trigger will be created for it instead.

TypeConstraintAttribute
If you’ve read my previous point, you know that each of the core Behaviors classes constrain their AssociatedObject type via a generic argument in the class inheritance definition. However, there is a somewhat subtle complication here in the case of TargetedTriggerAction<T> and EventTriggerBase<T>. In both cases, these classes extend the more basic TriggerAction<T> and TriggerBase<T> and provide a “retargeting” mechanism, allowing Behavior authors to easily target and act upon elements other than the AssociatedObject.

For TargetedTriggerAction<T> and EventTriggerBase<T>, the generic parameter T does not constraint the type of their AssociatedObject as it does for TriggerAction<T>and TriggerBase<T>. Instead, it constrains the type of the retargeted element (Target/Source properties, respectively).  Because retargeted Behavior classes are usually acting solely on their target, rather than their AssociatedObject, this is usually sufficient. But what if it isn’t?

Cue the TypeConstraintAttribute. You can apply this attribute to any TargetedTriggerAction<T> or EventTriggerBase<T> in order to constrain its AssociatedObject to the specified type. Blend 3 will enforce it when you are creating an instance of the Behavior type, and the run-time will throw if you manage to violate it anyway (via by-hand XAML manipulation or code behind).

Conclusion
This post covered quite a bit of ground, but there are a few more topics that we need to go over before calling it a day. Stay tuned for a future post on some of our behaviors-related extensibility features.

Thanks,
Jeff

More Posts Next page »
 
Page view tracker