Sliding Direction in .NET MAUI Rotator (SfRotator)

21 Jul 20264 minutes to read

The NavigationDirection property controls the direction in which .NET MAUI Rotator items are navigated. The property is of type NavigationDirection and the default value is Horizontal. When EnableAutoPlay is true, the rotator advances through the items in the selected direction.

The following NavigationDirection values are available:

  • Horizontal — Rotator items can be navigated in the horizontal direction.
  • Vertical — Rotator items can be navigated in the vertical direction.
  • LeftToRight — Rotator items can be navigated from Left to Right only.
  • RightToLeft — Rotator items can be navigated from Right to Left only.
  • TopToBottom — Rotator items can be navigated from Top to Bottom only.
  • BottomToTop — Rotator items can be navigated from Bottom to Top only.

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.

Set the Sliding Direction

Use the NavigationDirection property to set the sliding direction of Rotator. The following example sets the direction to BottomToTop.

<rotator:SfRotator x:Name="rotator"
                   ItemsSource="{Binding ImageCollection}"
                   SelectedIndex="2"
                   NavigationDirection="BottomToTop">
    <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.BottomToTop,
    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; }
    }
}

NavigationStripPosition gif

See Also