SlideshowView Control for Universal Apps

image

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>

 

image

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>

 

image

 

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>

image

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>

image

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>

image

 

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>

image

 

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

Install-Package SlideshowView

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

Tareq Ateik

Read more posts by this author.