locked
How can I spin an entire window around in WPF? RRS feed

  • Question

  • I would like to be able to have an effect on my main window where it appears to turn around to display the configuration page.  Think of it like you're looking at a piece of paper.  To configure the application, when you press the configure button, the window appears to turn around, like you're seeing a piece of paper turn over.  In actuality, once the window has turned to the side, it disappears and the configuration window appears to continue the rotation until it is flat in front of you.  When you dismiss the configuration window, the process is reversed.

    I know I'm asking a lot, but is there any way to do this in XAML?  I know I can do a storyboard where the width of the window shrinks to 1, but that doesn't make the contents of the window appear to change, just get cropped down to nothing.

    Thanks,

    Jamie

    Monday, February 7, 2011 10:35 PM

All replies

  • The trick is to wrap the front and back of your cards in a Viewbox, then animate both the skew and the width. Take a look:

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    	x:Class="_DTest.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="500" Height="500">
    	<Window.Resources>
    		<Storyboard x:Key="Flip">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="Front">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="89"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Front">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Back">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="300"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="Back">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-89"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    			<BeginStoryboard Storyboard="{StaticResource Flip}"/>
    		</EventTrigger>
    	</Window.Triggers>
    	<Grid>
    		<Viewbox x:Name="Front" Width="300" Height="200" RenderTransformOrigin="0.5,0.5" >
    			<Viewbox.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Viewbox.RenderTransform>
    			<Border Background="Black" Width="300" Height="200" >
    				<TextBlock Text="Look at me!" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontWeight="Bold"/>
    			</Border>
    		</Viewbox>
    		<Viewbox x:Name="Back" Width="0" Height="200" RenderTransformOrigin="0.5,0.5">
    			<Viewbox.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform AngleY="-89"/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Viewbox.RenderTransform>
    			<Border Background="Red" Width="300" Height="200">
    				<TextBlock Text="Look at me!" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontWeight="Bold"/>
    			</Border>
    		</Viewbox>
    	</Grid>
    
    	
    </Window>
    
    You could also take a screen shot of your card and actually flip it in 3D using Viewport3D (Apple does this alot with iOS), but you can potentially take a big resource hit doing it this way.


    Leon Terry
    TFK Labs
    • Proposed as answer by VLTII Wednesday, February 9, 2011 7:03 PM
    Tuesday, February 8, 2011 10:25 PM