How to Get the exact transition in the example

[balaji]

Hi am new to silverlight
I wuld liike to get the transition effect while clicking the view code button or preview button.
Is this possible to get that code.
Thanks
Regards
N.Balaji

[Kaloyan]

Hi balaji,

I am attaching a small application with the animation you asked for.

Greetings,
Kaloyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[balaji]

Hi ,
Thanks For your swift reply.
Here you have used the Button outside the Frame .
How abt using the Button inside the frame which triggers that trainsition and mouse over takes place which you can clearely see in the demo example.
It would be helpfull if i get that kind of example.
Since iam new to silverlight i wuld like to know abt the Proj architecture .
Like How to design a sample silverlight website like we used to do in asp.net.
I wuld reckon that as a kick starter for me.
Thanks
Regards
N.Balaji

[balaji]

<UserControl 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"
        x:Class="SilverlightApplication1.Page" Width="1024" Height="768" mc:Ignorable="d">

    <UserControl.Resources>
        <Storyboard x:Name="Transition" FillBehavior="Stop">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid"
                    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="grid"
                    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="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:00" 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="00:00:00" Storyboard.TargetName="grid1"
                    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="grid"
                    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="grid1"
                    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="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="grid1"
                    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="border3"
                    Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.9500000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <Button Content="Start animation" Click="OnStartAnimation" Width="100" Height="20"
                HorizontalAlignment="Left" VerticalAlignment="Top" />

        <Grid x:Name="grid" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center"
                RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform X="126" 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="#FFFFFFFF" BorderBrush="#FF68AABD"
                    BorderThickness="1,1,1,1" CornerRadius="9,9,9,9">
                <Button x:Name="testbutton" Click="Ontest" Width="100" Height="20" Content="test" HorizontalAlignment="Left"></Button>
                <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="755" RenderTransformOrigin="0.5,0.5"
                    Background="#4C2A224B" 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>
            <Border x:Name="border1" Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="9,9,9,9"
                    Visibility="Visible" Opacity="0">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.06,0.5" StartPoint="0.94,0.5">
                        <GradientStop Color="#E51A0F25" Offset="0.004" />
                        <GradientStop Color="#993B2651" Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </Grid>
        <Grid x:Name="grid1" HorizontalAlignment="Center" Margin="0,0,0,0"
                VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="0.05" ScaleY="0.8" />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform X="126" Y="22" />
                </TransformGroup>
            </Grid.RenderTransform>
            <Border Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    Background="#FFFFFFFF" 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="border3" Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    Background="#4C2A224B" BorderBrush="{x:Null}" BorderThickness="1,1,1,1"
                    CornerRadius="9,9,9,9" Visibility="Visible">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
            <Border x:Name="border2" Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="9,9,9,9"
                    Visibility="Visible">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.06,0.5" StartPoint="0.94,0.5">
                        <GradientStop Color="#E51A0F25" Offset="1" />
                        <GradientStop Color="#993B2651" Offset="0" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </Grid>
    </Grid>
</UserControl>

Hi
This is the above code i tried i have just inserted a button in the middle of the frame and i want that functionality to be triggered.
But Currently it doesnt seem to.
Pls help
Thanks

[balaji]

hey guys
any ideas pls help
Thanks

[Kaloyan]

Hi balaji,

You have to place the button outside the Borders. So the parent of the Button becomes the Grid.

