moar! transition stuff

Author: ButchersBoy

MainDemo.Wpf/TransitionsDemo/Slide5_TransitioningContent.xaml

@@ -40,7 +40,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.05" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.05" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -49,7 +49,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.1" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.1" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -58,7 +58,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.15" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.15" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -67,7 +67,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.2" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.2" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -76,7 +76,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.25" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.25" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -85,7 +85,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.3" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.3" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -94,7 +94,7 @@
 
             <materialDesign:TransitioningContent>
                 <materialDesign:TransitioningContent.OpeningEffects>
-                    <materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.35" />
+                    <materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.35" />
                 </materialDesign:TransitioningContent.OpeningEffects>
                 <materialDesign:ColorZone>
                     <materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />

MainDemo.Wpf/TransitionsDemo/Slide6_MVVM.xaml

@@ -13,20 +13,25 @@
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
+            <TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" TextWrapping="Wrap" TextAlignment="Center">That's the end of the demo for now; a full MVVM demo coming soon!</TextBlock>
+            <!--
             <TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" TextWrapping="Wrap" TextAlignment="Center">Finally, we will put it all together to create full master &amp; details pages, controlled via MVVM.</TextBlock>
+            -->
             <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center">
                 <Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}" 
                     Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
                     VerticalAlignment="Center" HorizontalAlignment="Left" 
                     Margin="16">
                     <materialDesign:PackIcon Kind="StepBackward" />
                 </Button>
+                <!--
                 <Button Style="{DynamicResource MaterialDesignFloatingActionAccentButton}"                     
                     Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
                     VerticalAlignment="Top"
                     Margin="16">
                     <materialDesign:PackIcon Kind="StepForward" />
                 </Button>
+                -->
             </StackPanel>
         </Grid>
     </materialDesign:ColorZone>

MainDemo.Wpf/TransitionsDemo/TransitionsDemoHome.xaml

@@ -39,7 +39,7 @@
                                               ClipToBounds="True">
                 <materialDesign:TransitionerSlide.OpeningEffects>
                     <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.8" />
-                    <materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:0.8" BeginTime="0:0:0.15" />
+                    <materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:0.8" OffsetTime="0:0:0.15" />
                 </materialDesign:TransitionerSlide.OpeningEffects>
                 <local:Slide4_CombineTransitions />
             </materialDesign:TransitionerSlide>

MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

@@ -293,6 +293,7 @@
     <Compile Include="RippleAssist.cs" />
     <Compile Include="Ripple.cs" />
     <Compile Include="Transitions\IZIndexController.cs" />
+    <Compile Include="Transitions\SlideOutWipe.cs" />
     <Compile Include="Transitions\TransitionAssist.cs" />
     <Compile Include="Transitions\TransitionEffect.cs" />
     <Compile Include="Transitions\TransitionEffectBase.cs" />

MaterialDesignThemes.Wpf/Transitions/CircleWipe.cs

@@ -46,44 +46,4 @@ public void Wipe(TransitionerSlide fromSlide, TransitionerSlide toSlide, Point o
             scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
         }
     }
