Adding Looping and Delays in .NET MAUI Rotator (SfRotator)

21 Jul 202617 minutes to read

Looping and delay can be enabled in the .NET MAUI Rotator control in .NET MAUI.

Properties Reference

Property Type Default Description
EnableAutoPlay bool false Specifies whether the items should navigate automatically.
NavigationDelay int 1000 Specifies the delay (in milliseconds) before switching to the next item. Effective only when EnableAutoPlay is true.
EnableLooping bool false Specifies whether the items should loop back to the first item after reaching the last item.
EnableSwiping bool true Specifies whether the user can swipe between items.

Prerequisites

Before using the SfRotator, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Rotator

For step-by-step setup, refer to the Getting Started documentation.

Enable AutoPlay

The EnableAutoPlay property specifies whether the items should navigate automatically based on the NavigationDelay property when EnableAutoPlay is set to true.

NOTE

By default, the EnableAutoPlay value is set to false.

<rotator:SfRotator x:Name="rotator" 
                   ItemsSource="{Binding ImageCollection}" 
                   SelectedIndex="2"
                   NavigationDirection="Horizontal"
                   NavigationStripMode="Thumbnail" 
                   BackgroundColor="#ececec"
                   EnableAutoPlay="True"
                   NavigationStripPosition="Bottom">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image  Source="{Binding Image}"/>
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    NavigationDirection = NavigationDirection.Horizontal,
    NavigationStripMode = NavigationStripMode.Thumbnail,
    BackgroundColor = Color.FromArgb("#ececec"),
    EnableAutoPlay = true,
    NavigationStripPosition = NavigationStripPosition.Bottom,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};
// Model
public class RotatorModel
{
    public RotatorModel(string imageString)
    {
        Image = imageString;
    }
    private string _image;
    public string Image
    {
        get { return _image; }
        set { _image = value; }
    }
}

// ViewModel
public class RotatorViewModel
{
    public RotatorViewModel()
    {
        imageCollection = new List<RotatorModel>
        {
            new RotatorModel("image1.png"),
            new RotatorModel("image2.png"),
            new RotatorModel("image3.png"),
            new RotatorModel("image4.png"),
            new RotatorModel("image5.png")
        };
    }
    private List<RotatorModel> imageCollection;
    public List<RotatorModel> ImageCollection
    {
        get { return imageCollection; }
        set { imageCollection = value; }
    }
}

Setting Navigation Delay

The NavigationDelay property specifies the delay duration before switching to the next item when EnableAutoPlay is enabled.

NOTE

The property value should be in milliseconds. If EnableAutoPlay is false, the NavigationDelay value has no effect.

<rotator:SfRotator x:Name="rotator" 
                   NavigationDelay="2000" 
                   ItemsSource="{Binding ImageCollection}" 
                   SelectedIndex="2"
                   NavigationDirection="Horizontal"
                   NavigationStripMode="Thumbnail" 
                   BackgroundColor="#ececec"
                   EnableAutoPlay="True"
                   NavigationStripPosition="Bottom">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image  Source="{Binding Image}"/>
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    NavigationDirection = NavigationDirection.Horizontal,
    NavigationStripMode = NavigationStripMode.Thumbnail,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationDelay = 2000,
    EnableAutoPlay = true,
    NavigationStripPosition = NavigationStripPosition.Bottom,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};
// Model
public class RotatorModel
{
    public RotatorModel(string imageString)
    {
        Image = imageString;
    }
    private string _image;
    public string Image
    {
        get { return _image; }
        set { _image = value; }
    }
}

// ViewModel
public class RotatorViewModel
{
    public RotatorViewModel()
    {
        imageCollection = new List<RotatorModel>
        {
            new RotatorModel("image1.png"),
            new RotatorModel("image2.png"),
            new RotatorModel("image3.png"),
            new RotatorModel("image4.png"),
            new RotatorModel("image5.png")
        };
    }
    private List<RotatorModel> imageCollection;
    public List<RotatorModel> ImageCollection
    {
        get { return imageCollection; }
        set { imageCollection = value; }
    }
}

Looping Items

The EnableLooping property specifies whether the items should navigate to the first item once they reach the last item and vice-versa.

NOTE

By default, the EnableLooping is set to false.

<rotator:SfRotator x:Name="rotator" 
                   NavigationDelay="2000" 
                   ItemsSource="{Binding ImageCollection}" 
                   SelectedIndex="2"
                   NavigationDirection="Horizontal"
                   NavigationStripMode="Thumbnail" 
                   BackgroundColor="#ececec"
                   EnableAutoPlay="true"
                   EnableLooping="true"
                   NavigationStripPosition="Bottom">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image  Source="{Binding Image}"/>
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    NavigationDirection = NavigationDirection.Horizontal,
    NavigationStripMode = NavigationStripMode.Thumbnail,
    BackgroundColor = Color.FromArgb("#ececec"),
    EnableAutoPlay = true,
    EnableLooping = true,
    NavigationDelay = 2000,
    NavigationStripPosition = NavigationStripPosition.Bottom,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};
// Model
public class RotatorModel
{
    public RotatorModel(string imageString)
    {
        Image = imageString;
    }
    private string _image;
    public string Image
    {
        get { return _image; }
        set { _image = value; }
    }
}

// ViewModel
public class RotatorViewModel
{
    public RotatorViewModel()
    {
        imageCollection = new List<RotatorModel>
        {
            new RotatorModel("image1.png"),
            new RotatorModel("image2.png"),
            new RotatorModel("image3.png"),
            new RotatorModel("image4.png"),
            new RotatorModel("image5.png")
        };
    }
    private List<RotatorModel> imageCollection;
    public List<RotatorModel> ImageCollection
    {
        get { return imageCollection; }
        set { imageCollection = value; }
    }
}

Enable swiping

To restrict the user interaction, the EnableSwiping property of Rotator be set to false.

<rotator:SfRotator x:Name="rotator" 
                   NavigationDelay="2000" 
                   ItemsSource="{Binding ImageCollection}" 
                   SelectedIndex="2"
                   BackgroundColor="#ececec"
                   EnableSwiping="False"
                   NavigationStripPosition="Bottom">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image  Source="{Binding Image}"/>
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    NavigationDirection = NavigationDirection.Horizontal,
    NavigationStripMode = NavigationStripMode.Thumbnail,
    BackgroundColor = Color.FromArgb("#ececec"),
    EnableSwiping = false,
    NavigationStripPosition = NavigationStripPosition.Bottom,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};
// Model
public class RotatorModel
{
    public RotatorModel(string imageString)
    {
        Image = imageString;
    }
    private string _image;
    public string Image
    {
        get { return _image; }
        set { _image = value; }
    }
}

// ViewModel
public class RotatorViewModel
{
    public RotatorViewModel()
    {
        imageCollection = new List<RotatorModel>
        {
            new RotatorModel("image1.png"),
            new RotatorModel("image2.png"),
            new RotatorModel("image3.png"),
            new RotatorModel("image4.png"),
            new RotatorModel("image5.png")
        };
    }
    private List<RotatorModel> imageCollection;
    public List<RotatorModel> ImageCollection
    {
        get { return imageCollection; }
        set { imageCollection = value; }
    }
}

See Also