<UserControl x:Class="SilverlightApplication1.ClientPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <UserControl.Resources>
        <Storyboard x:Name="Transition" FillBehavior="Stop">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid"
                    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="grid"
                    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="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:00" 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="00:00:00" Storyboard.TargetName="grid1"
                    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="grid"
                    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="grid1"
                    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="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="grid1"
                    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="border3"
                    Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01.9500000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">


        <Grid x:Name="grid" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center"
                RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform X="126" 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="#FFFFFFFF" 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="755" RenderTransformOrigin="0.5,0.5"
                    Background="#4C2A224B" 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>
            <Border x:Name="border1" Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="9,9,9,9"
                    Visibility="Visible" Opacity="0">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.06,0.5" StartPoint="0.94,0.5">
                        <GradientStop Color="#E51A0F25" Offset="0.004" />
                        <GradientStop Color="#993B2651" Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>

            <Button x:Name="testbutton" Click="Ontest" Canvas.ZIndex="10000" Width="100" Height="20"
                    Content="test" HorizontalAlignment="Left" />
        </Grid>

        <Grid x:Name="grid1" HorizontalAlignment="Center" Margin="0,0,0,0"
                VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="0.05" ScaleY="0.8" />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform X="126" Y="22" />
                </TransformGroup>
            </Grid.RenderTransform>
            <Border Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    Background="#FFFFFFFF" 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="border3" Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    Background="#4C2A224B" BorderBrush="{x:Null}" BorderThickness="1,1,1,1"
                    CornerRadius="9,9,9,9" Visibility="Visible">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
            <Border x:Name="border2" Height="665" HorizontalAlignment="Center" Margin="0,0,0,0"
                    VerticalAlignment="Center" Width="755" RenderTransformOrigin="0.5,0.5"
                    BorderBrush="{x:Null}" BorderThickness="1,1,1,1" CornerRadius="9,9,9,9"
                    Visibility="Visible">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform X="0" Y="0" />
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.06,0.5" StartPoint="0.94,0.5">
                        <GradientStop Color="#E51A0F25" Offset="1" />
                        <GradientStop Color="#993B2651" Offset="0" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </Grid>
    </Grid>
</UserControl>

Regards,
Kaloyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[balaji]

Hey Kaloyan ,
Thanks for your swift reply.
It was really helpfull for me.
But how to achieve the same transition in page navigation Scenario.
For inst:
My code is like this in button click event:

 var animation = this.Resources["Transition"] as Storyboard;
            if (null != animation)
            {
                animation.Begin();
            }

            var nav = NavigationService.GetNavigationService();
            nav.Target = Application.Current.RootVisual as Panel;
            nav.Navigate(new page2());
I cant achieve the Desired transition so what Changes do i need to make so as to achieve it.
Thanks
Regards
N.Balaji

[Kaloyan]

Hi balaji,

To use such an animation in the PageNavigation framework you need to implement the ITransition interface where you can define the animation you desire. I am attaching a small application demonstrating this.

Best wishes,
Kaloyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[TC]

 

 

	public void Begin(IFrame page)
	{
	var flipIn = this.RootPanel.Resources["flipIn"] as Storyboard;
	var flipOut = this.RootPanel.Resources["flipOut"] as Storyboard;
	if (flipIn != null)
	{
	flipIn.Begin();
	flipIn.Completed += (sender, e) =>
	{
	if (flipOut != null)
	{
	if (RootPanel.Children.Contains(page as FrameworkElement))
	{
	RootPanel.Children.Remove(page as FrameworkElement);
	}
	else
	{
	RootPanel.Children.Add(page as FrameworkElement);
	}
	flipOut.Begin();
	}
	};
	}
	}

Kaloyan,
Can you please help to translate this segment to VB.net as I'm trying to simulate similar transition effect on a VB.net project.
Everything has been converted and close to working the same as the C# version now except this segment.
Thanks

 

[Kaloyan]

Hi TC