-
-    public class SlideOutWipe : ITransitionWipe
-    {
-        private readonly SineEase _sineEase = new SineEase();
-
-        public void Wipe(TransitionerSlide fromSlide, TransitionerSlide toSlide, Point origin, IZIndexController zIndexController)
-        {
-            if (fromSlide == null) throw new ArgumentNullException(nameof(fromSlide));
-            if (toSlide == null) throw new ArgumentNullException(nameof(toSlide));
-            if (zIndexController == null) throw new ArgumentNullException(nameof(zIndexController));
-
-            var zeroKeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);
-            var endKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
-
-            //back out old slide setup
-            var scaleTransform = new ScaleTransform(1, 1);
-            fromSlide.RenderTransform = scaleTransform;
-            var scaleAnimation = new DoubleAnimationUsingKeyFrames();
-            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1, zeroKeyTime));
-            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(.8, endKeyTime));
-            scaleAnimation.Completed += (sender, args) =>
-            {
-                fromSlide.RenderTransform = null;
-            };
-
-            //slide in new slide setup
-            var translateTransform = new TranslateTransform(0, toSlide.ActualHeight);
-            toSlide.RenderTransform = translateTransform;            
-            var slideAnimation = new DoubleAnimationUsingKeyFrames();
-            slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(toSlide.ActualHeight, zeroKeyTime) { EasingFunction = _sineEase});
-            slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(0, endKeyTime) { EasingFunction = _sineEase });
-
-            //kick off!
-            translateTransform.BeginAnimation(TranslateTransform.YProperty, slideAnimation);
-            scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);            
-            scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
-
-            zIndexController.Stack(toSlide, fromSlide);
-        }
-    }    
 }

MaterialDesignThemes.Wpf/Transitions/SlideOutWipe.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Windows;
+using System.Windows.Media;
+using System.Windows.Media.Animation;
+
+namespace MaterialDesignThemes.Wpf.Transitions
+{
+    public class SlideOutWipe : ITransitionWipe
+    {
+        private readonly SineEase _sineEase = new SineEase();
+
+        public void Wipe(TransitionerSlide fromSlide, TransitionerSlide toSlide, Point origin, IZIndexController zIndexController)
+        {
+            if (fromSlide == null) throw new ArgumentNullException(nameof(fromSlide));
+            if (toSlide == null) throw new ArgumentNullException(nameof(toSlide));
+            if (zIndexController == null) throw new ArgumentNullException(nameof(zIndexController));
+
+            var zeroKeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);
+            var midishKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(100));
+            var endKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
+
+            //back out old slide setup
+            var scaleTransform = new ScaleTransform(1, 1);
+            fromSlide.RenderTransform = scaleTransform;
+            var scaleAnimation = new DoubleAnimationUsingKeyFrames();
+            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1, zeroKeyTime));
+            scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(.8, endKeyTime));
+            scaleAnimation.Completed += (sender, args) =>
+            {
+                fromSlide.RenderTransform = null;
+            };
+
+            //slide in new slide setup
+            var translateTransform = new TranslateTransform(0, toSlide.ActualHeight);
+            toSlide.RenderTransform = translateTransform;            
+            var slideAnimation = new DoubleAnimationUsingKeyFrames();
+            slideAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(toSlide.ActualHeight, zeroKeyTime));
+            slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(toSlide.ActualHeight, midishKeyTime) { EasingFunction = _sineEase});
+            slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(0, endKeyTime) { EasingFunction = _sineEase });
+
+            //kick off!
+            translateTransform.BeginAnimation(TranslateTransform.YProperty, slideAnimation);
+            scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);            
+            scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
+
+            zIndexController.Stack(toSlide, fromSlide);
+        }
+    }
+}

MaterialDesignThemes.Wpf/Transitions/TransitionEffect.cs

@@ -24,7 +24,7 @@ public TransitionEffect(TransitionEffectKind kind, TimeSpan duration)
 
         public TransitionEffectKind Kind { get; set; }
 
-        public TimeSpan BeginTime { get; set; } = TimeSpan.Zero;
+        public TimeSpan OffsetTime { get; set; } = TimeSpan.Zero;
 
         public TimeSpan Duration { get; set; } = TimeSpan.FromMilliseconds(400);        
 
@@ -44,36 +44,35 @@ public override Timeline Build<TSubject>(TSubject effectSubject)
                 case TransitionEffectKind.ExpandIn:
                     return CreateExpandIn(effectSubject);
                 case TransitionEffectKind.SlideInFromLeft:
-                    timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = -300, To = 0 };
+                    timeline = CreateSlide(-300, 0);
                     property = TranslateTransform.XProperty;
                     targetName = effectSubject.TranslateTransformName;
                     break;
                 case TransitionEffectKind.SlideInFromTop:
