Placement Modes in .NET MAUI Rotator (SfRotator)
21 Jul 20264 minutes to read
Overview
The DotPlacement property controls where the navigation dots are rendered for each item in the .NET MAUI Rotator. The property is of type DotsPlacement (enum) and the default value is Default.
The following DotsPlacement values are available:
-
Default- Displays dots for each item inside the rotator area. -
None- Hides the dots, creating a clean appearance with no navigation indicators. -
OutSide- Displays dots outside the rotator area, around the slider.
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 DotPlacement
The DotPlacement property controls where the dots are rendered for the rotator items. The following example sets the placement to None to hide the dots.
<rotator:SfRotator x:Name="rotator"
ItemsSource="{Binding ImageCollection}"
SelectedIndex="2"
BackgroundColor="#ececec"
WidthRequest="550"
HeightRequest="550"
DotPlacement="None">
<rotator:SfRotator.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}" />
</DataTemplate>
</rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
SelectedIndex = 2,
BackgroundColor = Color.FromArgb("#ececec"),
NavigationStripMode = NavigationStripMode.Thumbnail,
WidthRequest = 550,
HeightRequest = 550,
DotPlacement = DotsPlacement.None,
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; }
}
}