IRhetoric - Karsten Januszewski : WPF

Announcing Flotzam: Twitter, Flickr, Facebook and Blog Mash Up

karstenj — Fri, 22 Jun 2007 01:44:00 GMT

Awhile back, for MIX, Tim Aidlin and I built Flitterbook. We liked it so much that we now have version 2, renamed Flotzam, ready for your consumption. Lots of improvements, including a new UI, RSS support, Facebook notifications and complete configuration control. Also, check out the Silverlight-created video that is a screen capture of the application in action. So, we'd love for you to go check it out, let us know what you think on the Flotzam forum and watch the Flotzam blog.

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

CREATING A .NET TWITTER API in 4.5 SECONDS

karstenj — Sat, 09 Jun 2007 00:01:00 GMT

I've been meaning to document how I wrapped the Twitter API ... in 4.5 seconds. There is a very powerful feature in .NET is a tool in the sdk called xsd.exe. Darren David actually has a fabulous post on exactly the power of this tool: never touch a DOM or XPATH again! His post explains what is happening under the hood with xsd.exe quite nicely. I'd definitely recommend reading his post. I figured it might be interesting for folks to see the exact steps I took to wrap the Twitter API:

1. Grab an instance of the public timeline from Twitter and pass that to xsd.exe to infer a schema as follows: xsd http://twitter.com/statuses/public_timeline.xml which creates public_timeline.xsd

3. Use the inferred schema to generate classes: xsd public_timeline.xsd

4. Walla! We now have a class to party on called public_timeline.cs

5. To instantiate the class with live data, it is as simple as the following:

System.Xml.Serialization.XmlSerializer serializer = new System.Xml.Serialization.XmlSerializer(typeof(statuses));

statuses s = serializer.Deserialize(new System.Xml.XmlTextReader("http://twitter.com/statuses/public_timeline.xml")) as statuses;

And there you have it. No DOM, no XPATH, no RegEx. Now, if we want to take this wrapper to the next level, there are a few things we can do. First, you will notice that Twitter returns the data as a string. That's kind of a bummer; it would be nice to have it as a strongly typed DateTime. Here's the line of code to do that:

DateTime date = DateTime.ParseExact(s.created_at, "ddd MMM dd HH:mm:ss zzzzz yyyy", CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal);

Another thing that you'll need to do is authenticate when you contact Twitter if you want data other than the public timeline. Here's how to do that:

using (WebClient client = new WebClient())
{
client.Credentials = new NetworkCredential(TWITTER_USERNAME, TWITTER_PASSWORD);
statuses s = serializer.Deserialize(client.OpenRead(TWITTER_URL)) as statuses;
}

Of course, the TWITTER variables need to be set with the username, password and particular URL to the Twitter feed you are looking for.

Another thing to think about doing is making the calls to Twitter on a different thread. My recommendation for doing that is to implement Dan Crevier's Data-View-View Model. This frees the UI thread from any calls to Twitter and provides a really nice model for marshalling data between the threads. In fact, I did just this in my Flitter and Flitterbook implementations, which you can check out in the source code.

The final thing to think about, which I just recently implemented in some code I was working on, was to make the naming conventions look prettier. Darren David alluded to this in his post but he's been so busy with the totally amazing HP Multi Touch kiosk he built (which you have to check out the videos for if you haven't yet) that he hasn't posted his part II. But I imagine he's going to talk about using partial classes so as to make the class look prettier without touching the generated code. This came in real handy with the Twitter API which generated some code with ugly array structures that I wasn't so keen on. I also had a need to use a kind of cool feature of WPF databinding where I wanted to reuse a datatemplate between two different objects (Twitter status and Facebook status) by just having them share names, such as AvatarURL, rather than create two templates that were fundamentally identitcal except for the data object. As such, I created a partial class with a bunch of getters as follows:

public partial class statusesStatus
{
public DateTime Date
{
get
{
return DateTime.ParseExact((string)this.created_at, "ddd MMM dd HH:mm:ss zzzzz yyyy", CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal);
}
}

public string AvatarUrl
{
get
{
return this.user[0].profile_image_url;
}
}

public string Text
{
get
{
return this.text;
}
}

public string UserName
{
get
{
return this.user[0].screen_name;
}
}

public string Location
{
get
{
return this.user[0].location;
}
}

}

Now I have a much prettier class without touching the generated code from xsd.exe. Sorry for stealing Part II Darren. I couldn't help myself, as I have been meaning to write this post for about 2 months!

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.

