IRhetoric - Karsten Januszewski : Expression Blend

COLLABORATING ON CREATING ANIMATIONS IN WPF AND BLEND: POSSIBILITIES AND LIMITATIONS

karstenj — Thu, 21 Jun 2007 02:16:41 GMT

One area that is currently top of mind for me is designer and developer collaboration with WPF and Expression Blend, in particular around animation. I'd like to start documenting some techniques and outlining things that can and can't be done.

Before diving in, let's quickly review the animation system in WPF. The two ways to do animation in WPF is either declaratively (XAML) or procedurally (code). If you use Expression Blend to create your animations, you will be in effect using the declarative (XAML) method. What gets slightly confusing is that the two methods, declarative and procedural, are not entirely in parallel. For example, the only way to begin an animation declaratively (XAML) is through the <BeginStoryboard> tag. However, the equivalent call in code is to call the Begin method off a UIElement and passing it the storyboard to fire. The other option is to call the Begin method from a storyboard itself, passing it the UIElement to which the storyboard should be applied. And, in code, you can trigger animations that don't even have storyboards using the ApplyAnimationClock or BeginAnimation directly off a UIElement. (More on this later if you're confused. The syntax is, like much of WPF, a little tricky.)

But all of the above -- and much of the SDK documentation on animation -- assumes that you have chosen either one or the other. What happens if you want to mix and match these two methods? This particularly comes into play if you are working on a project where animations get created in Blend but then need to be manipulated, triggered and recontextualized from code. And it potentially gets more tricky if you have multiple people working on the project, the classic scenario being one person who creates the animations in Blend and another who works with those animations in code.

So, let's look at the possibilities:

1. How to trigger a storyboard from code that was created in Blend.

Let's say we have an animation in Blend to do an opacity fade on an image. Assuming it was created by creating a new timeline and leave the "Create as a resource" checkbox checked, we can get at it from code pretty easily.Simply grab the storyboard from the resources, cast it appropriately and begin it.

Storyboard s = (Storyboard) this.FindResource("FadeIn");
this.BeginStoryboard(s);

Now, the reason this works is that the storyboard itself contains information about the name of the object that it wants to animate. If you look at the storyboard in the sample code I posted, it sets the Storyboard.TargetName value explicitly to the name "image". Thus, when the storyboard is called from the page itself via BeginStoryboard, it is able to find the element named image and run the animations. But what happens if we want to generically apply that animation that was created in Blend to other elements?

2. How to trigger a storyboard from code and apply it to another UI element

Well, to accomplish this task, we need to start hacking XAML. If this scares you, don't read on. But the fact is that XAML generated from Blend sometimes needs a little love. So, in this case, we are going to copy that storyboard. We can't do that without jumping into the XAML and manually coping the entire <Storyboard> and giving it a new x:Key. Once we've done that, we have manually remove every instance where Storyboard.TargetName is set. Literally, remove the entire attribute. Now, we can apply this storyboard to any UIElement and not just images. In this case, we call the Begin method from the storyboard itself, passing the element we want the storyboard to be applied to.

Storyboard s = (Storyboard)this.FindResource("FadeIn2");
s.Begin(textBlock);

The thing to watch out for with this technique is to make sure you call the storyboard on an element that in fact has all the properties referenced in the storyboard. Otherwise, you'll get a runtime exception that says something like:

Additional information: '[Unknown]' property does not point to a DependencyObject in path '(0).(1).[0].(2)'.

Which is saying that the animation could find the property that it was told to animate. A place where this can get you is if you are doing any Transform animations, such as Scale, Translate, Rotate or Skew. By default, when you add an element to Blend, it does not create a TransformGroup for it. For example, go to Blend, add a Rectangle to the stage and see what it creates in XAML. It won't have a RenderTransform. Now, go change its scale to 2 and then change it back to 1. Now look at its XAML: a RenderTransform has been permanently added to it as a child which doesn't do anything! Blend counts on that TransformGroup for doing its animations, in that exact order (Scale, Skew, Rotate, Translate). So, if you've created an animation that does a transform and you want to apply it to some other element, be sure that the element has a TransformGroup with the four transforms.

3. How to tweak an animation created in Blend on the fly in code

Let's say there's an animation created in Blend that you want to use, but you want to actually modify it with some dynamic values at runtime, maybe adding more animation. First, you grab the storyboard and clone it so you have a new instance to party on. Then, you create your animation in code -- that's where you could insert dynamic variables. Finally, you have to create a property path to the value you want animated. The syntax is a little goofy, but once you crack its code as far as a path (good doc here) you'll be off and running. Here's the code I used to add a scale animation on the fly:

Storyboard s = ((Storyboard)this.FindResource("FadeIn2")).Clone();
DoubleAnimation da = new DoubleAnimation(0, 1, TimeSpan.FromSeconds(1), FillBehavior.HoldEnd);
Storyboard.SetTargetProperty(da, new PropertyPath("(0).(1).[0].(2)", UIElement.RenderTransformProperty,
TransformGroup.ChildrenProperty,
ScaleTransform.ScaleXProperty));
s.Children.Add(da);
s.Begin(rectangle);

You could use a similar technique to crack into the storyboard, grab an animation that was created in XAML and tweak it. So for example, we could grab the animation from the storyboard and change its begin time like this:

DoubleAnimationUsingKeyFrames d = (DoubleAnimationUsingKeyFrames)s.Children[0];
d.BeginTime = TimeSpan.FromSeconds(.5);

4. How to crack into an animation that is part of a DataTemplate

Doh! You can't! I tried every workaround I could, but once a ContentTemplate gets loaded, it is in the WPF terminology "Sealed" and I've never seen a way to make it unsealed, even before it is added to the visual tree. Bummer.

**********************************

So where are we? We've learned some techniques such that a design technologist or interactive designer or diviner (or whatever they are called) can work in Blend, creating subtle and great animations and then, if there are scenarios where the developer or integrator or diviner (or whatever they are called) needs to start that animation, reuse that animation or tweak that animation on the fly, they can. Go WPF!

Download the code

FLITTERBOOK: INTEGRATING WITH THE FACEBOOK PLATFORM

karstenj — Fri, 25 May 2007 08:50:19 GMT

I'm here at the Facebook Developer's event down here in San Francisco. Dan'l Lewin from Microsoft was on stage as a parter:

Lots of good stuff announced as far as Facebook/Microsoft partnership: Microsoft just released a great wrapper to the Facebook API written by the guys at Clarity Consulting. They've got some nice sample applications, including a cool WPF app that is a rolodex of your Facebook contacts.

Also, Popfly also added support for the Facebook API to their mashup builder. Speaking of Silverlight, there's support for Silverlight in FBML via the FB:Silverlight tag, although it is undocumented right now and not quite there. However, you can host Silverlight in an iframe using FBML. More on that to come.

I implemented in an updated version of Flitterbook, which you can download here. This version of Flitterbook now has support for the Facebook API and pulls all images from your friends along with Twitter feeds and Flickr data. Again, this is still alpha code: no promises!

One thing I implemented in Flitterbook is support for infinite sessions with Facebook. There aren't any code samples for this in the samples that ship with the Facebook Developer Toolkit so I thought it might be useful for other folks. I save the Facebook infinite session data in a user config file using Visual Studio. The crux is that you have to pass your own secret if you don't have a secret that gets returned from Facebook to support an infinite session. Here's the code:

//set infinite session parameters on to facebook data adapter
if (Settings.Default.IsFacebookInfiniteSession)
{
facebookConnect.UserId = Settings.Default.FACEBOOK_USERID;
facebookConnect.SessionKey = Settings.Default.FACEBOOK_SESSIONKEY;
//note here that we pass the secret that we saved
facebookConnect.Secret = Settings.Default.FACEBOOK_SECRET;
}
else
{
//if we don't have an infinite session, we use my application's secret
facebookConnect.Secret = secret;
//we invoke the UI dialog
facebookConnect.ConnectToFacebook();
//if the user let us save their session, throw it in config
if (!facebookConnect.SessionExpires)
{
    Settings.Default.FACEBOOK_SESSIONKEY = facebookConnect.SessionKey;
    Settings.Default.FACEBOOK_USERID = facebookConnect.UserId;
    Settings.Default.FACEBOOK_SECRET = facebookConnect.Secret;
    Settings.Default.IsFacebookInfiniteSession = true;
    Settings.Default.Save();
}
}

THREE NEW EXPRESSION BLEND HANDS-ON LABS

karstenj — Tue, 22 May 2007 17:26:00 GMT

I just posted three new hands-on labs for Expression Blend that were created for MIX but haven't been posted for the world yet. There's lots of little nuggets in there worth checking out, things like creating a user controls, databinding, triggers, styling controls, using web services, paging, data input and more. The more I use Blend, the more I love it, but it has its own learning curve, above and beyond WPF.

The first lab is a UI for Windows Live Search, including Image Search.

The second lab is a color swatch lab.

The third lab is a recipe viewer application.

EXPRESSION BLEND RELEASE CANDIDATE 1: SIX NEW SAMPLES!

karstenj — Thu, 15 Mar 2007 20:28:00 GMT

Expression Blend Release Candidate 1 is now available for download. The product keeps getting better, able to render more on its design surface, more stable, better documented and tons of great new samples. The samples are quite crisp from a design point of view with a designer's eye. If you want to get the actual source and assets, you'll have to download Blend, but if you want to just check them out, I've posted screenshots of all six and uploaded them via ClickOnce using the Publish Wizard in Visual Studio so that you can run them directly:

Animation Studio: This is a nifty little animation drawing tool.

Color Swatch: An app that allows you do envision different color possibilities for interior decorating.

GrandPiano: Play the piano!

Photo Book: Flipping a book of images using 2 1/2 D.

Video Shelf: Video mapped onto 3D planes, library like navigation.

Viewer3D: A motorcycle with particular camera moves to highlight different features

Expression Blend Training: New Lab Posted, Training Wiki Updated

karstenj — Thu, 01 Mar 2007 02:40:00 GMT

This summer, I posted a five day course for WPF. While this content is all still relevant, using a blog to disseminate this information is, well, so old school. Unless I constantly update the post, it doesn't have all the latest and greatest sites, tutorials, books and more. Wikis make so much more sense for this purpose, such that the content stays fresh and, as new content comes online, others can update it. Hopefully, that will happen up on the Learning WPF and Expression Blend Wiki page, which is a great resource.

The big thing missing from that five day course is Expression Blend training. Blend is trickier to learn, as reading about using it is much less helpful than watching someone else use the tool and then trying it yourself. There is now a decent amount of screencasts and labs out there for learning Blend, but (until now) you had to know where to look. To make this easier, I've aggregated these up on the Learning WPF and Expression Blend Wiki page.

Included in that list is a new lab that I just uploaded which explains workflow between Expression Design and Expression Blend. It shows a very nifty technique of tracing a bitmap in order to create a vector based asset.

As more of this kind of content comes online, I hope that the community at large will keep this wiki up-to-date.

Announcing Expression Blend Beta 2 and Expression Design Beta 1

karstenj — Wed, 31 Jan 2007 08:32:00 GMT

You can now go download Expression Blend Beta 2 as well as Expression Design Beta 1. Both applications have received significant work since their last incarnation with tons of bugs fixed. Go give 'em a whirl.