Telerik Forums
This is a migrated thread and some comments may be shown as answers.

Visual Effect "View Code" Telerik Demo

7 Answers 511 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Paloma
Top achievements
Rank 1
Paloma asked on 24 Mar 2009, 08:48 AM
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

7 Answers, 1 is accepted

Sort by
0
Tihomir Petkov
Telerik team
answered on 24 Mar 2009, 09:11 AM
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.
0
Paloma
Top achievements
Rank 1
answered on 24 Mar 2009, 09:22 AM
Hi!
Could you give me a code example?
Thanks
0
Miroslav
Telerik team
answered on 24 Mar 2009, 11:53 AM
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.
0
Paloma
Top achievements
Rank 1
answered on 24 Mar 2009, 12:11 PM
Thanks a lot!
I'm going to try it ;)
0
Paloma
Top achievements
Rank 1
answered on 25 Mar 2009, 08:51 AM
Hi Miroslav!!
I'm totally lost. Sorry!
Could you give some example with panels changing their VisualStates ?
Thanks
0
Kaloyan
Telerik team
answered on 26 Mar 2009, 09:47 AM
viewcodetransition.rar
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.
0
Paloma
Top achievements
Rank 1
answered on 26 Mar 2009, 10:21 AM
Hi Kaloyan!!
Thank you very much!! This helps me a lot! ;)
Tags
General Discussions
Asked by
Paloma
Top achievements
Rank 1
Answers by
Tihomir Petkov
Telerik team
Paloma
Top achievements
Rank 1
Miroslav
Telerik team
Kaloyan
Telerik team
Share this question
or