Jump to content
  • Advertisement
Sign in to follow this  
BTownTKD

[.net] WPF - Transitioning from screen to screen (like in a game menu)

This topic is 3046 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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]

Share this post


Link to post
Share on other sites
Advertisement
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!