Carousel Control In UWP

The Carousel control inherits from ItemsControl, representing a nice and smooth carousel. Carousel Control has a lot of properties for a flexible layouting. This control works fine with mouse, touch, and keyboard as well. Carousel Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use Carousel Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP app.

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017

Step 1

Open Visual Studio 2017 and go to Start -> New Project-> select Windows Universal (under Visual C#)-> Blank App (Universal Windows) -> give it a suitable name (ex- UWPCarousel)->OK.

 

After choosing the target and minimum platform version that your Windows Universal application will support, the Project creates App.xaml and MainPage.xaml.

 

Step 2

First, right-click the project and select "Manage NuGet Packages". Then, update to the latest version of Microsoft.NETCore.UniversalWindowsPlatform.

For adding UWPToolKit Control, please refer the below link.

http://www.c-sharpcorner.com/article/how-to-add-uwp-toolkit-controls-in-universal-application-development-with-xaml-a/

Step 3

Add the following controls in design window for Carousal control view. Add a TextBlock Control and change its name and text property.

Add the Carousel Control and change the Name, InvertPositive, ItemDepth, ItemMargin, ItemRotationX, ItemRotationY, ItemRotationZ,Orientation, ItemTemplate, SelectedIndex, Margin, EasingFunction Properties.

<Controls:Carousel x:Name="CaroTest" InvertPositive="True" ItemDepth="300" ItemMargin="19" ItemRotationX="43" ItemRotationY="65" ItemRotationZ="42" Orientation="Horizontal" ItemTemplate="{StaticResource photos}" SelectedIndex="2" Margin="0,39,0,263">
    <Controls:Carousel.EasingFunction>
        <CubicEase EasingMode="EaseOut" /> </Controls:Carousel.EasingFunction>
</Controls:Carousel>

 

Step 4

Create an "Images" folder and add images for Carousel control.

 

 Step 5

Add the XAML code for image resource for Carousel.

<Page.Resources>
    <DataTemplate x:Key="photos">
        <Grid Background="White" BorderBrush="Black" BorderThickness="1">
            <Image Source="{Binding CItem}" Width="200" Height="200" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
    </DataTemplate>
</Page.Resources>

Step 6

Add the following namespace and code in MainPage.xaml.cs.

using System.Collections.ObjectModel;
public class CaroItem {
    public string CItem {
        get;
        set;
    }
}
public sealed partial class MainPage: Page {
    ObservableCollection < CaroItem > items = new ObservableCollection < CaroItem > ();
    public MainPage() {
        this.InitializeComponent();
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//01.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//02.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//03.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//04.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//05.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//06.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//07.jpg")
        });
        items.Add(new CaroItem() {
            CItem = string.Format("ms-appx:///Images//08.jpg")
        });
        CaroTest.ItemsSource = items;
    }
}

Note

Automatically, the following code will be generated in XAML code view while we are done in the design view.

<Page x:Class="UWPCarousel.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCarousel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="photos">
            <Grid Background="White" BorderBrush="Black" BorderThickness="1">
                <Image Source="{Binding CItem}" Width="200" Height="200" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="88,43,0,0" TextWrapping="Wrap" Text="Carousel Control in UWP" VerticalAlignment="Top" FontWeight="Bold" />
        <Border Margin="0,32,0,-32">
            <Controls:Carousel x:Name="CaroTest" InvertPositive="True" ItemDepth="300" ItemMargin="19" ItemRotationX="43" ItemRotationY="65" ItemRotationZ="42" Orientation="Horizontal" ItemTemplate="{StaticResource photos}" SelectedIndex="2" Margin="0,39,0,263">
                <Controls:Carousel.EasingFunction>
                    <CubicEase EasingMode="EaseOut" /> </Controls:Carousel.EasingFunction>
            </Controls:Carousel>
        </Border>
    </Grid>
</Page>

Step 7

Deploy your app on a local machine. The output of the UWPCarousel is shown below.

After moving to the next image.

 

Summary

Now, you have successfully tested Carousel Control in XAML and UWP environment using Visual Studio 2017.