Scrolling credits screen in WPF... ideas?

Question

I'm looking to create a (possibly 3D) scrolling credits screen for my app, that is similar to what you might see at the end of a movie, but should be able to include graphics, animations, etc.

What is the best way to go about doing this? I'm thinking I could create a very tall UserControl that contains the entire content to scroll and then just animate it inside a ScrollViewer, or even just a Canvas and animate the position, but there are obvious performance issues with doing something like that and I'm afraid it would be too slow.

It would be cool if the credits could scroll on a 3D surface, kind of like Star Wars, or with a fisheye effect, but I know squat about 3D in WPF.

I do definitely want some kind of fading/alpha-blending so the credits appear to fade in at the bottom and/or fade out at the top, but I'm also stuck on how to do that.*

*Actually, for that I guess I could overlay some semitransparent gradient, so long as the background was a solid color.

Answer 1

Well since nobody seems to have any comments, I went ahead and did things how I described and must say the results are quite good. I used a vertical LinearGradientBrush to do the fading, and simply animated a UserControl inside a Canvas for the scrolling (animating Canvas.Top from <ActualHeight of Canvas> to (negative)<ActualHeight of UserControl>). Looks pretty good. :)

Here's the animation (note I had to set DoubleAnimation.To in code to scroller.ActualHeight):

<DoubleAnimation
x:Name="scrollAnim"
BeginTime="0:0:30"
Duration="0:0:30"
From="200"
Storyboard.TargetName="scroller"
Storyboard.TargetProperty="(Canvas.Top)" />

And here's the scroller element:

<Canvas
ClipToBounds="True"
x:Name="scrollerCanvas">
<Credits:ScrollingCredits
 x:Name="scroller"
 Canvas.Top="200"
 Width="{Binding ElementName=this, Path=ActualWidth}" />
</Canvas>

(There is some other stuff going on, hence why the scrolling starts at 0:0:30.)

Here's the fader:

<Border
x:Name="border"
Opacity="0">
<Border.Background>
 <LinearGradientBrush
  StartPoint="0,0"
  EndPoint="0,1">
  <GradientStop
   Offset="0"
   Color="Black" />
  <GradientStop
   Offset="0.2"
   Color="#00000000" />
  <GradientStop
   Offset="0.8"
   Color="#00000000" />
  <GradientStop
   Offset="1"
   Color="Black" />
 </LinearGradientBrush>
</Border.Background>
</Border>

Answer 2

You can use a VisualBrush to "paint" your credits user control on a 3d surface.