Hello, everyone; I'm writing a WPF application, and I'd like the user interface to resemble menu "screens" that you might find in a video game. When the user selects an option, I'd like the current menu screen to "slide" to the side, as the new menu screen slides on. Going "back" would cause the current menu screen to slide off in the same fashion, and the parent menu to slide back on. It occurs to me that the framework for a menu system like this already exists, in the form of the WebBrowser component, using "Pages" for each menu screen. What I'd like to know is; is there some way to define custom transitions from one Page object to another, when moving forward and backward (i.e. sliding off the screen, instead of just "flashing" to the new page)? Thanks in advance for any expertise you can share. -Brian [Edited by - BTownTKD on March 8, 2010 6:31:49 AM]

I'm not sure if what you're looking for is a way to do this yourself or if you're also interested in something ready made but back when i was evaluating WPF component i noticed a nice wizard with built in effects that would fit with your next/back wish :
http://www.actiprosoftware.com/products/dotnet/wpf/wizard/livedemo.aspx

If you're looking for something more generik Telerik has a transition control in their 2010 beta that is working nice , it basically plays a shader on content change to extrapolate between old & new screen.

I'm not sure either, but a couple of more links.
Transitionals:

Quote:About Transitionals
Transitionals is a framework for building and using WPF transitions which provide an easy way to switch between UI views in a rich and animated way. Think of transitions for applications in the same way you think of transitions for video editing. Wipe, Cut, Dissolve, Star, Blinds and 3D Rotating Cube are all examples of transitions supported by the Transitionals framework.

MSDN:

Quote:XAML Animation Overview
Windows Presentation Foundation (WPF) provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. Animation can make an attractive user interface even more spectacular and usable. By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

Sure there are loads of ways to do this in wpf.

Slide:
Set a layout transform for your new screen. Offset x by the width and the animate it offsetX from width to 0.

Fade:
Set new screen opacity to 0 and animate it to 1.

Zoom:
set a scale transform for your new screen and set scale x and scale y to 0, animate to 1. (you could also achieve a stretch effect by only animating one property)

Basically using a combination of Transforms and Animations, you should be able to achieve most powerpoint style effects.

example of stretching an object while fading it in

        <Storyboard>          <DoubleAnimation From="0"                           To="1"                           Duration="0:0:0.5"                           Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />          <DoubleAnimation From="0"                           To="1"                           Duration="0:0:0.5"                           Storyboard.TargetProperty="Opacity" />        </Storyboard>

Quote:Original post by ChaosEngine
Sure there are loads of ways to do this in wpf.
[...]

Yep, Transitionals can give hints even though it's quite old by now. In addition to the example you provided, also Visual State Manager and pixel shaders would do the job. I guess which one to use depends on the desired effects and unfortunately I'm not knowledgeable enough to tell precisely which method to choose over the others in a given situation.