New Lab Posted: Creating 3D Content with Windows Presentation Foundation

karstenj — Wed, 28 Mar 2007 23:25:00 GMT

I just posted a new lab for learning how to use 3D in WPF. This is a great lab that I would highly recommend if you are learning WPF 3D. It shows how to do dynamic animation of 3D content as well as how to do 2D on 3D using the 3DTools.

North Face Case Study Published

karstenj — Thu, 22 Mar 2007 22:40:00 GMT

A case study about the North Face Kiosk is now posted to the Microsoft Case Studies site. This is a nice write up, showing how the technology solved business problems, and explaining the larger context of how the kiosk plays into The North Face's overall marketing and sales goals. There are quite a few nice quotes about WPF in there and a shout out to WCF as well.

Inspired By Flash Math Creativity #3: WPF Flag

karstenj — Fri, 09 Mar 2007 08:43:00 GMT

There is a clever sample up on Flash Math Creativity by Lifaros that fundamentally does 2D morph meshing by chopping up an image into sections and then animating the sections, resulting in the effect of a flag waving. I decided to implement something similar in WPF. When I started thinking about how to chop up something in WPF, I remembered the Slide Puzzle sample from the SDK and I used it the foundation for how to chop, well, anything up in WPF. (If you haven't checked out this sample, definitely do so!)

In my sample, I only chop up an image, but nothing is stopping you from using this same technique to chop up a video, a document or the UI itself. Once again, I used the custom animation classes to create the animation using Math.Sin. The slider allows you to modify the intensity of the wave. The result? The UN flag waving in the desert. I'm not sure why. Download source or run it.

Here's the crux of the code:

private void Chop()
{
    stackPanel.Children.Clear();
    Image image = (Image)this.Resources["image"];
    BitmapSource bitmap = (BitmapSource)image.Source;
    Size size = new Size(bitmap.PixelWidth / 5, bitmap.PixelHeight / 5);
    image.Width = size.Width;
    image.Height = size.Height;

float edgesize = 1.0f / numCols;

    // Set up viewbox appropriately for each tile.
    for (int i = 0; i < numCols; i++)
    {
        Rectangle r = new Rectangle();
        TranslateTransform t = new TranslateTransform();
        r.RenderTransform = t;
        //this confused me at first!
        r.SnapsToDevicePixels = true;
        VisualBrush vb = new VisualBrush(image);
        //viewboxes are all relative to 1
        vb.Viewbox = new Rect(edgesize * i, 0, edgesize, 1);
        vb.ViewboxUnits = BrushMappingMode.RelativeToBoundingBox;
        r.Fill = vb;
        r.Height = image.Height;
        r.Width = image.Width / numCols;

        CircleAnimation ca = new CircleAnimation();
        ca.Direction = CircleAnimation.DirectionEnum.YDirection;
        ca.Radius = slider.Value;
        ca.Duration = TimeSpan.FromSeconds(1);
        ca.BeginTime = TimeSpan.FromMilliseconds(i * 10);
        ca.RepeatBehavior = RepeatBehavior.Forever;
        t.BeginAnimation(TranslateTransform.YProperty, ca);
        stackPanel.Children.Add(r);

}

3D Cloth Source Code Posted: Technique for WPF 3D Morph Mesh

karstenj — Mon, 26 Feb 2007 22:44:00 GMT

There is a great 3D cloth demo that has been floating around interally for awhile and shown at conferences, talks, channel 9 interviews, etc. However, we haven't ever posted the source code . . . until now. You can run it from here and download the source code here.

I didn't write this code; David Teitlebaum, from the WPF team, did. He was hesitant to release it as the code isn't factored to his liking, but I convinced him otherwise. His code is interesting to read: Thing3D is my personal favorite class. It is also worth calling out that he uses no XAML and he also uses a MatrixCamera instead of the more easy-to-grok PerspectiveCamera and OrthographicCamera. And the technique he uses for morphing the mesh is to swap out vertices on the fly using a timer, again not for the feint of heart. But, if you already know 3D paradigms and are wondering how to create stunning effects like this in WPF, this source code will be illuminating for you.

If you can't run the application because you either aren't on Vista or haven't installed .NET 3.0 on XP, here are some pics to give you a sense of the effect as the cloth, which is really just a 20 x 20 vertice plane, drops onto a sphere, bounces and slides onto a cube:

You can run it from here and download the source code here.

Inspired By Flash Math Creativity #2: WPF Planets

karstenj — Sat, 24 Feb 2007 00:45:00 GMT

My next inspiration from the algorithms introduced in Flash Math Creativity was based on the work of Jamie MacDonald. In looking at his work, I quickly realized that I was going to need to brush up on my trigonometry skills. This led me to another great Friend of Ed book, Foundation ActionScript Animation: Making Things Move, which has some great trigonometry for animation explanations.

You can see the results of my latest experiment here and the code is here. Just to make sure I was up an running with basic trig, I created a sine wave in 01 as follows:

double x = 0;
double y = 0;
double angle = 0;
for (int i = 0; i < 500; i++)
{
    x += 1;
    y = 200 + Math.Sin(angle) * 50;
    Ellipse el = new Ellipse();
    el.Width = 2;
    el.Height = 2;
    el.Fill = Brushes.Red;
    Canvas.SetLeft(el, x);
    Canvas.SetTop(el, y);
    stage.Children.Add(el);
    angle += .05; }

Nothing fancy here. To make a circle, I changed the x to be x = Math.Cos(angle) * 50. This is the basis for doing circle and ellipse animations. Now, instead of trying to do animations using CompositionTarget.Rendering, I remembered that the SDK has a great sample called CustomAnimations, in which a CircleAnimation exists already using this formula. Here's the key code where it overrides the GetCurrentValueCore method to create the circle effect using basic trig:

protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock clock)
{
double returnValue;
double time = clock.CurrentProgress.Value;

    // math magic: calculate new coordinates using polar coordinate equations. This requires two
    // animations to be wired up in order to move in a circle, since we don't make any assumptions
    // about what we're animating (e.g. a TranslateTransform).
    if (Direction == DirectionEnum.XDirection)
    {
        returnValue = Math.Cos(2 * Math.PI * time);
    }
    else
    {
        returnValue = Math.Sin(2 * Math.PI * time);
    }

// Need to add the defaultOriginValue so that composition works.
return returnValue * Radius + defaultOriginValue;
}

At first, I used this in code to create the effect of these circles circling toward you using BeginAnimation, based on the TowardUs sample in the Flash Math Creativity book (the very first sample):

CircleAnimation cx = new CircleAnimation();
cx.Duration = new Duration(TimeSpan.FromSeconds(1.5));
cx.Direction = CircleAnimation.DirectionEnum.XDirection;
cx.Radius = 150;
cx.RepeatBehavior = RepeatBehavior.Forever;

CircleAnimation cy = new CircleAnimation();
cy.Duration = new Duration(TimeSpan.FromSeconds(1.5));
cy.Direction = CircleAnimation.DirectionEnum.YDirection;
cy.Radius = 150;
cy.RepeatBehavior = RepeatBehavior.Forever;

stage.Children.Add(el);
el.BeginAnimation(Ellipse.OpacityProperty, opacityAnimation);
st.BeginAnimation(ScaleTransform.ScaleXProperty, d);
st.BeginAnimation(ScaleTransform.ScaleYProperty, d);
tt.BeginAnimation(TranslateTransform.XProperty, cx);
tt.BeginAnimation(TranslateTransform.YProperty, cy);

This resulted in 03. It worked, but the code started getting ugly as far as getting each circle to fire when I wanted it to. I found myself using a timer and wiring up an anonymous delegate. I realized Storyboards and ParallelTimelines would serve me much better, which are much easier to wire up in XAML than in code. So, 04 is the same thing, but a XAML solution instead:

By using parallel timelines I could structure my animations and when they fired.

A nice thing about this CustomAnimation is that it can be applied to 3D animations as well, applied to the TranslateTransform3D which I did 05, changing the Radius property to be much smaller to fit the coordinates I was using for my ViewPort.

void towardus3d_Loaded(object sender, RoutedEventArgs e)
{
    sphere = new GeometryModel3D(sphereFactory.Mesh, materialGreen);
    ModelVisual3D mv3d = myViewPort3D.Children[1] as ModelVisual3D;
    mv3d.Content = sphere;

    CircleAnimation ca3d_y = new CircleAnimation();
    ca3d_y.Duration = TimeSpan.FromSeconds(5);
    ca3d_y.RepeatBehavior = RepeatBehavior.Forever;
    ca3d_y.Radius = .5;
    ca3d_y.Direction = CircleAnimation.DirectionEnum.YDirection;

    CircleAnimation ca3d_x = new CircleAnimation();
    ca3d_x.Duration = TimeSpan.FromSeconds(5);
    ca3d_x.RepeatBehavior = RepeatBehavior.Forever;
    ca3d_x.Radius = .5;
    ca3d_x.Direction = CircleAnimation.DirectionEnum.XDirection;

ModelTranslate.BeginAnimation(TranslateTransform3D.OffsetYProperty, ca3d_y);
ModelTranslate.BeginAnimation(TranslateTransform3D.OffsetXProperty, ca3d_x);
}

It then dawned on me, as I looked at 05, an orbiting sphere, that it would make for great planets. I went out to NASA and found the texture maps for Jupiter and its moons. I also wanted to do all of this 3D work in XAML, so I made a class called SphereModelVisual3D that I could instantiate Jupiter, for example, like this:

<mv3d:SphereModelVisual3D x:Name="Jupiter" >
<mv3d:SphereModelVisual3D.Material>
    <DiffuseMaterial>
      <DiffuseMaterial.Brush >
        <ImageBrush ImageSource="http://maps.jpl.nasa.gov/pix/jup0vss1.jpg%22/>
      </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</mv3d:SphereModelVisual3D.Material>

      <mv3d:SphereModelVisual3D.Transform>
    <Transform3DGroup >
      <ScaleTransform3D ScaleX="2" ScaleY="2" ScaleZ="2" />
      <RotateTransform3D>
        <RotateTransform3D.Rotation>
          <AxisAngleRotation3D Angle="0" Axis="0 1 0" x:Name="Jupiter_rotation">
          </AxisAngleRotation3D>
        </RotateTransform3D.Rotation>
      </RotateTransform3D>
      <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0" />
    </Transform3DGroup>
</mv3d:SphereModelVisual3D.Transform>
</mv3d:SphereModelVisual3D>

The animation that handles the elliptical orbits needs to transform the Z property the TranslateTransform3D. It then looks like this:

The result is in 06. It is not astronomically correct as far as scale -- I'll leave that for someone with some more time on their hands, but I liked the end result. I also threw in the TrackBall control from the 3d tools project so you can trackball the whole model.

The code is here.

Inspired By Flash Math Creativity: WPF Flowers

karstenj — Fri, 16 Feb 2007 20:57:00 GMT

I've recently picked up a great book called Flash Math Creativity. I been inspired by some of the techniques it outlines and have played around with similar ideas in WPF. The exercise has been a fruitful one, in that I'm making some pleasing computer art while also learning about the differences between Action Script animation and WPF animation. The first one I played with is flowers, inspired by the work of Glen Rhodes, which is actually featured on the cover of the book. You can see the results here and download the code here.

The first flower, which has no animation, is pretty simple. I just create 125 rectangles with a fill using a DrawingBrush I created in Blend. I place each of the petals on the "stage", which in the case is a Grid. I use Grid instead of Canvas so that I get the goodness of the WPF layout engine for free without having to handle any positioning of the rectangles. I then tranform the rotation and scale of each one to create the flower effect. I also swap the ZIndex so that the large petals are in back and the smaller ones are in front.

void OnLoaded(object sender, EventArgs e)
{
    int r = 0;
    double s = 0;
    for (int i=0; i < 125; i++)
    {
        Rectangle rect = new Rectangle();
        rect.Width = 50;
        rect.Height = 50;
        rect.Fill = (DrawingBrush)this.FindResource("petal");
        TransformGroup tg = new TransformGroup();
        s += .01;
        ScaleTransform st = new ScaleTransform(s * s * s + .1, s * s * s + .1);
        r += 27;
        RotateTransform rt = new RotateTransform(r);
        tg.Children.Add(st);
        tg.Children.Add(rt);
        rect.RenderTransform = tg;
        Grid.SetZIndex(rect, -i);
        stage.Children.Add(rect);
    }
}

Where things get a little more interesting is when it comes to animating the flower. In Action Script, this kind of dynamic animation is handled through the very convenient onEnterFrame. This handler provides a per-frame callback for each individual movie clip, in which a function can be wired up. There is no equivalent in WPF such that you get a per-frame callback for each element. The closest thing to this concept is the CompositionTarget.Rendering handler, which gets called per-frame for the entire tree (or page or stage, if you will.)

It is possible to find each element you are looking for when this event gets fired and achieve a similar effect to onEnterFrame. I did just this in Page3.xaml, which ends up adding the following in addition to the loaded method:

void CompositionTarget_Rendering(object sender, EventArgs e)
{
    foreach (UIElement uie in stage.Children)
    {
        TransformGroup tg = uie.RenderTransform as TransformGroup;
        ScaleTransform st = tg.Children[0] as ScaleTransform;
        if (st.ScaleX > -3)
           st.ScaleX -= .1;
    }
}

You can see how I end up having to walk the tree, extracting the children and then acting on the children. While this works, there are several disadvantages to this methodology. First, having to figure out the animation for every UI element within a single callback has the potential to get quite unwieldy. Second, using this method means we don't get all of the goodness of the WPF animation system, things like frame rate indepence, timelines, storyboards, repeat behaviors, autoreverse, etc. So, let's see what this animation would look like using the WPF animation system:

void Page2_Loaded(object sender, RoutedEventArgs e)
{
    int r = 0;
    double s = 0;
    DoubleAnimation d = new DoubleAnimation(-3, new Duration(TimeSpan.FromSeconds(2)));
    d.AutoReverse = true;
    d.RepeatBehavior = RepeatBehavior.Forever;
    for (int i = 0; i < 125; i++)
    {
        Rectangle rect = new Rectangle();
        rect.Width = 50;
        rect.Height = 50;
        rect.Opacity = .5;
        rect.Fill = (DrawingBrush)this.FindResource("petal2");
        TransformGroup tg = new TransformGroup();
        s += .01;
        ScaleTransform st = new ScaleTransform(s * s * s + .1, s * s * s + .1);
        r += 27;
        RotateTransform rt = new RotateTransform(r);
        tg.Children.Add(st);
        tg.Children.Add(rt);
        rect.RenderTransform = tg;
        Grid.SetZIndex(rect, -i);
        st.BeginAnimation(ScaleTransform.ScaleXProperty, d);
        stage.Children.Add(rect);
    }
}

With this code, I get to wire up an animation to each element -- in fact I'm wiring up the same animation, which simply animates the scale. I get to use some of the features of the animation system, like AutoReverse and RepeatBehaviors. And, I'm letting WPF calculate the timing instead of me doing it per-frame. Much nicer, methinks.

Those seasoned with the WPF samples can probably deduce where I derived the harness you toggle between the different animations. I took the basic idea from Kevin Moore's Bag-o-Tricks and then added the fading between frames from the custom frame in the WPF Feature Fest sample.

I'm also now pointing all my WPF samples to an HTML page which checks to see if you have the framework installed and directs you to where you get it if you don't. I took this from the Windows SDK and modified to to auto-redirect if .NET 3.0 is installed. It is included in the source.

WPF Application Portfolio Wiki Updated -- More WPF Apps!

karstenj — Sat, 10 Feb 2007 01:59:00 GMT

Tim Sneath has been doing a great job of blogging the many Vista/WPF showcase applications that are being deployed right now. If you are looking for a quick list of URLs that you can hit for the .XBAP or .APPLICATION files, please go to the WPF Application Portfolio wiki, which I've updated with all the links, tagging them with the kind of deployment used -- very cool to see the number of .application and .xbap applications out there! If you are doing a demo and trying to show someone the WPF portfolio, hopefully this wiki page will be useful -- and watch for more coming...

I've also added some that Tim hasn't documented yet, in particular a whole bunch from Japan, as well as one from Metaliq on snowboarding visualization. Some screenshots below.

http://www.metaliq.com/wpf/
http://weathernews.com/wpfglobal.xbap
http://sp.warnermycal.com/vista/contents/preview.xbap
http://www.shiseido.co.jp/biyou_dic_vista/shiseido.xbap
http://www.dosv.jp/parts_assembler/PartsAssembler.xbap
http://japan.cnet.com/wpf/photo/

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.

Databinding In Expression Blend: Forget the Data and Do the Bind

karstenj — Fri, 26 Jan 2007 23:47:00 GMT

I just posted a screencast showing how to wire up UI elements using Blend. The general premise is that databinding in WPF is about more than just data; it also allows you to connect UI properties, like wiring a slider up to a progress bar. Blend exposes this is a very useable way, once you know your way around. I also use some cool styles from this Charles Petzold article and show how, in Blend, you can extract a style and template from a piece of XAML to be reused in other parts of your application.

Doninoken: WPF XBAP Piece by Bascule

karstenj — Thu, 25 Jan 2007 23:01:00 GMT

Check out Doninoken, an amazing WPF piece that is part of the Japanese Vista launch, done by the design agency Bascule. The aesthetic is amazing. I love how they use WPF 3D, mapping images on planes and animating the planes. (Watch for the small camera that pops up after the title screen that lets you interact with the app and zoom the camera around.) Still, how did they do it? Maya exports? Hand tweaking XAML? It is very impressive. And makes you want some sushi...