locked
Transition effects between pages while navigation RRS feed

  • Question

  • Hi friends,

    am using expression blend 4, could you please provide links for Transition effects between pages while navigation. I have searched in google but i could not understand how it can be done. 

     

    Thank you

    Sunday, December 11, 2011 10:55 PM

Answers

  • after long struggle i found out how to fix the problem by my own. thx anyway
    • Marked as answer by 123reddy Saturday, December 17, 2011 2:34 PM
    Saturday, December 17, 2011 2:34 PM

All replies

  • Is this a Phone 7, Silverlight or WPF project?  Are you creating it strictly in Blend or are you using Expression Web? 
    If it is a website then you can do transition in Expression Web by opening your page, going to Format > Page Transition.
    There are a couple of page transition examples in the Gallery.  (Link is at the top of the page.)
     
    You could also create your own transition pretty simply without going into code-behind by using Storyboards.
    Just put a StorybordCompletedTrigger on your navigate to action.  Basically, don't navigate until the storyboard is complete.
    Here's an example using Silverlight/Sketchflow and Screen navigation...
    <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"
    	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype1Screens.Screen_1"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
    		</Storyboard>
    		<Storyboard x:Name="Storyboard2">
    			<DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">
    		<i:Interaction.Triggers>
    			<i:EventTrigger>
    				<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
    			</i:EventTrigger>
    			<ei:PropertyChangedTrigger>
    				<ei:ControlStoryboardAction/>
    			</ei:PropertyChangedTrigger>
    		</i:Interaction.Triggers>
    		<Grid.Projection>
    			<PlaneProjection RotationY="-90"/>
    		</Grid.Projection>
    		<Grid.RenderTransform>
    			<CompositeTransform/>
    		</Grid.RenderTransform>
    		<Grid.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black" Offset="1"/>
    				<GradientStop Color="White"/>
    			</LinearGradientBrush>
    		</Grid.Background>
    		<TextBlock HorizontalAlignment="Left" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Screen 1" VerticalAlignment="Top"/>
    		<Button Content="Go To Screen 2" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Margin="277,99,171,0">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard2}"/>
    				</i:EventTrigger>
    				<ei:StoryboardCompletedTrigger Storyboard="{StaticResource Storyboard2}">
    					<pi:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen2"/>
    				</ei:StoryboardCompletedTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    	</Grid>
    </UserControl>
    
    and Screen 2...
     
    <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"
    	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype1Screens.Screen2"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimation Duration="0:0:2" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
    		</Storyboard>
    		<Storyboard x:Name="Storyboard2">
    			<DoubleAnimation Duration="0" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Grid.Projection>
    			<PlaneProjection RotationY="-90"/>
    		</Grid.Projection>
    		<Grid.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black" Offset="0"/>
    				<GradientStop Color="White" Offset="1"/>
    			</LinearGradientBrush>
    		</Grid.Background>
    		<i:Interaction.Triggers>
    			<i:EventTrigger>
    				<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
    			</i:EventTrigger>
    		</i:Interaction.Triggers>
    		<TextBlock HorizontalAlignment="Left" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Screen 2" VerticalAlignment="Top" Foreground="White"/>
    		<Button Content="Go To Screen 1" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Margin="277,99,171,0">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="Click">
    					<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard2}"/>
    				</i:EventTrigger>
    				<ei:StoryboardCompletedTrigger Storyboard="{StaticResource Storyboard2}">
    					<pi:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen_1"/>
    				</ei:StoryboardCompletedTrigger>
    			</i:Interaction.Triggers>
    		</Button>
    	</Grid>
    </UserControl>
    

    Good luck.  I hope you get it worked out.
    ~Christine 


    Monday, December 12, 2011 12:31 AM
  • thank you for replying me. am using page transition for silverlight website and am using frame control for navigation if it makes any difference and can it be done using frame control.

     

    thank you

    Monday, December 12, 2011 11:32 AM
  • after long struggle i found out how to fix the problem by my own. thx anyway
    • Marked as answer by 123reddy Saturday, December 17, 2011 2:34 PM
    Saturday, December 17, 2011 2:34 PM
  • i am still struggling. I understand the concept and XAML that comes after searching but how to do this in Expression Blend? can't get it. I mean it would be more than a nightmare to handcode it. So Could you please direct me to an tutorial where I can achieve the goal of page transition using expression web.

    akberali

    Friday, December 7, 2012 12:12 AM
  • Hello Akberali.

    Do you mean page transition for an html page or web page?  Or page transition for a Silverlight Project?

    ~Christine


    My Gallery - calControls

    Friday, December 7, 2012 12:32 AM