Header Visibility in .NET MAUI Rotator (SfRotator)

21 Jul 20264 minutes to read

The IsTextVisible property enables the text area at the bottom of the .NET MAUI Rotator control, which displays additional information about each item.

The text area is populated from the ItemText property of SfRotatorItem when items are added through the SfRotatorItem collection. When items are populated through an ItemTemplate, the text area does not appear, even when IsTextVisible is true.

Note: By default, IsTextVisible is false.

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.

Show the Header Text

To display the header text, set IsTextVisible to true and populate the ItemsSource with SfRotatorItem objects that have their ItemText property set.

<rotator:SfRotator x:Name="rotator"
                    ItemsSource="{Binding ImageCollection}"
                    BackgroundColor="#ececec"
                    IsTextVisible="True"
                    VerticalOptions="Start">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    VerticalOptions = LayoutOptions.Start,
    rotator.IsTextVisible = true,
    BackgroundColor = Color.FromArgb("#ececec"),
    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; }
    }
}

SfRotator with the header text area visible

See also