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.*

Jena

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>

Jena

What does ScrollingCredits look like? The rest of the code doesn't really make sense without that. – Riser

Oh, it's just a very simple UserControl that consists of a big TextBlock... it could be anything at all really. – Jena

Answer 2

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

Traps