DataTemplateSelector in .NET MAUI Rotator (SfRotator)

21 Jul 20267 minutes to read

The .NET MAUI Rotator supports DataTemplateSelector, with which you can choose a DataTemplate based on the underlying data object for each item.

DataTemplateSelector exposes a single over ridable method, OnSelectTemplate, which is invoked by the Rotator once per item. The method receives the data object (item) and the parent BindableObject (container), and must return the DataTemplate to use for that item.

Creating the DataTemplateSelector

Define a class that derives from DataTemplateSelector and overrides OnSelectTemplate to return a template based on the data object:

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 Model;
        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;
    }
}

Applying the DataTemplateSelector

The following examples show how to apply the DataTemplateViewModel selector to the Rotator and supply the DefaultTemplate / SpecificTemplate resources.

<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 >
        <rotator:SfRotator x:Name="sfRotator" 
                ItemsSource="{Binding ImageCollection}" >
            <rotator:SfRotator.ItemTemplate>
            <local:DataTemplateViewModel DefaultTemplate="{StaticResource DefaultTemplate}" SpecificTemplate="{StaticResource SpecificTemplate}"/>
            </rotator:SfRotator.ItemTemplate>
        </rotator:SfRotator>
    </Grid>
</ContentPage.Content>
RotatorViewModel rotatorViewModel = new RotatorViewModel();
DataTemplate defaultTemplate = new DataTemplate(() =>
{
    Grid grid = new Grid();
    Image image = new Image();
    image.SetBinding(Image.SourceProperty, "Image");
    grid.Children.Add(image);
    return grid;
});

DataTemplate 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;
});

SfRotator rotator = new SfRotator()
{
    NavigationDirection = NavigationDirection.Horizontal,
    NavigationStripMode = NavigationStripMode.Thumbnail,
    BackgroundColor = Colors.White,
    ItemsSource = rotatorViewModel.ImageCollection,
    ItemTemplate = new DataTemplateViewModel()
    {
        DefaultTemplate = defaultTemplate,
        SpecificTemplate = specifictempalte
    }
};
// 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; }
    }
}

The following screenshot illustrates the output of the above code:

DataTemplateSelector

See Also

Find the complete DataTemplateSelector sample on GitHub.