4 Answers, 1 is accepted
0
Hi Albert,
Attached is a sample application demonstrating the technics.
Best wishes,
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.
Attached is a sample application demonstrating the technics.
Best wishes,
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.
0
Terry
Top achievements
Rank 1
Rank 1
answered on 08 Oct 2009, 10:11 PM
This example works perfectly, but I'm trying to do something a little more sophisticated and have run into trouble. Inside each of the grids (green and red) I have inserted a frame. I have two separate xaml files for the sources of these frames. What I want to do is use the spin to transition between content pages when I select a menu item. The xaml content files have images and text. When I begin the storyboard, the content xaml on the start side (green) shrinks and turns sideways as it should, but when the other side (red) spins into view, it still shows the first xaml even though we're looking at the other grid/frame/content xaml.
Here is an abbreviated version of the xaml:
and here is the code that executes when I press the button:
Why am I still seeing ContentPage1.xaml after the spin?
... and a second related question: in your view code/preview example you can spin back and forth between the two sides. It looks like this storyboard is only one way, from grid1 to grid2. Do I need a second storyboard to spin back to grid1 when I'm positioned at grid2? How do you do that?
Thanks in advance,
Terry
Here is an abbreviated version of the xaml:
| <UserControl xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" |
| xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" |
| 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" |
| mc:Ignorable="d" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" |
| x:Class="xyz.MainPage" |
| d:DesignWidth="1024" d:DesignHeight="768"> |
| <UserControl.Resources> |
| <Storyboard x:Name="Transition" |
| BeginTime="0:0:2"> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid1" |
| Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="0" |
| KeySpline="0,0,0.389999985694885,1" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.8190000" |
| Value="-90" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid1" |
| Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="0" |
| KeySpline="0,0,0.389999985694885,1" /> |
| <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" |
| KeyTime="00:00:01.3000000" |
| Value="0" /> |
| <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" |
| KeyTime="00:00:01.7000000" |
| Value="0" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid1" |
| Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)"> |
| <EasingDoubleKeyFrame KeyTime="00:00:00" |
| Value="0" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="-525" |
| KeySpline="0,0,0.389999985694885,1" /> |
| <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" |
| KeyTime="00:00:01.3000000" |
| Value="-525" /> |
| <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" |
| KeyTime="00:00:01.7000000" |
| Value="0" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid1" |
| Storyboard.TargetProperty="(UIElement.Opacity)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00" |
| Value="1" |
| KeySpline="0.200000002980232,0,0.379999995231628,1" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" |
| Value="1" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" |
| Value="0" /> |
| <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" |
| Value="1" /> |
| </DoubleAnimationUsingKeyFrames> |
| <ColorAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="border" |
| Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> |
| <EasingColorKeyFrame KeyTime="00:00:01.3000000" |
| Value="#4C081130" /> |
| <SplineColorKeyFrame KeyTime="00:00:01.7000000" |
| Value="#00081130" |
| KeySpline="0.200000002980232,0,0.379999995231628,1" /> |
| </ColorAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="border" |
| Storyboard.TargetProperty="(UIElement.Opacity)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00" |
| Value="0" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" |
| Value="1" /> |
| <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" |
| Value="1" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" |
| Value="1" |
| KeySpline="0.200000002980232,0,0.379999995231628,1" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.3000000" |
| Storyboard.TargetName="grid2" |
| Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="90" |
| KeySpline="0,0,0.389999985694885,1" /> |
| <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" |
| KeyTime="00:00:00.7190000" |
| Value="0" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid2" |
| Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationZ)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="0" |
| KeySpline="0,0,0.389999985694885,1" /> |
| <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" |
| KeyTime="00:00:01.3000000" |
| Value="0" /> |
| <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" |
| KeyTime="00:00:01.7000000" |
| Value="0" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid2" |
| Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)"> |
| <EasingDoubleKeyFrame KeyTime="00:00:00" |
| Value="0" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="-525" |
| KeySpline="0,0,0.389999985694885,1" /> |
| <SplineDoubleKeyFrame KeySpline="0.200000002980232,0,0.400000005960464,1" |
| KeyTime="00:00:01.3000000" |
| Value="-525" /> |
| <SplineDoubleKeyFrame KeySpline="0.170000001788139,0,0.379999995231628,0.990000009536743" |
| KeyTime="00:00:01.7000000" |
| Value="0" /> |
| </DoubleAnimationUsingKeyFrames> |
| <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" |
| Storyboard.TargetName="grid2" |
| Storyboard.TargetProperty="(UIElement.Opacity)"> |
| <SplineDoubleKeyFrame KeyTime="00:00:00.5190000" |
| Value="0" /> |
| <SplineDoubleKeyFrame KeyTime="00:00:01.8190000" |
| Value="1" |
| KeySpline="0.200000002980232,0,0.379999995231628,1" /> |
| <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" |
| Value="1" /> |
| </DoubleAnimationUsingKeyFrames> |
| </Storyboard> |
| </UserControl.Resources> |
| <Grid x:Name="LayoutRoot"> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="90" /> |
| <RowDefinition Height="0.783*"/> |
| <RowDefinition Height="0.043*"/> |
| </Grid.RowDefinitions> |
| <Grid.ColumnDefinitions> |
| <ColumnDefinition Width="1.6*"/> |
| <ColumnDefinition Width="6*"/> |
| <ColumnDefinition Width="1.6*"/> |
| </Grid.ColumnDefinitions> |
| <!--<navigation:Frame Grid.Column="1" Grid.Row="1" Source="/ContentPage1.xaml" />--> |
| <Button Click="Button_Click" VerticalAlignment="Top" HorizontalAlignment="Center" |
| Content="Flip" Grid.Column="1" Grid.Row="1"/> |
| <Grid x:Name="grid1" |
| HorizontalAlignment="Center" |
| Margin="0,0,0,0" |
| VerticalAlignment="Center" |
| RenderTransformOrigin="0.5,0.5" |
| Grid.Column="1" Grid.Row="1"> |
| <Grid.Projection> |
| <PlaneProjection /> |
| </Grid.Projection> |
| <Grid.RenderTransform> |
| <TransformGroup> |
| <ScaleTransform ScaleX="1" /> |
| <SkewTransform /> |
| <RotateTransform /> |
| <TranslateTransform X="0" |
| 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="Green" |
| 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="600" |
| RenderTransformOrigin="0.5,0.5" |
| Background="#4C081130" |
| 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> |
| <navigation:Frame x:Name="FrameSide1" Source="/ContentPage1.xaml"/> |
| </Grid> |
| <Grid x:Name="grid2" |
| HorizontalAlignment="Center" |
| Visibility="Visible" |
| Margin="0,0,0,0" |
| Opacity="0" |
| VerticalAlignment="Center" |
| RenderTransformOrigin="0.5,0.5" |
| Grid.Column="1" |
| Grid.Row="1"> |
| <Grid.Projection> |
| <PlaneProjection RotationY="90" /> |
| </Grid.Projection> |
| <Grid.RenderTransform> |
| <TransformGroup> |
| <ScaleTransform ScaleX="1" /> |
| <SkewTransform /> |
| <RotateTransform /> |
| <TranslateTransform X="0" |
| 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" |
| CornerRadius="9,9,9,9" |
| Background="Red" |
| BorderBrush="#FF68AABD" |
| BorderThickness="1,1,1,1"> |
| <Border.RenderTransform> |
| <TransformGroup> |
| <ScaleTransform /> |
| <SkewTransform /> |
| <RotateTransform /> |
| <TranslateTransform X="0" |
| Y="0" /> |
| </TransformGroup> |
| </Border.RenderTransform> |
| </Border> |
| <navigation:Frame x:Name="FrameSide2" |
| Source="/ContentPage2.xaml" /> |
| </Grid> |
| </Grid> |
| </UserControl> |
and here is the code that executes when I press the button:
| private void Button_Click( object sender, RoutedEventArgs e ) |
| { |
| var storyBoard = this.Resources["Transition"] as Storyboard; |
| if ( storyBoard != null ) |
| { |
| storyBoard.Begin(); |
| } |
| } |
Why am I still seeing ContentPage1.xaml after the spin?
... and a second related question: in your view code/preview example you can spin back and forth between the two sides. It looks like this storyboard is only one way, from grid1 to grid2. Do I need a second storyboard to spin back to grid1 when I'm positioned at grid2? How do you do that?
Thanks in advance,
Terry
0
Terry
Top achievements
Rank 1
Rank 1
answered on 13 Oct 2009, 12:09 AM
It occurs to me that it might be possible to shrink the fram, rotate the xaml to -90, change the source to the new xaml and rotate it back. This would allow me to do spiffy transitions between any two pages. The challenge is, is it possible to revise the source property inside the storyboard? Can you use ObjectAnimationUsingKeyFrames to accomplish this? If not, I guess I could have two animations one to rotate the old content away, and one to rotate the new content back, with an event in between to change the source. Has anyone accomplished this? I would appreciate seeing your code.
Thanks,
Terry
Thanks,
Terry
0
Hello Terry,
You can try to hide the elements in the frame when the spinning animation is loaded.
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.
You can try to hide the elements in the frame when the spinning animation is loaded.
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.