- Dots Customization
- Thumbnails Customization
- Navigation Button Customization
- Navigation Visibility
Contact Support
Navigation Customization in .NET MAUI Rotator (SfRotator)
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;
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;
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;
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;
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;
Navigation Button Customization
In Navigation Button Customization we can customise the navigation button’s icon and Background color.
Navigation Button Icon 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;
Navigation Button Background 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;
Navigation Visibility
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;