-                    timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = -300, To = 0 };
+                    timeline = CreateSlide(-300, 0);
                     property = TranslateTransform.YProperty;
                     targetName = effectSubject.TranslateTransformName;
                     break;
                 case TransitionEffectKind.SlideInFromRight:
-                    timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = 300, To = 0 };
+                    timeline = CreateSlide(300, 0);
                     property = TranslateTransform.XProperty;
                     targetName = effectSubject.TranslateTransformName;
                     break;
                 case TransitionEffectKind.SlideInFromBottom:
-                    timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = 300, To = 0,  };
+                    timeline = CreateSlide(300, 0);
                     property = TranslateTransform.YProperty;
                     targetName = effectSubject.TranslateTransformName;
                     break;
                 case TransitionEffectKind.FadeIn:
                     timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = 0, To = 1};
-                    property = UIElement.OpacityProperty;
+                    property = OpacityProperty;
                     target = effectSubject;
                     break;
                 default:
                     throw new ArgumentOutOfRangeException();
             }
 
-            if (timeline == null || (target == null && targetName == null)) return null;
-            timeline.BeginTime = BeginTime;
+            if (timeline == null || (target == null && targetName == null)) return null;            
             timeline.Duration = Duration;
             if (target != null)
                 Storyboard.SetTarget(timeline, target);
@@ -85,12 +84,25 @@ public override Timeline Build<TSubject>(TSubject effectSubject)
             return timeline;
         }
 
+        private Timeline CreateSlide(double from, double to)
+        {
+            var zeroFrame = new DiscreteDoubleKeyFrame(from);
+            var startFrame = new DiscreteDoubleKeyFrame(from, OffsetTime);
+            var endFrame = new EasingDoubleKeyFrame(to, OffsetTime + Duration) { EasingFunction = new SineEase() };
+            var slideAnimation = new DoubleAnimationUsingKeyFrames();
+            slideAnimation.KeyFrames.Add(zeroFrame);
+            slideAnimation.KeyFrames.Add(startFrame);
+            slideAnimation.KeyFrames.Add(endFrame);
+
+            return slideAnimation;
+        }
+
         private Timeline CreateExpandIn(ITransitionEffectSubject effectSubject)
         {            
             var scaleXAnimation = new DoubleAnimationUsingKeyFrames();
             var zeroFrame = new DiscreteDoubleKeyFrame(0.0);
-            var startFrame = new DiscreteDoubleKeyFrame(.5, BeginTime);
-            var endFrame = new EasingDoubleKeyFrame(1, BeginTime + Duration);
+            var startFrame = new DiscreteDoubleKeyFrame(.5, OffsetTime);
+            var endFrame = new EasingDoubleKeyFrame(1, OffsetTime + Duration) { EasingFunction = new SineEase() };
             scaleXAnimation.KeyFrames.Add(zeroFrame);
             scaleXAnimation.KeyFrames.Add(startFrame);
             scaleXAnimation.KeyFrames.Add(endFrame);

MaterialDesignThemes.Wpf/Transitions/Transitioner.cs

@@ -150,12 +150,12 @@ private void ActivateFrame(int selectedIndex, int unselectedIndex)
                 if (index == selectedIndex)
                 {
                     newSlide = slide;
-                   // slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Current);
+                    slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Current);
                 }
                 else if (index == unselectedIndex)
                 {
                     oldSlide = slide;
-                    //slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Previous);
+                    slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Previous);
                 }
                 else
                 {                    
@@ -175,10 +175,7 @@ private void ActivateFrame(int selectedIndex, int unselectedIndex)
             else if (oldSlide != null || newSlide != null)
             {
                 DoStack(oldSlide ?? newSlide);
-            }
-
-            newSlide?.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Current);
-            oldSlide?.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Previous);
+            }            
 
             _nextTransitionOrigin = null;
         }