Merge pull request #1253 from jstevans/carouselVerticalTransition

Add Vertical orientation option for PageSlide animations

samples/ControlCatalog/Pages/CarouselPage.xaml

@@ -9,7 +9,7 @@
       </Button>
       <Carousel Name="carousel">
         <Carousel.Transition>
-          <PageSlide Duration="0.25"/>
+          <PageSlide Duration="0.25" Orientation="Vertical" />
         </Carousel.Transition>
         <Image Source="resm:ControlCatalog.Assets.delicate-arch-896885_640.jpg"/>
         <Image Source="resm:ControlCatalog.Assets.hirsch-899118_640.jpg"/>
@@ -28,6 +28,14 @@
         <DropDownItem>Crossfade</DropDownItem>
       </DropDown>
     </StackPanel>
+
+    <StackPanel Orientation="Horizontal" Gap="4">
+      <TextBlock VerticalAlignment="Center">Orientation</TextBlock>
+      <DropDown Name="orientation" SelectedIndex="1" VerticalAlignment="Center">
+        <DropDownItem>Horizontal</DropDownItem>
+        <DropDownItem>Vertical</DropDownItem>
+      </DropDown>
+    </StackPanel>
     
   </StackPanel>
 </UserControl>

samples/ControlCatalog/Pages/CarouselPage.xaml.cs

@@ -11,6 +11,7 @@ namespace ControlCatalog.Pages
         private Button _left;
         private Button _right;
         private DropDown _transition;
+        private DropDown _orientation;
 
         public CarouselPage()
         {
@@ -18,6 +19,7 @@ namespace ControlCatalog.Pages
             _left.Click += (s, e) => _carousel.Previous();
             _right.Click += (s, e) => _carousel.Next();
             _transition.SelectionChanged += TransitionChanged;
+            _orientation.SelectionChanged += TransitionChanged;
         }
 
         private void InitializeComponent()
@@ -27,6 +29,7 @@ namespace ControlCatalog.Pages
             _left = this.FindControl<Button>("left");
             _right = this.FindControl<Button>("right");
             _transition = this.FindControl<DropDown>("transition");
+            _orientation = this.FindControl<DropDown>("orientation");
         }
 
         private void TransitionChanged(object sender, SelectionChangedEventArgs e)
@@ -37,7 +40,7 @@ namespace ControlCatalog.Pages
                     _carousel.Transition = null;
                     break;
                 case 1:
-                    _carousel.Transition = new PageSlide(TimeSpan.FromSeconds(0.25));
+                    _carousel.Transition = new PageSlide(TimeSpan.FromSeconds(0.25), _orientation.SelectedIndex == 0 ? PageSlide.SlideAxis.Horizontal : PageSlide.SlideAxis.Vertical);
                     break;
                 case 2:
                     _carousel.Transition = new CrossFade(TimeSpan.FromSeconds(0.25));

src/Avalonia.Visuals/Animation/PageSlide.cs

@@ -15,6 +15,15 @@ namespace Avalonia.Animation
     /// </summary>
     public class PageSlide : IPageTransition
     {
+        /// <summary>
+        /// The axis on which the PageSlide should occur
+        /// </summary>
+        public enum SlideAxis
+        {
+            Horizontal,
+            Vertical
+        }
+
         /// <summary>
         /// Initializes a new instance of the <see cref="PageSlide"/> class.
         /// </summary>
@@ -26,9 +35,11 @@ namespace Avalonia.Animation
         /// Initializes a new instance of the <see cref="PageSlide"/> class.
         /// </summary>
         /// <param name="duration">The duration of the animation.</param>
-        public PageSlide(TimeSpan duration)
+        /// <param name="orientation">The axis on which the animation should occur</param>
+        public PageSlide(TimeSpan duration, SlideAxis orientation = SlideAxis.Horizontal)
         {
             Duration = duration;
+            Orientation = orientation;
         }
 
         /// <summary>
@@ -36,6 +47,11 @@ namespace Avalonia.Animation
         /// </summary>
         public TimeSpan Duration { get; set; }
 
+        /// <summary>
+        /// Gets the duration of the animation.
+        /// </summary>
+        public SlideAxis Orientation { get; set; }
+
         /// <summary>
         /// Starts the animation.
         /// </summary>
@@ -55,7 +71,8 @@ namespace Avalonia.Animation
         {
             var tasks = new List<Task>();
             var parent = GetVisualParent(from, to);
-            var distance = parent.Bounds.Width;
+            var distance = Orientation == SlideAxis.Horizontal ? parent.Bounds.Width : parent.Bounds.Height;
+            var translateProperty = Orientation == SlideAxis.Horizontal ? TranslateTransform.XProperty : TranslateTransform.YProperty;
 
             if (from != null)
             {
@@ -63,7 +80,7 @@ namespace Avalonia.Animation
                 from.RenderTransform = transform;
                 tasks.Add(Animate.Property(
                     transform,
-                    TranslateTransform.XProperty,
+                    translateProperty,
                     0.0,
                     forward ? -distance : distance,
                     LinearEasing.For<double>(),
@@ -77,7 +94,7 @@ namespace Avalonia.Animation
                 to.IsVisible = true;
                 tasks.Add(Animate.Property(
                     transform,
-                    TranslateTransform.XProperty,
+                    translateProperty,
                     forward ? distance : -distance,
                     0.0,
                     LinearEasing.For<double>(),