Archive for September, 2008

My WPF Code Snippets… now available for Visual Basic

Monday, September 22nd, 2008

I first published my C# WPF code snippets last December in this post.  Due to increasing demand for VB versions of these snippets, I spent this past weekend porting them to VB.  They are now available for both languages. You can download the snippet installer here.

Updated October 1, 2008: 

I just updated the snippets to play nicely with the Strict option in VB.  Grab the latest installer to get a version of the VB snippets that properly casts the result of the CLR get accessors based on the DP type.

All 65 snippets are supported in both C# and VB.NET now.  The shortcuts for the VB versions are slightly different because the VB code editor does not provide the same level of support for snippets as the C# editor  (see rant below). 

In VB, for example, you cannot just type "dp" and hit tab twice to get a list of my dependency property snippets.  Instead, you must type the entire unique shortcut (e.g., "dp2") and then hit tab to expand that specific snippet.  It is probably easier to install all of the snippets within a single category (like "My Code Snippets") and then select the desired snippet from a list, as shown here:

I hope the VB snippets are helpful to a few of you!  Let me know if you find any problems with the ported code.


Small Rant Regarding VB Snippet Support

In my earlier post, I talked about how I am looking forward to a day when Visual Studio code snippets will support more advanced macro-like functionality.  After spending some time working with snippets in VB, I realize just how lucky I am to work primarily in C#.  On a scale of Classic Pong to XBox 360, the C# snippet support is probably somewhere around a PS2, whereas the VB.NET snippet support is barely a Nintendo 64!

Come on, Microsoft…  show a little love for that monster base of VB developers you created in the 90’s!  At a minimum, at least give them snippet parity with C#.  Here are a few of my complaints:

  • Intellisense should provide snippet hints.
  • The user should not have to tab through every field in the snippet… just the unique fields.
  • There should be support for functions like ClassName().
  • The $end$ tag should be supported.
  • Pressing ‘Enter’ should take the snippet out of edit mode and place the cursor at the $end$ tag.
  • If there are multiple snippets with the same shortcut, typing the shortcut should provide a filtered list of descriptions for the matching snippets.

Okay, I’m sure most VB developers know how to deal with all these limitations, and since I’m not really part of that constituency, my voice probably doesn’t hold much sway in this argument…  so I’m done now.  Enjoy the snippets!

Ten reasons to check out the new Blendables Layout Mix

Friday, September 19th, 2008

Yes, this is a plug for some new WPF goodness from a third party. If you’re simply not interested in third-party products, you can stop reading now. 🙂

The good folks at IdentityMine have just released two new “mixes” of WPF controls under their blendables brand (as well as an updated version of their essentials mix). Both of the new products deal with layout… one targets 2D layout and one targets 3D layout. I haven’t played much with the 3D mix yet, but I have tinkered with the CTP version of the 2D layout mix quite a bit and it contains some definite WPF goodness. For those who are interested in seeing these products in action, a free trial version can be downloaded from, including a suite of samples.

Partial Disclosure

Some have insinuated that I might be in the employment of the aforementioned IdentityMine. It is my policy to neither confirm nor deny any speculation regarding Mine Identity, but to instead encourage all rumors both near fetched and far (and I’ve heard some good ones!). Meanwhile, I try to keep my blog focused on WPF goodness, and there is definitely plenty in the newest products from IdentityMine.

In the interest of partial disclosure, I must admit that I know some members of the IdentityMine team, and depending on my mood, I might even call them friends. They may or may not have encouraged me to review the product. They certainly did not give me any remuneration for doing so! (C’mon… shouldn’t I at least get a free copy, guys? ;))

Now for the WPF goodness…

1. Animation Panels

The layout mix includes more than a dozen panels that can be used for laying out your WPF UI. These are not just ordinary panels though. They all derive from a custom AnimationPanel base class. This base class provides support for animating children of the panel to their appropriate sizes and positions. As such, if you resize a wrap panel, for example, the children will automatically animate to their new layout positions. The type and behavior of the animation is easily configured (or even disabled, if desired).

2. Full Set of Native Panels

The blendables layout mix includes its own implementation of the most common native WPF panels (Canvas, StackPanel, WrapPanel, DockPanel, and Grid). These panels work exactly like their native counterparts, but since they derive from AnimationPanel, they bring all of the animation goodness to the table.

3. Some Cool New Panels

In addition to the native panels, there are some cool new panels including AnimatedTimelinePanel, AutoStretchStackPanel, CameraPanel, Carousel, RadialPanel, RandomPanel, RelativeCanvas, and StackedStackPanel. Some of these are self explanatory. For those that are not, I’d encourage you to look at the samples included with the layout mix to see them in action. Again, all of these derive from the AnimationPanel base class and provide support for all the animation features in the product.

4. Enter and Exit Animations

