Animating height and width

One of the most cool features of WPF is animation. WPF has a great architecture that offers almost unlimited possibilities, but every time I wanted to animate the Height and Width properties I had problems, because the “Height” and “Width” properties are often set to the “Auto” value (which is internally represented as double.NaN). The “DoubleAnimation” class cannot deal with this value. It uses “From” and “To” properties and calculates the values in between.

If the “From” property isn’t set, then “DoubleAnimation” starts with the current value and tries to animate to the To property. If the current value is “double.NaN”, then it cannot interpolate the intermediate values and throws the following exception:

Cannot animate the 'Height' property on a 'xxx' using a
'System.Windows.Media.Animation.DoubleAnimation'.

There is not a lot you can do about this one. I tried to bind the “From” property to the “ActualHeight” property. Although this might work when collapsing from “ActualHeight” to 0, there is no way to get expand it again, because you cannot go back to “ActualHeight”. I also tried to bind to “DesiredSize.Height”, but I wasn’t successful. There is another disadvatage when using animation with binding, because the entire storyboard needs to be froozen and this isn’t possible when you use binding in the storyboard.

Animating the “Height” property seems to be impossible, so we should divert to another scenario. A popular approach is to use “LayoutTransform” and use a “ScaleTransform” that animates the “ScaleY” property from 1 to 0 and back again. Although this works, the effect is quite different then animating the “Height” property (see my attached sample application for the difference). Another disadvantage is that it doesn’t respect the “MinHeight” and “MaxHeight” properties.

I decided to use a different approach and to adjust the size of the control by overriding the “MeasureOverride” method. This method multiplies the requested size with two new dependency properties and returns this new size. This works and because the multiply properties are set to 1.0 by default you don’t notice the control. Animating the multiplier to 0 hides the control completely and animating it back to 1.0 uncovers the entire control.

I called this control the SizerControl and provided sourcecode with it to demonstrate how it works. I tried to convert the control to a Transform class (CropTransform) to be able to use it as a LayoutTransform, but I couldn’t find decent documentation about creating custom transformations. Full sourcecode of the SizerControl can be found in SizerControl.cs. An example can be found in TestWindow.xaml.

Attachments: Animation test (source) and Animation test (executable).

Audi R8

Last week I could drive an Audi R8 for a few days. It was awesome, but I guess other people noticed it too :). A friend of mine was spotted too.

Audi R8

Only one week before I drove my Volkswagen around in The Netherlands. With only 25bhp it was quite a difference with the 420bhp of the Audi.

VW Beetle in Engelenburg

Hightlights of WPF 3.5 SP1 (beta)

Last week the first beta of .NET 3.5 SP1 was released, which has some improvements for WPF as well. I don’t understand why they don’t call it .NET 3.6, because it introduces a lot of new features that aren’t compatible with .NET v3.5.

Some of the most cool features are described below (including some links to blogs that describe how to use it):

  • Hardware accelerated rendering of Blur and DropShadow bitmap effects. This should dramatically improve the performance of these effects (previously these effects were calculated in software).
  • Improved cold start and splash screen (unfortunately, no sample is available yet). More performance improvements are discussed here. Other tips about improving startup time can be found on the WPF performance blog.
  • Improved WebBrowser control to display HTML content.
  • A handy StringFormat property was added to Binding class to format strings (see Lester’s WPF blog).
  • Alternating rows support within controls derived from ItemsControl.
  • Writing custom shaders (see Greg Schechter’s blog and Tamir Khason’s blog).

The major thing that I am missing is the addition of new controls, such as the datagrid and ribbon control. Tim Sneath explains in his blog that these controls will be shipped seperately before the end of the year.

Channel 9 presented some videos about WPF 3.5 SP1 that are worth viewing:

Patient Journey Demonstrator

I was looking at the Aaron’s blog and I read about the Patient Journey Demonstrator. It is a reference implementation of the Microsoft Health Common User Interface for Silverlight 2 (beta 1).. Microsoft created design guidelines specifically for the healthcare market and they have completed it by providing a reference implementation. Don Burnett also blogs about it.

Microsoft published a set of Silverlight and WPF controls for the health industry and guess what I am currently working on? Yes, you’re right… A WPF-based user interface for the healthcare market. Life can be so beautiful (as long as this application doesn’t make me unemployed). ;)

Patient Journey Demonstrator

UPDATE: The source of the information can be found on the Martin Grayson’s blog.

UPDATE: The sourcecode can be downloaded from Codeplex.

Doesn’t Infragistic understand WPF architecture?

I am investigating which Ribbon control I will use, until Microsoft releasesits own WPF-based ribbon control. I downloaded several ribbons, but I started using the Infragistic ribbon first. I have good experiences with Infragistics back from the days of Windows Forms.

But I am completely amazed by the quality of the ribbon. Of course, the ribbon looks nice and will probably be compliant with the 2007 Microsoft Office System User Interface Guidelines. But WPF is more then writing objects and properties as XAML code. WPF is great for a variety of reasons, but the ability to use databinding is one of the best. It just seems that Infragistics doesn’t understand databinding and its power.

An example… Suppose I have the following object:

ObservableCollection<string> items = new
    ObservableCollection<string>{ "One", "Two", "Three" };

I can bind this to a listbox using the following piece of code (pseudocode):

<ListBox ItemsSource="{Binding ...}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="Option.png"/>
                <TextElement Text="Item "/>
                <TextElement Text="{Binding}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

My listbox will now display the items “Item One”, “Item Two” and “Item Three” with an image in front of it. If the collection changes, then the listbox is updated automatically.

So far, so good… This feature can also be used for the Most Recent File list in the ribbon’s application menu. The most recent file list uses an ObjectDataProvider that supplies the most recent files. I would like to bind this to the RecentItems property of the ApplicationMenu object and specify an ItemTemplate to render them appropriately. Unfortunately, ApplicationMenudoesn’t support itemtemplates for the RecentItems property.

To my surprise, they do have an ItemTemplate for the RecentItemsHeader to specify the itemtemplate for the header. This is completely insane, because you only have one header, which is probably static. The example given on the website is also useless. They define a RecentItemsHeaderTemplate, but use no binding whatsoever. The definition of the RecentItemsHeader tag is also quite useless.

I think the Infragistics API should be reviewed and updated. This is just plain ugly.