Swipeable Layout
Overview
The SwipeableLayout exemplifies the flexibility that defines all our controls. Whether you want to showcase a few items in an engaging loop with smooth animations or implement a simple binary choice interface (like yes/no, true/false), the SwipeableLayout has got you covered.
Rich Interactions: The star feature is its intuitive and smooth swiping interaction. It offers two predefined options, where items move slightly up or down as they are swiped off the screen, creating a polished user experience.
MVVM ready: Easily integrate with the MVVM pattern using ItemsSource and ItemTemplate properties. The control provides various commands and properties to pass its state to your ViewModels, making it simple to control from C# code.
Commands for everything: Supports a wide range of commands to keep your ViewModels in sync. Use MoveEndedCommand and PositionChangedCommand to notify ViewModels of changes, and MoveNextCommand and MovePrevCommand to programmatically control the carousel from the ViewModel.
Optimized for performance: It’s 100% virtualized by default, ensuring optimal performance. You can opt out of virtualization if needed.
Empty View Template: Provide a unique view when there are no items or if the user has swiped away all items and looping is disabled.
Progressive Animations integration: Exposes ScrollProgress property enabling seamless integration with Grial’s Progressive Animations.
Indicator view support: Can be linked to an IndicatorView in the same way as Grial’s Carousel or MAUI’s CarouselView
Control API
Properties
| Name | Type | Description |
|---|---|---|
| Animation | AnimationType | Gets or sets the kind of animation that would be use to swipe the elements. Possible values are: RotateDown, RotateUp. |
| CachingStrategy | CachingStrategy | Gets or sets the strategy used for virtualization. |
| CanMoveNext | bool | Gets or sets whether the control can move to the next position or not. |
| CanMovePrev | bool | Gets or sets whether the control can move to the previous position or not. |
| EmptyViewTemplate | DataTemplate | Gets or sets the template for the empty view. |
| IndicatorView | IndicatorView | Gets or sets an IndicatorView instance to associate to the Carousel. |
| IsDraggingEnabled | bool | Gets or sets whether drag/swipe user interaction is enabled or not. |
| ItemsSource | IEnumerable | Gets or sets the data collection used to populate the Carousel. |
| ItemTemplate | DataTemplate | Gets or sets the DataTemplate used to display the items set in the ItemsSource. |
| Loop | bool | Gets or sets whether the Carousel should loop or not. |
| MoveEndedCommandParameter | object | Gets or sets the command parameter passed to MoveEndedCommand. If nothing is specified an instance of CarouselMovedEndedEventArgs is used. |
| Position | int | Gets or sets the Position of the item currently displayed at the center. |
| PositionChangedCommandParameter | object | Gets or sets the command parameter passed to PositionChangedCommand. If nothing is specified an instance of CarouselPositionChangedEventArgs is used. |
| ScrollProgress | double | Gets the a value indicating the change in the scroll while the Carousel is moving. The value is always between -1 and 1. |
| SelectedItem | object | Gets or sets whether the selected item, i.e. the item currently displayed at the center. |
Events
| Name | Type | Description |
|---|---|---|
| Moved | EventHandler<RelativeMoveEventArgs> | Event invoked while the Carousel is moving. |
| MoveEnded | EventHandler<CarouselMovedEndedEventArgs> | Event invoked when the Carousel ends moving. |
| PositionChanged | EventHandler<CarouselPositionChangedEventArgs> | Event invoked when the Carousel position changes. |
Commands
| Name | Type | Description |
|---|---|---|
| MoveEndedCommand | ICommand | Gets or sets a command invoked when the Carousel stops moving. |
| MoveNextCommand | ICommand | Gets a command invoked when the Carousel moves to the next position. |
| MovePrevCommand | ICommand | Gets a command invoked when the Carousel moves to the previous position. |
| PositionChangedCommand | ICommand | Gets or sets a command invoked when the Carousel's Position changes. |
Methods
| Name | Type | Description |
|---|---|---|
| MoveNextAnimated(int duration = 200) | Task<bool> | Makes the Carousel move to the next element with the indicated animation duration. |
| MovePrevAnimated(int duration = 200) | Task<bool> | Makes the Carousel move to the previous element with the indicated animation duration. |