Question

I want to display a fullscreen image on which I can run a slide in animation when I get a drag mouse event that will reveal another image below it.

The slide animation is sort of: http://docs.jquery.com/UI/Effects/Slide

I want to know the various components of WPF to put together to get such an effect.

Edit (More specific):

I want to

1) Have a hotspot on the screen, like the right edge vertical center

2) When the user places his mouse pointer over this spot, he can pull the screen with his mouse towards the right and my app will launch as if it was underneath the screen.
I am doing this for a touch screen, so I want it to be a gentle swipe sort of).

I was thinking of implementing it this was: When the pointer hits the hotspot, take a screenshot of the screen, transform/animate it and reveal the previously taken screenshot of my app as the mouse drags the top image towards the right.

Is this the way I should go about?

Answer 1

All you need is a fullscreen WPF application

that has two stacked images:

<Window>
    <Grid>
        <Image ... MouseMove="...">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
        </Image>
        <Image .../>
    </Grid>
</Window>

and an animation that is started when the mouse moves above the top image:

<Storyboard>
    <DoubleAnimation To="768" Duration="0:00:10" 
                     Storyboard.TargetName="translation" 
                     Storyboard.TargetProperty="OffsetY"/>
</Storyboard>

Of course you can use a behavior instead of an eventhandler.

(There could be errors in this code as I didn’t test it)

EDIT

More on the added information in the question:

Yes this can be done. There are lots of references to taking screenshots here on SO.

Using touch and swipes can be done with WPF.

If you want this logic to be available system wide you will have to install a mouse/touch hook so you will be able to respond to this gesture from with any application.