Form Spinning transition?

5 posts, 0 answers
  1. Albert
    Albert avatar
    65 posts
    Member since:
    Aug 2008

    Posted 26 Aug 2009 Link to this post

    Can someone teach me or post the code on that transition on the samples when clicking the "View Code" button. Thanks
  2. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 28 Aug 2009 Link to this post

    Hi Albert,

    Attached is a sample application demonstrating the technics.

    Best wishes,
    Kaloyan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 08 Oct 2009 Link to this post

    This example works perfectly, but I'm trying to do something a little more sophisticated and have run into trouble.  Inside each of the grids (green and red) I have inserted a frame.  I have two separate xaml files for the sources of these frames.  What I want to do is use the spin to transition between content pages when I select a menu item.  The xaml content files have images and text.  When I begin the storyboard, the content xaml on the start side (green) shrinks and turns sideways as it should, but when the other side (red) spins into view, it still shows the first xaml even though we're looking at the other grid/frame/content xaml.

    Here is an abbreviated version of the xaml:

    <UserControl xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"   
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"    
        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" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"   
        x:Class="xyz.MainPage" 
        d:DesignWidth="1024" d:DesignHeight="768">  
        <UserControl.Resources> 
                <Storyboard x:Name="Transition" 
                            BeginTime="0:0:2">  
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid1" 
                                                   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="0" 
                                              KeySpline="0,0,0.389999985694885,1" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:00.8190000" 
                                              Value="-90" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid1" 
                                                   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="0" 
                                              KeySpline="0,0,0.389999985694885,1" /> 
                        <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" 
                                              KeyTime="00:00:01.3000000" 
                                              Value="0" /> 
                        <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" 
                                              KeyTime="00:00:01.7000000" 
                                              Value="0" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid1" 
                                                   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">  
                        <EasingDoubleKeyFrame KeyTime="00:00:00" 
                                              Value="0" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="-525" 
                                              KeySpline="0,0,0.389999985694885,1" /> 
                        <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" 
                                              KeyTime="00:00:01.3000000" 
                                              Value="-525" /> 
                        <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" 
                                              KeyTime="00:00:01.7000000" 
                                              Value="0" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid1" 
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00" 
                                              Value="1" 
                                              KeySpline="0.200000002980232,0,0.379999995231628,1" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" 
                                              Value="1" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" 
                                              Value="0" /> 
                        <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" 
                                              Value="1" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                  Storyboard.TargetName="border" 
                                                  Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">  
                        <EasingColorKeyFrame KeyTime="00:00:01.3000000" 
                                             Value="#4C081130" /> 
                        <SplineColorKeyFrame KeyTime="00:00:01.7000000" 
                                             Value="#00081130" 
                                             KeySpline="0.200000002980232,0,0.379999995231628,1" /> 
                    </ColorAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="border" 
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00" 
                                              Value="0" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" 
                                              Value="1" /> 
                        <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" 
                                              Value="1" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" 
                                              Value="1" 
                                              KeySpline="0.200000002980232,0,0.379999995231628,1" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.3000000" 
                                                   Storyboard.TargetName="grid2" 
                                                   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="90" 
                                              KeySpline="0,0,0.389999985694885,1" /> 
                        <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" 
                                              KeyTime="00:00:00.7190000" 
                                              Value="0" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid2" 
                                                   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="0" 
                                              KeySpline="0,0,0.389999985694885,1" /> 
                        <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" 
                                              KeyTime="00:00:01.3000000" 
                                              Value="0" /> 
                        <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" 
                                              KeyTime="00:00:01.7000000" 
                                              Value="0" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid2" 
                                                   Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)">  
                        <EasingDoubleKeyFrame KeyTime="00:00:00" 
                                              Value="0" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="-525" 
                                              KeySpline="0,0,0.389999985694885,1" /> 
                        <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" 
                                              KeyTime="00:00:01.3000000" 
                                              Value="-525" /> 
                        <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" 
                                              KeyTime="00:00:01.7000000" 
                                              Value="0" /> 
                    </DoubleAnimationUsingKeyFrames> 
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="grid2" 
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">  
                        <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                                              Value="0" /> 
                        <SplineDoubleKeyFrame KeyTime="00:00:01.8190000" 
                                              Value="1" 
                                              KeySpline="0.200000002980232,0,0.379999995231628,1" /> 
                        <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" 
                                              Value="1" /> 
                    </DoubleAnimationUsingKeyFrames> 
                </Storyboard> 
        </UserControl.Resources> 
          
        <Grid x:Name="LayoutRoot">  
            <Grid.RowDefinitions> 
                <RowDefinition Height="90" /> 
                <RowDefinition Height="0.783*"/>  
                <RowDefinition Height="0.043*"/>  
            </Grid.RowDefinitions> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="1.6*"/>  
                <ColumnDefinition Width="6*"/>  
                <ColumnDefinition Width="1.6*"/>  
            </Grid.ColumnDefinitions> 
     
            <!--<navigation:Frame Grid.Column="1" Grid.Row="1" Source="/ContentPage1.xaml" />--> 
            <Button Click="Button_Click" VerticalAlignment="Top" HorizontalAlignment="Center" 
                    Content="Flip" Grid.Column="1" Grid.Row="1"/>  
            <Grid x:Name="grid1" 
                  HorizontalAlignment="Center" 
                  Margin="0,0,0,0" 
                  VerticalAlignment="Center" 
                  RenderTransformOrigin="0.5,0.5"   
                  Grid.Column="1" Grid.Row="1">  
                <Grid.Projection> 
                    <PlaneProjection /> 
                </Grid.Projection> 
                <Grid.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="1" /> 
                        <SkewTransform /> 
                        <RotateTransform /> 
                        <TranslateTransform X="0" 
                                            Y="22" /> 
                    </TransformGroup> 
                </Grid.RenderTransform> 
                <Border Height="665" 
                        HorizontalAlignment="Center" 
                        Margin="0,0,0,0" 
                        VerticalAlignment="Center" 
                        Width="755" 
                        Opacity="1" 
                        RenderTransformOrigin="0.5,0.5" 
                        Background="Green" 
                        BorderBrush="#FF68AABD" 
                        BorderThickness="1,1,1,1" 
                        CornerRadius="9,9,9,9">  
                    <Border.RenderTransform> 
                        <TransformGroup> 
                            <ScaleTransform /> 
                            <SkewTransform /> 
                            <RotateTransform /> 
                            <TranslateTransform X="0" 
                                                Y="0" /> 
                        </TransformGroup> 
                    </Border.RenderTransform> 
                </Border> 
                <Border x:Name="border" 
                        Height="665" 
                        HorizontalAlignment="Center" 
                        Margin="0,0,0,0" 
                        VerticalAlignment="Center" 
                        Width="600" 
                        RenderTransformOrigin="0.5,0.5" 
                        Background="#4C081130" 
                        BorderBrush="{x:Null}" 
                        BorderThickness="1,1,1,1" 
                        CornerRadius="9,9,9,9" 
                        Opacity="0" 
                        Visibility="Visible">  
                    <Border.RenderTransform> 
                        <TransformGroup> 
                            <ScaleTransform /> 
                            <SkewTransform /> 
                            <RotateTransform /> 
                            <TranslateTransform X="0" 
                                                Y="0" /> 
                        </TransformGroup> 
                    </Border.RenderTransform> 
                </Border> 
                <navigation:Frame x:Name="FrameSide1" Source="/ContentPage1.xaml"/>  
            </Grid> 
            <Grid x:Name="grid2" 
                  HorizontalAlignment="Center" 
                  Visibility="Visible" 
                  Margin="0,0,0,0" 
                  Opacity="0" 
                  VerticalAlignment="Center" 
                  RenderTransformOrigin="0.5,0.5" 
                  Grid.Column="1" 
                  Grid.Row="1">  
                <Grid.Projection> 
                    <PlaneProjection RotationY="90" /> 
                </Grid.Projection> 
                <Grid.RenderTransform> 
                    <TransformGroup> 
                        <ScaleTransform ScaleX="1" /> 
                        <SkewTransform /> 
                        <RotateTransform /> 
                        <TranslateTransform X="0" 
                                            Y="22" /> 
                    </TransformGroup> 
                </Grid.RenderTransform> 
                <Border Height="665" 
                        HorizontalAlignment="Center" 
                        Margin="0,0,0,0" 
                        VerticalAlignment="Center" 
                        Width="755" 
                        Opacity="1" 
                        RenderTransformOrigin="0.5,0.5" 
                        CornerRadius="9,9,9,9" 
                        Background="Red" 
                        BorderBrush="#FF68AABD" 
                        BorderThickness="1,1,1,1">  
                    <Border.RenderTransform> 
                        <TransformGroup> 
                            <ScaleTransform /> 
                            <SkewTransform /> 
                            <RotateTransform /> 
                            <TranslateTransform X="0" 
                                                Y="0" /> 
                        </TransformGroup> 
                    </Border.RenderTransform> 
                </Border> 
                <navigation:Frame x:Name="FrameSide2" 
                                  Source="/ContentPage2.xaml" /> 
            </Grid> 
              
        </Grid> 
    </UserControl> 
     

    and here is the code that executes when I press the button:

            private void Button_Click( object sender, RoutedEventArgs e )  
            {  
                var storyBoard = this.Resources["Transition"] as Storyboard;  
     
                if ( storyBoard != null )  
                {  
                    storyBoard.Begin();  
                }  
     
            }  
     

    Why am I still seeing ContentPage1.xaml after the spin?

    ... and a second related question: in your view code/preview example you can spin back and forth between the two sides.  It looks like this storyboard is only one way, from grid1 to grid2.  Do I need a second storyboard to spin back to grid1 when I'm positioned at grid2?  How do you do that?

    Thanks in advance,

    Terry


  4. Terry
    Terry avatar
    157 posts
    Member since:
    Jul 2009

    Posted 12 Oct 2009 Link to this post

    It occurs to me that it might be possible to shrink the fram, rotate the xaml to -90, change the source to the new xaml and rotate it back.  This would allow me to do spiffy transitions between any two pages.  The challenge is, is it possible to revise the source property inside the storyboard?  Can you use ObjectAnimationUsingKeyFrames  to accomplish this?  If not, I guess I could have two animations one to rotate the old content away, and one to rotate the new content back, with an event in between to change the source.  Has anyone accomplished this?  I would appreciate seeing your code.

    Thanks,

    Terry  
  5. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 13 Oct 2009 Link to this post

    Hello Terry,

    You can try to hide the elements in the frame when the spinning animation is loaded.

    Sincerely yours,
    Kaloyan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top