Make your own Swipe Carousel Control!

APPLIES TO: Windows 8.x and Windows Phone RT

Sometimes you may require a control in WinRT apps that acts as a carousel control (a horizontal slideshow of images/posts.. ) but you’re stuck with either a ListView, or a ListBox enveloped by a ScrollViewer whose vertical scroll mode is disabled and the horizontal scroll mode is enabled. Sure, these can be alternatives but they don’t provide a “one-at-a-time” scroll of the enclosed child element, like that provided by a true carousel control which does enable switching of items one at a time.

The trick to making it work is to disable the natural HorizontalScrollMode of the ScrollView, and handle the Touch events on the ScrollViewer manually. This leads to a much more flexible development experience, as the touch events on the Carousel can be modified to a much greater extent.

So, to begin with the creation of the SwipeCarousel, you start with a ScrollViewer in the XAML page in which you wish to house the carousel.

<ScrollViewer x:Name=“ImageCarousel”  
    Grid.Row=“0”
    ManipulationMode=“All”
    HorizontalScrollMode=“Disabled”
    HorizontalScrollBarVisibility=“Hidden”  
    VerticalScrollBarVisibility=“Disabled”
    MinHeight=“200”
    ManipulationStarted=“ImageCarousel_ManipulationStarted”>

   <StackPanel x:Name=“ImageList” Orientation=”Horizontal” Canvas.ZIndex=“10”/>

</ScrollViewer>

Here, since we are creating a horizontally scrolling carousel, the horizontal scroll mode is disabled, but a similar approach can be taken to make a vertically scrolling carousel as well. (That’s all to be put in the XAML page)

Next, advance to the code behind (<page_name>.xaml.cs or just hit F7 while you’re in the XAML designer view). You may have observed that we haven’t actually added any Images to the StackPanel called “ImageList”, which will actually host the Images in the Carousel. This is done in the code-behind, just to demonstrate that virtually any element can be added to the carousel from the code behind. Moving on to our code-behind –

public MainPage()
{
    this.InitializeComponent();
    this.InitImages();
    this.LoadImages();
    this.NavigationCacheMode = NavigationCacheMode.Required;
    ImageCarousel.ManipulationDelta += ImageCarousel_ManipulationDelta;
}

private void LoadImages()
{
    foreach (var item in _images)
        ImageList.Children.Add(item);
}

private void InitImages()
{
    _images.Add(new Image() { Source = new BitmapImage(new Uri(“ms-appx:///Images/sink1.jpg”, UriKind.RelativeOrAbsolute)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(“ms-appx:///Images/sink2.png”, UriKind.RelativeOrAbsolute)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(“ms-appx:///Images/sink3.png”, UriKind.RelativeOrAbsolute)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(“ms-appx:///Images/sink4.png”, UriKind.RelativeOrAbsolute)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(“ms-appx:///Images/sink5.jpg”, UriKind.RelativeOrAbsolute)), Width = 480 });
}

Now, we move on to detecting touch events. Since we disabled the horizontal scroll mode of the Scroll Viewer, the swipe gesture needs to be manually implemented. we need to write code for two event handlers – ManipulationStarted (that is fired once a touch event is first detected) and ManipulationDelta (that takes care of recording the “delta” between the current point of touch manipulation and the initial point as recorded by the ManipilationStarted event.

private void ImageCarousel_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
	initialpoint = e.Position;
}
void ImageCarousel_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
	Point currentpoint = e.Position;
	double distance = currentpoint.X - initialpoint.X;
	if (distance >= ImageCarousel.ActualWidth / 10)
	{
		e.Complete();
		swipe_right();
	}
	else if (-distance >= ImageCarousel.ActualWidth / 10)
	{
		e.Complete();
		swipe_left();
	}
}
private void swipe_right()
{
	var startPosition = this.ImageCarousel.HorizontalOffset;
	if (startPosition > 0)
	{
		this.ImageCarousel.ChangeView(startPosition - 480, 0, 1, false);
	}
} 

private void swipe_left()
{
	var startPosition = this.ImageCarousel.HorizontalOffset;
	this.ImageCarousel.ChangeView(startPosition + 480, 0, 1, false);
}

That’s it folks!

Based on the Poor Man’s Image Carousel – http://developer.nokia.com/community/wiki/How_to_create_a_simple_image_carousel_using_basic_Windows_Phone_controls

Here’s the Windows Phone RT solution, for those of you who wish to try it out yourself –