How can I animate a control so that it rolls out like a parchment scroll in WPF?

Question

Does anyone have any idea how one could animate a panel such that it appears to roll down like it is in an old-style parchment scroll in WPF? Any help would be greatly appreciated.

Answer 1

The problem is that this is a fairly complex animation that requires one part of the control to be inverted and squished while the remaining are of the control is not. So this can't be answered with a simple scale or stretch animation. You might be able to use multiple animations on VisualBrushes that point at your user contorl, but it does get complex to swap these things in and out at runtime.

I'd like to recommend you check out the Transitionals project on CodePlex:

Transitionals Project

Transitionals includes many different kinds of animations and one may be close enough for you. If not, you can look at how the transitions are built and see if you can tweak one to meet your needs.

Finally, the most performant way to do this is with shaders. Shaders require some math, though, and are written in HLSL (not C#). If you're interested in learning more I highly recommend you check out the following article:

Writing custom GPU-based Effects for WPF

Answer 2

The effect you looking for is realy complex. But an easy alternativ would be animate the height/width.
In this example i animate a stackpanel, but you could replace this with any control.

<StackPanel Name="myStackPanel">
...
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="myStackPanel"
                                     Storyboard.TargetProperty="Height"
                                     To="100" Duration="0:0:1.0" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
</StackPanel>

You probably need to add a second trigger which animates to 5 (on MouseLeave for example). Animating to 0 would probably block the MouseEnter Event.