Handle Animation Swipe Direction When RadCarouselPanel is Vertical Orientated
Environment
Product Version | 2020.1.115 |
Product | RadCarousel for WPF |
Description
By default, the orientation of the RadCarouselPanel is horizontal. When the RadCarouselPanel is set in vertical mode, the swipe animation does not work correctly. The build-in swiping logic only checks the horizontal offset of the swipe, which occurs.
Solution
You can override this logic in order for the panel to work as expected when its orientation is vertical. To do so and affect all panels in your application, you can create an attached behavior in which to handle the various swiping events.
public class VerticalSwipeBehavior
{
private RadCarouselPanel carouselPanel;
private double swipeOffset;
public static bool GetIsEnabled(DependencyObject obj)
{
return (bool)obj.GetValue(IsEnabledProperty);
}
public static void SetIsEnabled(DependencyObject obj, bool value)
{
obj.SetValue(IsEnabledProperty, value);
}
// Using a DependencyProperty as the backing store for IsEnabled. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsEnabledProperty =
DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(VerticalSwipeBehavior), new PropertyMetadata(false, OnIsEnabledChanged));
private static void OnIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var panel = d as RadCarouselPanel;
if (panel != null && (bool)e.NewValue)
{
var behavior = new VerticalSwipeBehavior();
behavior.Attach(panel);
}
}
public void Attach(RadCarouselPanel panel)
{
this.carouselPanel = panel;
TouchManager.AddSwipeStartedEventHandler(this.carouselPanel, OnSwipeStarted);
TouchManager.AddSwipeEventHandler(this.carouselPanel, OnSwipe);
TouchManager.AddSwipeFinishedEventHandler(this.carouselPanel, OnSwipeFinished);
}
private void OnSwipeStarted(object sender, Telerik.Windows.Input.Touch.TouchEventArgs args)
{
args.Handled = true;
}
private void OnSwipe(object sender, SwipeEventArgs args)
{
args.Handled = true;
this.swipeOffset += args.VerticalChange;
}
private void OnSwipeFinished(object sender, Telerik.Windows.Input.Touch.TouchEventArgs args)
{
args.Handled = true;
if (this.swipeOffset > 0)
{
this.carouselPanel.MoveBy(this.carouselPanel.ItemsPerSwipe);
}
else
{
this.carouselPanel.MoveBy(-this.carouselPanel.ItemsPerSwipe);
}
this.swipeOffset = 0;
}
}
<Style TargetType="telerik:RadCarouselPanel">
<Setter Property="local:VerticalSwipeBehavior.IsEnabled" Value="true" />
</Style>