Introduction

This article describes how I went about creating a 2D image carousel. The reason for creating it... I just wanted to see if I could. I was actually watching a Blackberry Playbook video and I wondered whether I could create a carousel like control that replicated the carousel features in the video. The Playbook's though is more elegant and I may all but envy. My carousel UserControl, aptly named ImageCarousel, only deals with images and five images at that. Sad as that may be, you'll hopefully pick up something useful from this article so read on if you're still interested.

Requirements

To run the project provided from the download link above, you require either of the following:

Visual Studio 2010

Expression Blend

NB: If you're using the Express edition of Visual Studio, ensure that you open the solution using Visual Basic Express.

ImageCarousel

How It Works

To move the images, hold down the left mouse button and drag either to the left or to the right. When you let go of the left mouse button, the images will move in the intended direction.

Design and Layout

I put everything together in Expression Blend. The following image shows how some of the elements are laid out in the UserControl:

There are five main Grid controls which are visible in the image above, and an extra five Grid controls to the left and also to the right of the main ImageGrids. The following image shows the Grids that are to the left of the main Grids.

The Grid controls to the left and to the right of the main Grids are actually copies of the main Grids. I will explain why we need them as you read on.

NB: It takes 900 milliseconds to move a Grid to the next final position.

The RightCheckOriginals method checks whether the last Grid, among the main Grids, x-position has reached the right edge of CarouselCanvas and places the Grid accordingly.

' Set the location of main ImageGrids to zero
' when their x-position reaches right-edge of canvas.
PrivateSub RightCheckOriginals(ByVal ImgGrid As Grid)
If (ImgGrid Is ImageGrid_1) Or (ImgGrid Is ImageGrid_2) _
Or (ImgGrid Is ImageGrid_3) Or (ImgGrid Is ImageGrid_4) _
Or (ImgGrid Is ImageGrid_5) ThenIf Canvas.GetLeft(ImgGrid) >= 675Then
Canvas.SetLeft(ImgGrid, 0)
EndIfEndIfEndSub

The RghtCheckCopy1s and RghtCheckCopy2s methods also do something similar, but this time for the Grids located to the left and to the right of the main Grids respectively.

' Set the location of ImageGrids on left side
' of the main ImageGrids to -675 when their x-position
' reaches zero.
PrivateSub RghtCheckCopy1s(ByVal ImgGrid As Grid)
If (ImgGrid Is ImageGrid_1_Copy1) Or (ImgGrid Is ImageGrid_2_Copy1) _
Or (ImgGrid Is ImageGrid_3_Copy1) Or (ImgGrid Is ImageGrid_4_Copy1) _
Or (ImgGrid Is ImageGrid_5_Copy1) ThenIf Canvas.GetLeft(ImgGrid) >= 0Then
Canvas.SetLeft(ImgGrid, -675)
EndIfEndIfEndSub' Place the ImageGrids on the right of the main
' grids to the appropriate location when one of
' those Grids exceeds a certain limit.
PrivateSub RghtCheckCopy2s(ByVal ImgGrid As Grid)
If (ImgGrid Is ImageGrid_1_Copy2) Or (ImgGrid Is ImageGrid_2_Copy2) _
Or (ImgGrid Is ImageGrid_3_Copy2) Or (ImgGrid Is ImageGrid_4_Copy2) _
Or (ImgGrid Is ImageGrid_5_Copy2) ThenIf Canvas.GetLeft(ImgGrid) >= 1350Then
Canvas.SetLeft(ImgGrid, 675)
EndIfEndIfEndSub

Remember earlier I said that I would explain why we needed the extra Grids? Well, the extra Grids are there to create the illusion that the last or first image is gradually showing up on the opposite end of the UserControl when the Grids are moving. E.g. if the user dragged the images to the right, the last image would seem to be slipping through on the left end.

The ScaleUpGrid method, that is called by MoveImageGrids, increases the scale of the Grid in the middle of the UserControl.

I just found a control called PathListBox exist for WPF 4. I followed the tutorial fouand at http://www.microsoft.com/design/toolbox/tutorials/pathlistbox/ and I was wondering if you would like this too. It seems to me it what you were trying to accomplish here since that's the sort thing I was looking for when I founf your WPF 2D Carousel...

I initially thought about the same thing but that approach seemed to be a bit tasking to implement. I have also never handled a tablet pc so this was the best I could come up with. If I think of something that will lead to such functionality I will definitely update accordingly.

I found a C# to VB translator once on the Net, I'm sure you could find one for VB to C# as well. It wasn't perfect but it was good enough for me to understand the jist of what the code meant to do. I believe I saw one for C++ also.