Navigation Customization in .NET MAUI Rotator (SfRotator)

21 Jul 202624 minutes to read

Overview

The .NET MAUI Rotator control supports customizing the appearance and visibility of the navigation bar, including the dot indicators, the thumbnail indicators, the navigation button, and the position of the strip.

This page covers:

• Dots Customization - stroke color, selected dot color, and unselected dot color.
• Thumbnails Customization - stroke color of the selected and unselected thumbnail.
• Customizing Position - placement of the navigation strip (Top, Bottom, Left, Right).
• Navigation Button Customization - icon color and background color of the navigation buttons.
• Navigation Visibility - showing or hiding the navigation buttons.

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.

Properties Reference

Property	Type	Default	Description
DotsStroke	Color	Colors.Transparent	The stroke color of the dot indicators.
SelectedDotColor	Color	Color.FromRgb(73, 69, 79)	The fill color of the currently selected dot.
UnselectedDotColor	Color	Color.FromRgb(202, 196, 208)	The fill color of the unselected dots.
SelectedThumbnailStroke	Color	Color.FromRgb(103, 80, 164)	The stroke color of the currently selected thumbnail.
UnselectedThumbnailStroke	Color	Color.FromRgb(202, 196, 208)	The stroke color of the unselected thumbnails.
NavigationStripPosition	NavigationStripPosition	Bottom	The placement of the navigation bar relative to the slider.
NavigationButtonIconColor	Color	Color.FromRgb(73, 69, 79)	The icon color of the navigation buttons.
NavigationButtonBackgroundColor	Color	Color.FromRgb(247, 242, 251)	The background color of the navigation buttons.

Dots Customization

Customize the dot stroke, the selected dot color, and the unselected dot color.

DotsStroke Color

The DotsStroke property customizes the color of the dot stroke.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripPosition="Bottom"
                    DotsStroke="Aqua"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripPosition = NavigationStripPosition.Bottom,
    DotsStroke = Colors.Aqua,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Selected Dot Color

The SelectedDotColor property customizes the color of the selected dot.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripPosition="Bottom"
                    DotsStroke="Aqua"
                    SelectedDotColor="Blue"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripPosition = NavigationStripPosition.Bottom,
    DotsStroke = Colors.Aqua,
    SelectedDotColor = Colors.Blue,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Unselected Dot Color

The UnselectedDotColor property customizes the color of the unselected dots.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripPosition="Bottom"
                    DotsStroke="Aqua"
                    SelectedDotColor="Blue"
                    UnselectedDotColor="Gray"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripPosition = NavigationStripPosition.Bottom,
    DotsStroke = Colors.Aqua,
    SelectedDotColor = Colors.Blue,
    UnselectedDotColor = Colors.Gray,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Thumbnails Customization

Customize the stroke of the selected and unselected thumbnails.

Selected Thumbnail Stroke

The SelectedThumbnailStroke property customizes the color of the selected thumbnail stroke. Set NavigationStripMode to Thumbnail for the navigation buttons and thumbnail strip to appear.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripPosition="Bottom"
                    NavigationStripMode="Thumbnail"
                    SelectedThumbnailStroke="Green"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripPosition = NavigationStripPosition.Bottom,
    NavigationStripMode = NavigationStripMode.Thumbnail;
    SelectedThumbnailStroke = Colors.Green,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Unselected Thumbnail Stroke

The UnselectedThumbnailStroke property customizes the color of the unselected thumbnail strokes.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripPosition="Bottom"
                    NavigationStripMode="Thumbnail"
                    SelectedThumbnailStroke="Green"
                    UnselectedThumbnailStroke="Red"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripPosition = NavigationStripPosition.Bottom,
    NavigationStripMode = NavigationStripMode.Thumbnail,
    SelectedThumbnailStroke = Colors.Green,
    UnselectedThumbnailStroke = Colors.Red,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Customizing Position

The NavigationStripPosition property specifies the placement of the navigation strip (thumbnails or dots) relative to the slider area. The available values are Bottom, Top, Left, and Right. The following example sets the position to Top.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    NavigationStripMode="Dots"
                    NavigationStripPosition="Top"
                    BackgroundColor="#ececec"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
   SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripMode = NavigationStripMode.Dots,
    NavigationStripPosition = NavigationStripPosition.Top,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Navigation Button Customization

Customize the icon color and background color of the navigation buttons. The navigation buttons are only visible when NavigationStripMode is set to Thumbnail.

Navigation Button Icon Color

The NavigationButtonIconColor property customizes the icon color of the navigation buttons.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripMode="Thumbnail"
                    NavigationButtonIconColor="Blue"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripMode = NavigationStripMode.Thumbnail;
    NavigationButtonIconColor = Colors.Blue;
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Navigation Button Background Color

The NavigationButtonBackgroundColor property customizes the background color of the navigation buttons.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripMode="Thumbnail"
                    NavigationButtonBackgroundColor="Pink"
                    NavigationButtonIconColor="Blue"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripMode = NavigationStripMode.Thumbnail,
    NavigationButtonBackgroundColor = Colors.Pink,
    NavigationButtonIconColor = Colors.Blue,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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; }
    }
}

Navigation Visibility

Use the ShowNavigationButton property to show or hide the navigation buttons. The buttons are only relevant when NavigationStripMode is set to Thumbnail.

XAML

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    SelectedIndex="2"
                    BackgroundColor="#ececec"
                    NavigationStripMode="Thumbnail"
                    ShowNavigationButton="False"
                    WidthRequest="550"
                    HeightRequest="550">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>

C#

RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    SelectedIndex = 2,
    BackgroundColor = Color.FromArgb("#ececec"),
    NavigationStripMode = NavigationStripMode.Thumbnail,
    ShowNavigationButton = false,
    WidthRequest = 550,
    HeightRequest = 550,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};

ViewModel

// 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

• Navigation Modes in .NET MAUI Rotator
• Sliding Direction in .NET MAUI Rotator
• Placement Modes in .NET MAUI Rotator
• Populating Data in .NET MAUI Rotator
• Adding Looping and Delays in .NET MAUI Rotator