SlideshowView Control for Universal Apps

I was looking for a free slideshow control (carousel) to use in my Universal apps. Of course if all you need is a slider with couple of items, you can use the native FlipView control. If you want more features, then keep reading!

This control can be used like any other ItemsControl (ListView,GridView,FlipView …etc). You have to provide the ItemTemplate and set the ItemsSource

<sv:SlideshowView x:Name="ssv">
<sv:SlideshowView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="White" BorderThickness="1">
<Grid>
<Image Source="{Binding Image}" />
<TextBlock Text="{Binding Description}" FontSize="22" TextWrapping="Wrap" VerticalAlignment="Bottom" />
</Grid>
</Border>
</DataTemplate>
</sv:SlideshowView.ItemTemplate>
</sv:SlideshowView>

Orienation

By default the orienation is Horizontal, but it can be changed to Vertical


<sv:SlideshowView x:Name="ssv" Orientation="Vertical">
…
</sv:SlideshowView>

Thumbnails

You can enable three different types of thumbnails for this control:

AutoGenerated

This type enables the control to render whatever you have in the ItemTemplate. It will also handles remote images and will load asynchronously.
To use it, you will need to set up the ThumbnailsType to AutoGenerated


<sv:SlideshowView x:Name="ssv" ThumbnailsType="AutoGenerated">
…
</sv:SlideshowView>

If you want to change the size of the thumbnails, you have to edit the AutoThumbnailHeight & AutoThumbnailWidth


<sv:SlideshowView x:Name="ssv" ThumbnailsType="AutoGenerated" AutoThumbnailHeight="150" AutoThumbnailWidth="250">
…
</sv:SlideshowView>

Dots

Another Thumbnail type is Dots, where by default it shows blue and grey dots for the selected and unselected items.


<sv:SlideshowView x:Name="ssv" ThumbnailsType="Dots">
…
</sv:SlideshowView>

You can customize the dots (its called “Dots” but it can be anything) by editing the two templates SelectedDotTemplate & DotTemplate


<sv:SlideshowView x:Name="ssv" ThumbnailsType="Dots" Orientation="Horizontal">
<sv:SlideshowView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="White" BorderThickness="1">
<Grid>
<Image Source="{Binding Image}" />
<TextBlock Text="{Binding Description}" FontSize="22" TextWrapping="Wrap" />
</Grid>
</Border>
</DataTemplate>
</sv:SlideshowView.ItemTemplate>
<sv:SlideshowView.SelectedDotTemplate>
<DataTemplate>
<TextBlock Text="&#xE11D;" FontFamily="Segoe UI Symbol" FontSize="48" VerticalAlignment="Center" HorizontalAlignment="Center" />
</DataTemplate>
</sv:SlideshowView.SelectedDotTemplate>
<sv:SlideshowView.DotTemplate>
<DataTemplate>
<TextBlock Text="&#x1f47f;" FontFamily="Segoe UI Symbol" FontSize="48" VerticalAlignment="Center" HorizontalAlignment="Center" />
</DataTemplate>
</sv:SlideshowView.DotTemplate>
</sv:SlideshowView>

CustomThumbnail

The Custom thumbnail is just a direct way to provide your own template for the thumbnails. It will use the same DataContext of the Items. To use this type, change the ThumbnailType to CustomThumbnail and provide your own ThumbnailTemplate


<sv:SlideshowView x:Name="ssv" ThumbnailsType="CustomThumbnail" Orientation="Horizontal">
<sv:SlideshowView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="White" BorderThickness="1">
<Grid>
<Image Source="{Binding Image}" />
<TextBlock Text="{Binding Description}" FontSize="22" TextWrapping="Wrap" />
</Grid>
</Border>
</DataTemplate>
</sv:SlideshowView.ItemTemplate>
<sv:SlideshowView.ThumbnailTemplate>
<DataTemplate >
<Image Source="{Binding Image}" Width="100" Height="100" />
</DataTemplate>
</sv:SlideshowView.ThumbnailTemplate>
</sv:SlideshowView>

Auto Playing

One more feature is the ability to make the items slide. You will need to provide SlideshowInterval and set the IsPlaying value to true


<sv:SlideshowView x:Name="ssv" SlideshowInterval="0:0:1" IsPlaying="False" ThumbnailsType="Dots" Orientation="Horizontal">
<sv:SlideshowView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="White" BorderThickness="1">
<Grid>
<Image Source="{Binding Image}" />
<TextBlock Text="{Binding Description}" FontSize="22" TextWrapping="Wrap" />
</Grid>
</Border>
</DataTemplate>
</sv:SlideshowView.ItemTemplate>
</sv:SlideshowView>
<ToggleSwitch IsOn="{Binding IsPlaying,ElementName=ssv,Mode=TwoWay}" />

Template of the next/previous arrows

These templates can be changed by changing the following templates HorizontalNextTemplate, HorizontalPreviousTemplate, VerticalNextTemplate and VerticalPreviousTemplate


<sv:SlideshowView.HorizontalNextTemplate>
<DataTemplate>
<TextBlock Text="Next &gt;&gt;" Foreground="White" FontSize="50" />
</DataTemplate>
</sv:SlideshowView.HorizontalNextTemplate>
<sv:SlideshowView.HorizontalPreviousTemplate>
<DataTemplate>
<TextBlock Text="&lt;&lt; Previous" Foreground="White" FontSize="50" />
</DataTemplate>
</sv:SlideshowView.HorizontalPreviousTemplate>
<sv:SlideshowView.VerticalPreviousTemplate>
<DataTemplate>
<TextBlock Text="Previous" Foreground="White" FontSize="50" />
</DataTemplate>
</sv:SlideshowView.VerticalPreviousTemplate>
<sv:SlideshowView.VerticalNextTemplate>
<DataTemplate>
<TextBlock Text="Next" Foreground="White" FontSize="50" />
</DataTemplate>
</sv:SlideshowView.VerticalNextTemplate>

You can find the control by searching for “SlideshowView” on Nuget, or by typing the following command in the Nuget console:

You’re free to use this control for any free or commercial project

Please reach me for any feature request (or bugs report) on Twitter @TareqAteik

Leave a Reply

Your email address will not be published. Required fields are marked *