<Grid x:Name="LayoutRoot"> <vsm:VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FlipGroup"> <VisualState x:Name="Status1"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Status2"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualStateGroup.Transitions> <VisualTransition From="Status1" To="Status2"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" /> <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="90"> <EasingDoubleKeyFrame.EasingFunction> <PowerEase EasingMode="EaseIn"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r2" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> <DiscreteDoubleKeyFrame KeyTime="00:00:00.25" Value="-90" /> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <PowerEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Collapsed" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualTransition> <VisualTransition From="Status2" To="Status1"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r2" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" /> <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="90"> <EasingDoubleKeyFrame.EasingFunction> <PowerEase EasingMode="EaseIn"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> <DiscreteDoubleKeyFrame KeyTime="00:00:00.25" Value="-90" /> <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <PowerEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Collapsed" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> </VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Button Content="Button" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" /> <Rectangle x:Name="r1" Width="300" Height="180" Fill="Red" > <Rectangle.Projection> <PlaneProjection/> </Rectangle.Projection> </Rectangle> <Rectangle x:Name="r2" Width="300" Height="180" Fill="Green" > <Rectangle.Projection> <PlaneProjection/> </Rectangle.Projection> </Rectangle> </Grid> // if you define the transitions, you must specify the third parameter to True to use the transition. VisualStateManager.GoToState(this, "Status2", true);