Image carousels are a common need for mobile applications. These can be used to provide users with a familiar experience to view and scroll through images. Thankfully in Windows 8.1 and Windows Phone 8.1 Microsoft has provided useful components to easily create these carousels.

To start creating the carousel I have created a new User Control and named it "ImageCarousel". This control will need to contain a dependency property that holds the image URLs:

 public ObservableCollection Images
 get { return (ObservableCollection)GetValue(ImagesProperty); }
 set { SetValue(ImagesProperty, value); }
 public static readonly DependencyProperty ImagesProperty =
 DependencyProperty.Register("Images", typeof(ObservableCollection), typeof(ImageCarousel),
 new PropertyMetadata(new ObservableCollection()));

Now to use the dependency property we will take advantage of the ItemsControl component which will help render the list of URLs into images.

 Style="{StaticResource ImageCarouselItemsControlStyle}" /> 

The name "ImageCarouselElement" is declared on the User Control as x:Name="ImageCarouselElement" so that we can bind to its elements, including the image URLs.

The style provided on the ItemsControl will orient it horizontally and provides the functionality to snap to the images when the user finishes scrolling. Below is the style:


Finally we will define the Image component within the ItemsControl item template.


Width="{Binding Path=ActualWidth, ElementName=ImageCarouselElement}"
Height="{Binding Path=ActualHeight, ElementName=ImageCarouselElement}" />

The image is sized to the height and width of the carousel and uses the below style that will center crop the image to fit.


Now you can create your new ImageCarousel within a page.

 Images="{Binding Images}" /> 

To add additional functionality you can also add a dependency property that tracks which image you are viewing. Using this you can easily create the indicators that are often seen at the bottom of these carousels to identify which image you are on. An example Indicator component is included in the files attached to this post.

Please see the attached file for a final version of the component.