WPF Expander Control – Cool Things Part 1 (animation)

Hmm…this is by no means a tutorial. There – that’s my disclaimer. So now that I’ve absolved myself from all WPF-sin, we can get started. WPF…that’s Windows Presentation Foundation for the layman…has been around for over a year now in multitude of incarnations (Avalon, WinFX, etc.) , and is the backbone Microsoft’s new OS “Vista”. If you didn’t already know, WPF uses a customized XML language called XAML for creating/rendering all of its controls. XAML (rhymes with camel) stands for Extensible Application Markup Language…and quite honestly…is the coolest thing since sliced bread.

Because it’s an XML-based language…it gives the developer and end-user easy to use, yet very powerful control over customization/theming and templating. I’m not going to get into alot of detail, but believe me when I tell you that this can/will radically change the way alot of people handle the UI side of things. Custom controls are a given in today’s enterprise world because they’re scalable and reusable. They save you tons of  time because you don’t have to re-invent the wheel everytime you go to make a new application. It’s the essence of object-oriented programming.

Now, imagine that every control at your disposal, even the ones straight out of the box, are custom controls. That’s what WPF gives you. You can apply branding/theming to every button, in every application you make just by including another XAML file or two. And not only that, you can make all you controls “act” a certain way in a multitude of different situations. Some may argue that this functionality (or some subset thereof) was already available in .NET 2.0…or on some other platform…or in some other progamming language/environment…but for those people like me (targetting a platform that has about 98% market share…or work in a corporate environment where all machines are running Windows XP) WPF and its child technologies are a very powerful and scalable solution. It gives you great user experiences in and out of the browser, and helps you practice the “Law of Least Privilege” with it’s sandboxed XBAPs (the web applications formerly known as XAPPs).

Now like I said, this is a great technology…and it’s been around for quite some time. But guess what…almost nobody I know uses it…and tutorials are a little scarce. But if you’ve made it to this blog…obviously you’ve just started to use it…or have been using it…and you need a little help with one of the most obviously “cool” things that you don’t get out of the box with WPF. Now…the Expander control is very cool when you first include it in you application. It’s basically a collapsible menu of sorts. If you’re like me, you not only expected it to animate in/out, but you also probably expected it to retract when you moved your mouse off of it. BUT…no such luck. The whole purpose of XAML/WPF is to give you what’s necessary(the bare minimum) …and let you build the rest. So let’s get started with the animation bit, shall we?

Before we start, I’m going to assume that you’re using Microsoft Expression Blend (currently in Beta 1) and/or Microsoft Visual Studio. There are a couple of different ways to actually handle the animation of the expander control. First, let’s take a look at the programmatic way to handle the expander control’s animation.

Programmatic animation is alot more intuitive to developers coming from a strong .NET background…or those who don’t like firing up another application just to quickly apply an animation effect. The main drawback with programmatic animation is that it doesn’t animate to scale — meaning that if your user changes the size of the application window, the animation isn’t scaled to meet the change in window size (unless you scale your animations by using percentages). Make sure to include the System.Windows.Media.Animation namespace in your code-behind file. 

First you need to add event handlers for the Collapased/Expanded events of the Expander control.  Here, we have an Expander Control named expMenu.


public Window1()
{
     InitializeComponent();
     //add handlers for the expanded/collapsed events of the expMenu Control      expMenu.Collapsed += new RoutedEventHandler(expMenu_Collapsed);
     expMenu.Expanded += new RoutedEventHandler(expMenu_Expanded);
}

Next you simply need to create two DoubleAnimation objects that animate the Width property of an Expander Control. So first, we place the necessary DoubleAnimation in the Expander.Collapsed event handler.


void expMenu_Collapsed(object sender, RoutedEventArgs e)
{
     DoubleAnimation dblAnimation = new DoubleAnimation();
     //set the width that we want the expander control to
     //have when animation is complete
     dblAnimation.To = 35;
     //set the duration of this animation - generally 1/4 or less looks best
     dblAnimation.Duration = new Duration(TimeSpan.FromSeconds(.25));
     //begin the animation on the width property of the expMenu control
     expMenu.BeginAnimation(Expander.WidthProperty, dblAnimation);}

You should place the same thing in your Expander.Expanded event handler, but change the DoubleAnimation’s “To” value to the fully expanded width. After that, compile & run your application and your Expander should animate. You can also use this method to animate the Opacity of the Expander so that it’s less visible when collapsed. You can reuse the same DoubleAnimation by using the Expander.OpacityProperty in the Expander.BeginAnimation method and setting the the “To” property to the appropriate value.

So that’s programmatic animation. Next…I’ll blog about using Expression Blend to do the same thing.

---

Possibly related posts: (automatically generated)

• WPF Expander Control – Cool Things Part 2 (Animation and Auto-collapsing)