Creating Animated GIF files in WPF

I would like to present some of the functionality that Windows Presentation Foundation (WPF) provides to viewers of my website, and I don’t want to require them to have the .NET 3.0 Framework installed. In particular I want to capture animations, both in 2D and 3D, and play them back as little filmstrips.

I’m not an expert in the field of animation and video, so my tool needs to be fairly easy to use.

With that in mind I did some looking around (the web) for appropriate tools. Unfortunately, I didn’t find anything that seemed simple enough to use. If anyone knows of a good tool please let me know.

Now, as a stubborn, old fashioned programmer, I couldn’t give up yet. I know that WPF has great imaging support, and sure enough, it also supports creating animated GIFs. After studying the MSDN documentation (I couldn’t find any external articles on the subject), I had a functional "FilmStrip" prototype.

Here’s a quick example of how it can be used. Assume that you have a window with a Viewport3D that you somehow can perform transformations/animations on. In addition you have three buttons named "Start Film Strip", "Add Frame", and "Save Film Strip".

First you declare your FilmStrip object:

private FilmStrip Film = new FilmStrip();

In the code behind you have the following click event handlers:

void StartFilmButton_Click(object sender, RoutedEventArgs e)

{

  Film.Start();

}

 

void AddFrameToFilmStripButton_Click(object sender, RoutedEventArgs e)

{

  Film.AddFrame(fViewport);

}

 

void SaveFilmStripButton_Click(object sender, RoutedEventArgs e)

{

  Film.SaveToFile(@"C:\Temp\FilmStrip.gif");

}

What you can do with this in place, is to click the Start button, followed by multiple clicks on the Add Frame button at appropriate times, finalized by a click on the save button.

That seems to be fairly straight forward. With this basic functionality operational, the next logical step would be to tie into the WPF animation framework to automate adding frames to the filmstrip. Unfortunately, the GIF file that this code creates doesn’t seem to behave quite right, at least not when I display it in IE7. What happens is that the prior frame is not cleared before the next frame is displayed. I will have to look into that at some other time. Maybe somebody already knows how to do this?

Here’s the source for the FilmStrip class:

namespace Koda.WPF

{

using System;

using System.Windows.Media.Imaging;

using System.Windows;

using System.Windows.Media;

using System.IO;

 

public class FilmStrip

{

private BitmapEncoder fEncoder;

 

protected BitmapEncoder Encoder

{

  get { return fEncoder; }

}

 

public void AddFrame(BitmapFrame frame)

{

  Encoder.Frames.Add(frame);

}

 

public void AddFrame(BitmapSource source)

{

  AddFrame(BitmapFrame.Create(source));

}

 

public void AddFrame(FrameworkElement element)

{

  RenderTargetBitmap bmp = new RenderTargetBitmap((int)element.ActualWidth,

    (int)element.ActualHeight, 1 / 96, 1 / 96, PixelFormats.Pbgra32);

  bmp.Render(element);

  AddFrame(bmp);

}

 

protected virtual BitmapEncoder CreateEncoder()

{

  return new GifBitmapEncoder();

}

 

public void SaveToFile(String fileName)

{

  using (FileStream fs = new FileStream(fileName, FileMode.Create))

  {

    Encoder.Save(fs);

  }

}

 

public void Start()

{

  fEncoder = CreateEncoder();

}

}

}

Expression Blend

I have been using Expression Blend extensively the last few days with the intent to gain an understanding of how powerful it is and how productive I can become using it instead of handcoding XAML from within Visual Studio.

 

So far, my impression is that it has great potential, it’s very powerful, and that I’m not sure how productive the environment is. There’s a significant learning curve, but I hope that once I climb a little higher on that curve, I will have a new RAD design tool in my arsenal.

 

I’m hoping to post several blog items here on the subject, so stay tuned…

Renaming a WPF application’s Main Page (or Window)

When you create a new WPF application (Windows or Browser app) in Visual Studio, the application’s main page (or window) is named "Page1.xaml" (or "Window1.xaml").

 

If you don’t like this default name you can easily and safely rename the file this way:

1. Rename the file in the Solution Explorer the "normal" way, using the F2 key or clicking twice on the file name.
2. Open the "App.xaml" (or "MyApp.xaml" maybe) and update the StartupURI attribute of the Application element to match the new filename.

And that should be it!

Where’s my WPF Window Icon?

Just a quick note about window icons in WPF applications. After setting the icon in the project’s property page, you expect the icon to show up in the top-left corner of windows and in the tray bar. Unfortunately this doesn’t happen when you are debugging  the application from within Visual Studio (via the F5 key).

 

But don’t worry! If you run the application normally, either via Ctrl+F5 in VS, or by starting the application externally, the icon is there after all.

 

I don’t know the reason for this minor Visual Studio glitch, and just wanted to document it here.