IRhetoric - Karsten Januszewski : Windows Presentation Foundation (Avalon)

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!

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

The Definitive Post on XBAP Trust Levels

karstenj — Fri, 12 Jan 2007 00:53:00 GMT

I've written about XBAPs and full trust in the past, but never as thoroughly as Karen Corby just did in her post on XBAP trust levels. She spent a lot of time getting this post correct, reviewing with various folks within Microsoft and providing very solid guidance. It is the kind of post that should be in the SDK and official docs, but didn't make it due to time constraints. If you have questions about XBAPs and full trust, this is a must read. Her deployment recommendations in particular are essential if you are thinking about going down the full trust XBAP road. But keep her guidance in mind: only do this if you must. ClickOnce .exe's are pretty slick and don't have nearly the issues associated with them as full trust .xbaps.

Yahoo Messenger for Vista Debuts at CES

karstenj — Tue, 09 Jan 2007 20:32:00 GMT

I'm here at CES, where Yahoo and Microsoft showed off a preview of the new Yahoo Messenger for Vista, built entirely on WPF. Yahoo has a great landing page with screenshots, a screencast of the app and a sign up sheet for when they release a beta. I held off on blogging this until we got the Channel 10 interview posted, where I hooked up with Jeff Sandquist and the crew to do an interview with the Yahoo folks, Joshua Jacobson and Matthew Skyrm, about the application. (If you haven't seen Channel 10, it is the sister to Channel 9, targeted to enthusiasts and power users.) They talk about their motivations for building this new messenger, their experience with WPF and Expression and more. They've got a blog up as well! I've been working with the lead developer, Eric Burke, along with Frog Design, including Lee Brimelow, on this application and the alpha is looking great. This application is a shining example of the opportunities and possibilities of the Vista and .NET 3.0 platform. Expect to hear more about this, for sure...

Gradient Animation Obsession Redux

karstenj — Fri, 05 Jan 2007 01:02:00 GMT

I guess I didn't call it an obsession without reason, as I can't seem to keep away from those hyponotizing gradient animations. I modified the tool I posted last month so that it would output the XAML, such that a designer could actually use the tool and never touch a line of XAML. I set up the tool to output either WPF or WPF/E XAML, as WPF/E doesn't support everything (yet) that the tool uses, such as AccelerationRatio, as well as having a different namespace.

I ran into some problems with XAMLWriter and the way it strips x:Name from the XAML it produces, so there is some hacky string replace code in there that I'm not proud of. I could have used property paths as an alternative.

Because you can't use XAMLWriter in an XBAP, I made the tool a ClickOnce .application that doesn't get installed on your machine but just runs in the ClickOnce cache. Hopefully, we'll see more and more of these types of apps -- mini applications that never get installed but can do more than in-browser applications.

Download the source or run the tool. Also, check out some of the gradient animations I made with the tool and put into a WPF/E page here (screenshot below, although it doesn't do justice to the hypnotizing effect...)

The North Face In-Store Explorer

karstenj — Tue, 02 Jan 2007 21:27:00 GMT

It was at PDC 2005 when The North Face showed a prototype of a WPF kiosk they were building. Well, with Vista and WPF having RTM'd, the real kiosk has been deployed, which you can read about from lead engineer Darren David at Fluid's blog. (Fluid is the agency that did the work for The North Face.) If you live near a North Face retail store, go check it out! This is an exciting milestone for WPF and Vista, as it is one of the most ambitious .NET 3.0/Vista applications deployed to date. Note that the white paper written about this application is still relevant and worth reading. The code samples all work just fine on the final bits and have some useful code as far as state management, image montages and a 3D carousel.

Gradient Obsession: A Tool For Tweaking Gradient Animations

karstenj — Wed, 13 Dec 2006 01:11:00 GMT

I started getting slightly obsessed/hypnotized with gradient animations and wanted a tool to see what I could do, so I built one. Basically, I just bound a bunch of sliders to the various transforms on the brush transform. I reused the infrastructure from an earlier post.

As you watch the animation and see something you like, you can pause it and note the values for your own purpose. I didn't actually create an exporter for the xaml, but that wouldn't be hard. Download the source or run the XBAP.