Loading Online Images in .NET MAUI Rotator (SfRotator)

21 Jul 20263 minutes to read

The .NET MAUI Rotator control can load images from remote URLs by binding a collection of model objects whose Image property holds the URL. The ItemTemplate resolves the URL through the standard .NET MAUI Image control, which handles the network request, caching, and platform-specific configuration (such as ATS on iOS or clear text traffic on Android).

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.

Load Online Images

Bind the RotatorViewModel.ImageCollection to the ItemsSource property of SfRotator and use an ItemTemplate to display each image. The Image.Source binding resolves the URL for each item.

<rotator:SfRotator x:Name="rotator"
                   ItemsSource="{Binding ImageCollection}"
                   NavigationDirection="Horizontal">
    <rotator:SfRotator.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" />
        </DataTemplate>
    </rotator:SfRotator.ItemTemplate>
</rotator:SfRotator>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
SfRotator rotator = new SfRotator()
{
    NavigationDirection = NavigationDirection.Horizontal,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        var image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        return image;
    }),
};
public class RotatorModel
{
    public RotatorModel(string image)
    {
        Image = image;
    }
    public string Image { get; set; }
}

public class RotatorViewModel
{
    public RotatorViewModel()
    {
        ImageCollection = new ObservableCollection<RotatorModel>
        {
            new RotatorModel("https://cdn.syncfusion.com/content/images/Images/Camtasia_Succinctly.png"),
            new RotatorModel("https://cdn.syncfusion.com/content/images/Images/SQL_Queries_Succinctly.png"),
            new RotatorModel("https://cdn.syncfusion.com/content/images/Images/Keystonejs_Succinctly.png"),
            new RotatorModel("https://cdn.syncfusion.com/content/images/Images/sql_server_for_c_sharp_developers_succinctly_cover_img.png")
        };
    }

    public ObservableCollection<RotatorModel> ImageCollection { get; set; }
}

SfRotator loading images from URLs

See also