One of the questions I receive a lot is, “How do I add enter and exit animations to items in my databound ItemsControl?” The answer is always that enter animations are easy, but exit animations are rather tricky. Once an item is removed from the databound collection, its corresponding visuals are automatically removed from the element tree. This means that there is nothing left to animate out.

The blendables layout mix magically solves this problem by coordinating the lifetime of its children on your behalf. All you have to do is set the ExitAnimator, ExitAnimationRate, and ExitTo properties (or optionally handle the ChildExiting event and set an exit location in your handler). There are similar properties for simplifying enter animations.

5. Layout-to-Layout Animations

Another big question since the introduction of the WPF platform is, “How do I implement layout-to-layout animations?” Again, this is not easily done using the native panels because a child element can only have a single parent. There is no way to animate a child from one parent to another. I describe the typical way of simulating layout-to-layout animations in this article.

The Layout Mix offers the first real solution to the layout-to-layout problem by introducing a new panel called SwitchPanel. This panel exposes a Layouts collection which can contain any number of the other animation panels. At any given moment, one layout is active. To switch to another layout, simply change the ActiveLayoutIndex property. The children of the SwitchPanel will automatically animate to their new positions as determined by the new active layout. The animation is configurable via the SwitchAnimator and SwitchAnimationRate properties. This is very cool!

6. Layout-Specific Templates

Each layout specified in the Layouts collection of a SwitchPanel can have its own associated data template. This is really handy when using the SwitchPanel as the items host for an ItemsControl. You simply set the SwitchTemplate property on the animation panel. When that layout becomes active, any SwitchPresenter element within the subtree will be represented using the visuals in the specified SwitchTemplate.

7. Penner Easing Equations

The layout animations, enter and exit animations, and switch animations all leverage a simplified animation model. You simply set the appropriate “Animator” property using what is referred to in the product as an “iterative animator”. This is simply a frame-based animation class that is used to animate from one value to another value over a given duration or at a specified rate.

The cool thing about the iterative animator approach is that it easily supports Robert Penner’s easing equations to drive the animators. The Penner equations are familiar and appealing to designers that come from the flash world. Both the layout mix and the 3D mix provide the full set of Penner equations via a static PennerEquations class and the equations can easily be referenced by name in markup. It looks like this:

<blendables:WrapPanel LayoutAnimator="BounceEaseIn" ... />

8. Extensible Animation Model

You can define your own iterative animators too. I noticed that the layout mix includes support for all the equations created by Robert Penner, himself. For example, it contains all 3 of the “bounce” equations: BounceEaseIn, BounceEaseOut, and BounceEaseOutIn. However, other developers have gone a step further and defined a BounceEaseInOut version, as shown in this google code project.

I was able to create a similar animator for use in the layout mix by defining my own iterative equation:

public class BounceEaseOutInEquation : IterativeEquation<double>
    public override double Evaluate(TimeSpan currentTime,
        double from, double to, TimeSpan duration)
        return ( currentTime.TotalSeconds < duration.TotalSeconds / 2 )
            ? PennerEquations.BounceEaseOut.Evaluate(currentTime, from, to, duration)
            : PennerEquations.BounceEaseIn.Evaluate(currentTime, from, to, duration);

Then, I simply needed to define a DoubleAnimator class that used my iterative equation:

public class BounceEaseOutInAnimator : DoubleAnimator
    public BounceEaseOutInAnimator()
        : base(new BounceEaseOutInEquation()) {}

To specify my animator for use in an animation panel, I simply define an instance of the animator class as a resource and refer to it using a StaticResource reference, as shown here:

  <src:BounceEaseInOutAnimator x:Key="BounceEaseInOut" />
  <blendables:SwitchPanel SwitchAnimator="{StaticResource BounceEaseInOut}" ... />

9. Extensible Panel Model

Not only is the animation model extensible, but the panel model itself is also easily extended. Writing a custom animation panel is very similar to writing any other WPF panel. In fact, I was able to transform several of my own panels into animation panels very quickly with only a few minor changes. First, instead of deriving from Panel, I derived from AnimationPanel. Then, instead of overriding MeasureOverride() and ArrangeOverride(), I overrode MeasureChildrenOverride() and ArrangeChildrenOverride(). Within the latter function, instead of calling the Arrange() method on each child, I called the ArrangeChild() method of the base class and supplied the child as a parameter. Voîla! I had a custom animation panel.

10. SimpleBinding and EvalBinding

Some who have seen my responses in the WPF Forum may have noticed that I’m a big fan of a feature called EvalBinding that was part of the blendables essentials mix when it released a couple of years ago. I’m happy to see that you also get the SimpleBinding and EvalBinding markup extensions as part of the layout mix (and even the 3D mix).

EvalBinding lets you include code expressions in markup as part of a binding. For the nitty gritty details, you can check out the EvalBinding whitepaper on the blendables site.