Question

Just documenting this as a question an answer so that somebody else doesn’t have to suffer the same pain.

I have a WPF application that animates pages, much like swiping on an iPhone. All was good until one of the pages needed to contain a WebBrowser. It did not respond at all well to the animation – when it was supposed to slide in, it wouldn’t appear until you focused it, and when it was supposed to slide out, it would go away until you moved the mouse over it. In both cases it just popped in/out rather than animating.

Complicating matters, during the project it was decided to move back to .net 3.5 instead of 4 for unrelated reasons.

So the question is: how can I either (a) get the WebBrowser to properly animate; or (b) how can I hide the WebBrowser at the start of animation and show it again at the end. The animation is currently defined in XAML, and I don’t particularly want to change it to code.

And a follow up question is: is there a better way, still using .net 3.5?

Answer 1

UPDATE The WPF WebBrowser is so pathetically lame compared to the WinForms one, I have swapped over, using WindowsFormsHost. Everything below still applies, but the WebBrowser is now not so nobbled (eg. it has a DocumentCompleted event).

---

I pretty quickly gave up on the option to animate the WebBrowser, as it just got all too hard, and instead decided to hide and re-show it. The start of the animation is triggered by a Command on the View Model. It then finds the page that should be displayed, creates it, and kicks off the animation through an attached property that reflects the transition state.

I created an interface, IRequireTransitionInfo, such that a call to IRequireTransitionInfo.TransitioningFrom gives it a chance to hide itself and IRequireTransitionInfo.TransitioningTo to show again. TransitioningFrom was easy, but TransitioningTo had to be called when the storyboard completed.

Initially, in the constructor of the View Model, it went looking for the Storyboard and hooked into its Completed event, as in the code below:

    Storyboard animation = Application.Current.FindResource("SlideAnimation") as Storyboard;
    if (animation != null)
    {
      animation.Completed += new EventHandler(animation_Completed);
    }

And then the event handler:

void animation_Completed(object sender, EventArgs e)
{
  IRequireTransitionInfo info = currentViewModel as IRequireTransitionInfo;
  if (info != null)
    info.TransitioningTo(currentView);
}

This seemed to be working pretty well with .net 4. After downgrading to .net 3.5, when the code above to hook up the Completed event ran, I got the following error:

Specified value of type 'System.Windows.Media.Animation.Storyboard' must have IsFrozen set to false to modify.

Despite some of the other answers on SO, you cannot unfreeze a frozen Freezable, and moving the code into the constructor of the MainWindow didn’t help.

I went down the path of an attached property on the Storyboard that was bound to a command on the View Model.

<Storyboard x:Key="SlideAnimation" local:EventCommand.StoryboardCompleted="{Binding Source={StaticResource Locator}, Path=Current.MainViewModel.StoryboardCompletedCommand}">

However, this resulted in the following error at runtime:

Cannot convert the value in attribute 'ContentTemplate' to object of type 'System.Windows.DataTemplate'. Cannot freeze this Storyboard timeline tree for use across threads.

It seems you can’t do any databinding on a Storyboard (under .net 3.5 at least). Consequently, I solved the problem somewhat inelegantly by having the attached property just define the string name of a resource that was expected to implement an interface supporting notification of storyboard completion.

<Storyboard x:Key="SlideAnimation" local:EventCommand.StoryboardCompletedHandler="Locator">

If anybody knows of a better way to handle this situation under .net 3.5, I would be glad to hear.