How to use Transition Control inside animation?

[Beckham]

In the demo section of the WPF controls there is a neat transition control of the old window getting dimmed, the effects like click the button of "View Code"  and "View Example".The animation between two usercontrols.The animation like jelly.Could you pls send me a wpf demo?

I do not wannt the effects below like this
http://www.telerik.com/community/forums/wpf/transition-control/transition-between-pages.aspx

Thank you very much.

Pls email to : [e-mail]

Zou

[George]

Hi,

The transition we use in switching "View Code"  and "View Example" is MotionBlurredZoomTransition. Also, I would suggest you to refer to the following link in our online documentation - http://www.telerik.com/help/wpf/radtransition-features-working-with-radtransitioncontrol.html

Sincerely yours,
George
the Telerik team

[Beckham]

Hi,George

All my code like this,I want switching "View Code"  and "View Example" Effect used MotionBlurredZoomTransition.
But the effects which I made does not like the effect of example.The example effect like jelly to zoom out and in.
Please write back soon.Thank you.

<Window xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  x:Class="RadFadeDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls" 

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="260"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

  

        <Border Grid.Row="0" Grid.Column="0" Width="400" Background="BlanchedAlmond">

        <telerik:RadTransitionControl x:Name="rtc" Width="400" Margin="10">

            <telerik:RadTransitionControl.Transition>

                <telerikTransitions:MotionBlurredZoomTransition />

            </telerik:RadTransitionControl.Transition>

            <telerik:RadTransitionControl.Easing>

                <BackEase EasingMode="EaseInOut" Amplitude="1" />

            </telerik:RadTransitionControl.Easing>

        </telerik:RadTransitionControl>

        </Border>

          

        <StackPanel Grid.Row="1" Orientation="Horizontal">

            <Button Content="Home View" Width="120" Height="30" Margin="5" x:Name="HomeView" Click="HomeView_Click"/>

            <Button Content="Real Time" Width="120" Height="30" Margin="5" x:Name="RealTimeView" Click="RealTimeView_Click"/>

        </StackPanel>

  

    </Grid>

</Window>

private void HomeView_Click(object sender, RoutedEventArgs e)
        {
            homeView = new HomeView();
            rtc.Content = homeView;
        }

        private void RealTimeView_Click(object sender, RoutedEventArgs e)
        {
            realTimeView = new RealTimeView();
            rtc.Content = realTimeView;
        }

[George]

Hi,

I would suggest you to remove the Easing function and to set the Duration to 0:0:0.25.
I hope this suits your needs. Please, pay attention to that the animation could look different with different contents. 
 

All the best,
George
the Telerik team