Check the code snippet bellow, containing the code translated to VB.

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media.Animation
Imports Telerik.Windows.Controls
Imports System.Net
Imports System.Windows.Documents
Imports System.Windows.Ink
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Shapes
Namespace Examples.Calendar.CS

    Namespace SilverlightApplication1
        Public Class Transitions
            Implements ITransition
            Private RootPanel As Panel
            Private Page As IFrame

            Public Sub New(rootPane As Panel)
                Me.RootPanel = rootPane
            End Sub

            Public Sub Begin(page As IFrame) Implements ITransition.Begin
                Me.Page = page
                Dim flipIn As Storyboard = TryCast(Me.RootPanel.Resources("flipIn"), Storyboard)

                If flipIn IsNot Nothing Then
                    flipIn.Begin()
                    AddHandler flipIn.Completed, AddressOf flipIn_Completed
                End If
            End Sub

            Private Sub flipIn_Completed(sender As Object, e As System.EventArgs)
                Dim flipIn As Storyboard = TryCast(Me.RootPanel.Resources("flipIn"), Storyboard)
                RemoveHandler flipIn.Completed, AddressOf flipIn_Completed

                Dim flipOut As Storyboard = TryCast(Me.RootPanel.Resources("flipOut"), Storyboard)

                If flipOut IsNot Nothing Then
                    If RootPanel.Children.Contains(TryCast(Me.Page, FrameworkElement)) Then
                        RootPanel.Children.Remove(TryCast(Me.Page, FrameworkElement))
                    Else
                        RootPanel.Children.Add(TryCast(Me.Page, FrameworkElement))
                    End If
                    flipOut.Begin()
                End If
            End Sub

            Private m_isRunning As Boolean
            Public Property IsRunning() As Boolean Implements ITransition.IsRunning
                Get
                    Return Me.m_isRunning
                End Get
                Set
                    If value <> Me.m_isRunning Then
                        Me.m_isRunning = value
                    End If
                End Set
            End Property

            Public Sub StopTransition() Implements ITransition.StopTransition

            End Sub
        End Class
    End Namespace

End Namespace

Greetings,
Kaloyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[TC]

Thanks Kaloyan. It's working great!

[balaji]

Hey Kaloyan,
I have used the Zip Code that you have sent.
where am navigating from page1 to Page2.
You know it shows the Transition but it comes back to the Page1 itself.
Do i need to add some code in App.xaml on startup
 this.RootVisual = new page1();

  var nav = NavigationService.GetNavigationService();
            nav.RootPanel = radFameContainer;
          
            //nav.Transition = transition;
         
            nav.Navigate(new page2());

And how To Comeback to the Default Page Page1

Plz Help.
Thanks
Regards
N.Balaji

[Kaloyan]

Hello balaji,

Thank you for writing us. You can try enabling by using the BrowserHistoy: NavigationService.UseBrowserHistory = true;

Then you can navigate throughout the pages using the GoBack() and GoForward() method of the NavigationService: navService.GoBack() / navService.GoForward();

Hope this helps.

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.

[balaji]

Hey Kaloyan,
Where to insert this piece of Code.
So as to Achieve the Desired Transition.
even though if i add that in App.xaml.
I coiuld not find anything happening

Here is the link to download my source code.
http://www.4shared.com/file/140567470/4dc6d818/SilverlightApplication5.html

Thanks
Regards
N.Balaji

[Kaloyan]

Hello balaji,

Our RadNavigation control has not been converted to Silverlight 3, yet. Therefore, for the time being, we suggest that you better use the standard navigation in Silverlight 3.

We hope that this is not causing you much inconvenience.

Greetings,
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.

[balaji]

Hey Kaloyan,
But In the Demo site it Says it is Built in Silverlight 3.
Plz Help me as this is a show stopper for My Proj.
Thanks
Regards
N.Balaji

[Kaloyan]

Hi balaji,

I think that I have misunderstood you and misleaded you in the possible solution of your case. Please accept my apologies. As Microsoft announced their new native navigation with Silverlight 3, we decided not to continue spending efforts for improving our RadNavigation framework. That is way my advice is to use the standard navigation. The easiest way to navigate to your default page is set it as a parameter to the Navigate method of the NavigationService class.

var nav = NavigationService.GetNavigationService();
nav.Target = Application.Current.RootVisual as Panel;
nav.Navigate(new Page1());

Let us know it there is any progress on this.

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.