Visual Effect "View Code" Telerik Demo

8 posts, 0 answers
  1. Paloma
    Paloma avatar
    39 posts
    Member since:
    Mar 2009

    Posted 24 Mar 2009 Link to this post

    Hi everybody!
    I would like to know how to do the visual effect when, in the Telerik demo, we click "View Code" or "Preview".
    Does anybody know how to do this??
    Thanks
  3. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 24 Mar 2009 Link to this post

    Hi Paloma,

    The animation is achieved via a ScaleTransform  with ScaleX going from 1 to 0, hiding the first page, displaying the second page, and again ScaleTransform, this time with ScaleX going from 0 to 1.

    I hope this asnwers you question.

    Regards,
    Tihomir Petkov
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  5. Paloma
    Paloma avatar
    39 posts
    Member since:
    Mar 2009

    Posted 24 Mar 2009 Link to this post

    Hi!
    Could you give me a code example?
    Thanks
  7. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 24 Mar 2009 Link to this post

    Hello Paloma,

    I am pasting the actual visual state group used in the control, the visual state modifies the button, two panels and some borders around them, you can delete the animations that you do not need:

    <vsm:VisualStateGroup x:Name="StateGroup">  
        <vsm:VisualState x:Name="hideExamplePanel">  
            <Storyboard> 
     
                <ObjectAnimationUsingKeyFrames  
                        Storyboard.TargetName="previewButton" 
                        Storyboard.TargetProperty="Content">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Preview" /> 
                </ObjectAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="examplePanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.202999994158745,0,0.31700000166893,1" 
                            KeyTime="00:00:00.4620000" Value="0.8" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="0.05" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0.05000000074505806" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="examplePanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.202999994158745,0,0.31700000166893,1" 
                            KeyTime="00:00:00.4620000" Value="0.8" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0.800000011920929" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="examplePanel" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="codeViewerPanel" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="0" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.187000006437302,0,0.207000002264977,1" 
                            KeyTime="00:00:02" Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="codeViewerPanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0.05000000074505806" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="0.8" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.187000006437302,0,0.207000002264977,1" 
                            KeyTime="00:00:02" Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="codeViewerPanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.187000006437302,0,0.207000002264977,1" 
                            KeyTime="00:00:02" Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="border" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.4620000" 
                            Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:0.94" 
                        Storyboard.TargetName="border1" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                            Value="0" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" 
                        Storyboard.TargetName="border2" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" 
                        Storyboard.TargetName="border3" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.9500000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="borderBack2" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="borderBack3" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.9500000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <ObjectAnimationUsingKeyFrames  
                        Storyboard.TargetName="border" FillBehavior="Stop" 
                        Duration="0:0:1.35" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" Storyboard.TargetName="border1" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" Storyboard.TargetName="border2" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" Storyboard.TargetName="border3" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
     
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" 
                        Storyboard.TargetName="borderBack2" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" 
                        Storyboard.TargetName="borderBack3" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
     
            </Storyboard> 
     
        </vsm:VisualState> 
        <vsm:VisualState x:Name="showExamplePanel">  
            <Storyboard> 
     
                <ObjectAnimationUsingKeyFrames  
                        Storyboard.TargetName="previewButton" 
                        Storyboard.TargetProperty="Content">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="View Code" /> 
                </ObjectAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="codeViewerPanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.202999994158745,0,0.31700000166893,1" 
                            KeyTime="00:00:00.4620000" Value="0.8" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="0.05" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0.0" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="codeViewerPanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.202999994158745,0,0.31700000166893,1" 
                            KeyTime="00:00:00.4620000" Value="0.8" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0.800000011920929" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="codeViewerPanel" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="examplePanel" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="0" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.187000006437302,0,0.207000002264977,1" 
                            KeyTime="00:00:02" Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="examplePanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9410000" 
                            Value="0.05000000074505806" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="0.8" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.187000006437302,0,0.207000002264977,1" 
                            KeyTime="00:00:02" Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="examplePanel" 
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="0.800000011920929" /> 
                    <SplineDoubleKeyFrame  
                            KeySpline="0.187000006437302,0,0.207000002264977,1" 
                            KeyTime="00:00:02" Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="borderBack" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.4620000" 
                            Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:0.94" 
                        Storyboard.TargetName="borderBack1" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" 
                            Value="0" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="borderBack2" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="borderBack3" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.9500000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="border2" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:00.9200000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.2490000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                        Storyboard.TargetName="border3" 
                        Storyboard.TargetProperty="(UIElement.Opacity)">  
                    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" 
                            Value="1" /> 
                    <SplineDoubleKeyFrame KeyTime="00:00:01.9500000" 
                            Value="0" /> 
                </DoubleAnimationUsingKeyFrames> 
     
                <ObjectAnimationUsingKeyFrames  
                        Storyboard.TargetName="borderBack" 
                        FillBehavior="Stop" Duration="0:0:1.35" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" 
                        Storyboard.TargetName="borderBack1" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" 
                        Storyboard.TargetName="borderBack2" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" 
                        Storyboard.TargetName="borderBack3" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
     
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" Storyboard.TargetName="border2" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames FillBehavior="Stop" 
                        Duration="0:0:1.35" Storyboard.TargetName="border3" 
                        Storyboard.TargetProperty="Visibility">  
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                </ObjectAnimationUsingKeyFrames> 
     
            </Storyboard> 
        </vsm:VisualState> 
    </vsm:VisualStateGroup> 
     

    Hopefully this will work for you,

    Greetings,
    Miroslav
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  9. Paloma
    Paloma avatar
    39 posts
    Member since:
    Mar 2009

    Posted 24 Mar 2009 Link to this post

    Thanks a lot!
    I'm going to try it ;)
  11. Paloma
    Paloma avatar
    39 posts
    Member since:
    Mar 2009

    Posted 25 Mar 2009 Link to this post

    Hi Miroslav!!
    I'm totally lost. Sorry!
    Could you give some example with panels changing their VisualStates ?
    Thanks
  13. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 26 Mar 2009 Link to this post

    Hi Paloma,

    In the attached file you can see a sample that demonstrates a solution for the transitions.

    Hope this helps.

    All the best,
    Kaloyan Manev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  14.
  15. Paloma
    Paloma avatar
    39 posts
    Member since:
    Mar 2009

    Posted 26 Mar 2009 Link to this post

    Hi Kaloyan!!
    Thank you very much!! This helps me a lot! ;)
Back to Top