Page transitions 4 Samples

Four  samples of  Transitioning content control’s style with Slide in.

PageTransitions Example

Slide in Top to Bottom: Live and download sample style from here

Slide in Bottom to Top: Live and download sample style from here

Slide in Left to Right: Live and download sample style from here

Slide in Right to Left: Live and download sample style from here

Sample Page Transition

In this short post I will show you how you can use the transition content control of silverlight. When I have used it I really like the functionality of the transition content control as it provide some basic animation when changing the content of the control.Transition content control is used to show a single piece of content and when that content changes performs a transition animation.Below is the output of the example I have used for the transition content control.

View Live here

Download Here

Transitioning content control style with slide down animation.

I have Created a style for transitioning content control, which will slide pages from top to bottom direction.

I have pasted style here.

<!– Transitioning content control style–>
<Style x:Key=”TransitioningContentControlStyle1″ TargetType=”toolkit:TransitioningContentControl”>
<Setter Property=”IsTabStop” Value=”True”/>
<Setter Property=”HorizontalContentAlignment” Value=”Left”/>
<Setter Property=”VerticalContentAlignment” Value=”Top”/>
<Setter Property=”Transition” Value=”DefaultTransition”/>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”toolkit:TransitioningContentControl”>
<Border BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” Background=”{TemplateBinding Background}” CornerRadius=”2″>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name=”PresentationStates”>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration=”0:0:1.5″>
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:SlideInTransitionEffect SlideDirection=”TopToBottom”/>
</ei:ExtendedVisualStateManager.TransitionEffect>
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode=”EaseInOut”/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name=”DefaultTransition”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”CurrentContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”PreviousContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”Normal”>
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Visibility)” Storyboard.TargetName=”PreviousContentPresentationSite”>
<DiscreteObjectKeyFrame KeyTime=”00:00:00″>
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”UpTransition”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”CurrentContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” Storyboard.TargetName=”CurrentContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”30″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”PreviousContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” Storyboard.TargetName=”PreviousContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”-30″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”DownTransition”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”CurrentContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” Storyboard.TargetName=”CurrentContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”-40″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”PreviousContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” Storyboard.TargetName=”PreviousContentPresentationSite”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.300″ Value=”40″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<ContentPresenter x:Name=”PreviousContentPresentationSite” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Content}”>
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ContentPresenter x:Name=”CurrentContentPresentationSite” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Content}” RenderTransformOrigin=”0,0″>
<ContentPresenter.Projection>
<PlaneProjection CenterOfRotationY=”0″/>
</ContentPresenter.Projection>
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key=”FrameControlTemplate1″ TargetType=”navigation:Frame”>
<Border Background=”{TemplateBinding Background}”
BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}”
HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”
VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”>
<toolkit:TransitioningContentControl Content=”{TemplateBinding Content}” Style=”{StaticResource TransitioningContentControlStyle1}”/>
</Border>
</ControlTemplate>