Navigation Customization in .NET MAUI Rotator (SfRotator)

17 Jan 20258 minutes to read

The Rotator control supports customizing dots, thumbnails and navigation buttons.

Dots Customization

In Dot Customization we can customise the dots’ stroke, selected and unselected dots’ color.

DotsStroke Color

The DotsStroke property is used to customize the color of the dots stroke in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripPosition="Bottom"
            DotsStroke="Aqua"
            WidthRequest="550"
            HeightRequest="550">
rotator.DotsStroke = Colors.Aqua;

SfRotator with dots stroke color

Selected Dot Color

The SelectedDotColor property is used to customize the color of selected dot in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripPosition="Bottom"
            DotsStroke="Aqua" 
            SelectedDotColor="Blue"
            WidthRequest="550"
            HeightRequest="550">
rotator.DotsStroke = Color.Aqua;
rotator.SelectedDotColor = Color.Blue;

SfRotator with selected dot color

Unselected Dot Color

The UnselectedDotColor property is used to customize the color of unselected dots in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripPosition="Bottom"
            DotsStroke="Aqua" 
            SelectedDotColor="Blue"
            UnselectedDotColor="Gray"
            WidthRequest="550"
            HeightRequest="550">
rotator.DotsStroke = Color.Aqua;
rotator.SelectedDotColor = Color.Blue;
rotator.UnselectedDotColor = Color.Gray;

SfRotator with unselected dot color

Thumbnails Customization

In Thumbnail Customization we can customise the selected and unselected thumbnail’s stroke.

Selected Thumbnail Stroke

The SelectedThumbnailStroke property is used to customize the color of the selected thumbnail stroke in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripPosition="Bottom"
            NavigationStripMode="Thumbnail"
            SelectedThumbnailStroke="Green"
            WidthRequest="550"
            HeightRequest="550">
rotator.NavigationStripMode = NavigationStripMode.Thumbnail;
rotator.SelectedThumbnailStroke = Colors.Green;

SfRotator with selected thumbnail stroke

UnSelected Thumbnail Stroke

The UnSelectedThumbnailStroke property is used to customize the color of the unselected thumbnails stroke in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripPosition="Bottom"
            NavigationStripMode="Thumbnail"
            SelectedThumbnailStroke="Green"
            UnselectedThumbnailStroke="Red"
            WidthRequest="550"
            HeightRequest="550">
rotator.NavigationStripMode = NavigationStripMode.Thumbnail;
rotator.SelectedThumbnailStroke = Colors.Green;
rotator.UnSelectedThumbnailStroke = Colors.Red;

SfRotator with unselected thumbnail stroke

In Navigation Button Customization we can customise the navigation button’s icon and Background color.

The NavigationButtonIconColor property is used to customize the color of the navigation buttons icon in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripMode="Thumbnail"
            NavigationButtonIconColor="Blue"
            WidthRequest="550"
            HeightRequest="550">
rotator.NavigationStripMode = NavigationStripMode.Thumbnail;
rotator.NavigationButtonIconColor = Colors.Blue;

SfRotator with navigation button icon Color

The NavigationButtonBackgroundColor property is used to customize the color of the navigation buttons background in the SfRotator.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripMode="Thumbnail"
            NavigationButtonBackgroundColor="Pink"
            NavigationButtonIconColor="Blue"
            WidthRequest="550"
            HeightRequest="550">
rotator.NavigationStripMode = NavigationStripMode.Thumbnail;
rotator.NavigationButtonBackgroundColor = Colors.Pink;
rotator.NavigationButtonIconColor = Colors.Blue;

SfRotator with navigation button Background Color

We can show or hide Navigation Button using ShowNavigationButton property.

<syncfusion:SfRotator x:Name="rotator" 
            ItemsSource="{Binding ImageCollection}" 
            SelectedIndex="2"
            BackgroundColor="#ececec"
            NavigationStripMode="Thumbnail"
            ShowNavigationButton="False"
            WidthRequest="550"
            HeightRequest="550">
rotator.NavigationStripMode = NavigationStripMode.Thumbnail;
rotator.ShowNavigationButton = false;

SfRotator with ShowNavigationButton property