DataTemplateSelector in .NET MAUI Rotator (SfRotator)

The SfRotator supports DataTemplateSelector, from which you can choose a DataTemplate based on the data object.

<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="DefaultTemplate">
            <Grid>
            <Image Source="{Binding Image}" HorizontalOptions="Center" VerticalOptions="Center"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SpecificTemplate">
            <Grid>
            <Label Text="Not Available" FontSize="50" HorizontalOptions="Center" VerticalOptions="Center"/> 
            <Image Source="{Binding Image}" Opacity="0.5" >
            </Grid>
        </DataTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>      
    <Grid >
        <syncfusion:SfRotator x:Name="sfRotator" 
                ItemsSource="{Binding ImageCollection}" >
            <syncfusion:SfRotator.ItemTemplate>
            <local:DataTemplateViewModel DefaultTemplate="{StaticResource DefaultTemplate}" SpecificTemplate="{StaticResource SpecificTemplate}"/>
            </syncfusion:SfRotator.ItemTemplate>
        </syncfusion:SfRotator>
    </Grid>
    </ContentPage.Content>
</ContentPage>
public partial class MainPage : ContentPage
    {
    DataTemplate defaultTemplate;
    DataTemplate specifictempalte;

    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new ViewModel();
        SfRotator rotator = new SfRotator();

        defaultTemplate = new DataTemplate(() =>
        { 
        Grid grid = new Grid();
        Image image = new Image();
        image.SetBinding(Image.SourceProperty, "Image");
        grid.Children.Add(image);
        return grid;
    });

        specifictempalte = new DataTemplate(() =>
        {
            Grid grid = new Grid();
            Image image = new Image();
            Label label = new Label();
            image.SetBinding(Image.SourceProperty, "Image");
            image.Opacity = 0.5;
            label.Text = "Not Available";
            label.FontSize = 50;
            label.HorizontalOptions = LayoutOptions.Center;
            label.VerticalOptions = LayoutOptions.Center;
            grid.Children.Add(image);
            grid.Children.Add(label);
            return grid;
        });
        
        var ImageCollection = new List<Model> {
        new Model ("image1.png"),
        new Model ("image2.png"),
        new Model ("image3.png"),
        new Model ("image4.png"),
        new Model ("image5.png")
        };
        rotator.NavigationDirection = NavigationDirection.Horizontal;
        rotator.NavigationStripMode = NavigationStripMode.Thumbnail;
        rotator.BackgroundColor = Colors.White;
        rotator.ItemsSource = ImageCollection;
        rotator.ItemTemplate = new DataTemplateViewModel { DefaultTemplate = defaultTemplate, SpecificTemplate = specifictempalte};
        this.Content = rotator;
    }
}

OnSelectTemplate

The OnSelectTemplate is an overridden method to return a particular DataTemplate, which is shown in the following code:

public class DataTemplateViewModel : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate SpecificTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var rotatorModel = item as RotatorModel;
        if (rotatorModel == null)
            return DefaultTemplate;

        // Apply the SpecificTemplate for a specific condition, e.g., check the image name or any other property
        if (rotatorModel.Image == "image2.png")
        {
            return SpecificTemplate;
        }

        return DefaultTemplate;
    }
}

The following screenshot illustrates the output of above code.

DataTemplateSelector

Find the complete DataTemplateSelector sample from this link.