ListView Cell Types

Cells in RadListView are the presentation of each data item from the control's ItemsSource. You can choose between two types of cells, namely:

• ListViewTextCell derives from Xamarin.Forms.TextCell and displays text. It can optionally render detail text as a second row within a list view item. This is the default cell of the RadListView.
• ListViewTemplateCell derives from Xamarin.Forms.ViewCell and used to present complex data sets as RadListView.ItemTemplate.

ListViewTextCell Example

This example demonstrates how to create a list view with text cells, like this:

1. Create a view model that will be the source of the list view:

• C#

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
}

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<Book>{
            new Book{ Title = "The Fault in Our Stars ",  Author = "John Green"},
            new Book{ Title = "Divergent",  Author = "Veronica Roth"},
            new Book{ Title = "Gone Girl",  Author = "Gillian Flynn"},
            new Book{ Title = "Clockwork Angel",  Author = "Cassandra Clare"},
            new Book{ Title = "The Martian",  Author = "Andy Weir"},
            new Book{ Title = "Ready Player One",  Author = "Ernest Cline"},
            new Book{ Title = "The Lost Hero",  Author = "Rick Riordan"},
            new Book{ Title = "All the Light We Cannot See",  Author = "Anthony Doerr"},
            new Book{ Title = "Cinder",  Author = "Marissa Meyer"},
            new Book{ Title = "Me Before You",  Author = "Jojo Moyes"},
            new Book{ Title = "The Night Circus",  Author = "Erin Morgenstern"},
        };
    }

    public List<Book> Source { get; set; }
}

2. Add the definition of the listview control:

• XAML
• C#

<telerikDataControls:RadListView ItemsSource="{Binding Source}" x:Name="listView">
    <telerikDataControls:RadListView.BindingContext>
        <local:ViewModel />
    </telerikDataControls:RadListView.BindingContext>
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTextCell Text="{Binding Title}" Detail="{Binding Author}" TextColor="Black" DetailColor="Gray" />
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
    <telerikDataControls:RadListView.LayoutDefinition>
        <telerikListView:ListViewLinearLayout ItemLength="60" />
    </telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>

var listView = new RadListView
{
    ItemsSource = new ViewModel().Source,
    ItemTemplate = new DataTemplate(() =>
    {
        var cell = new ListViewTextCell
        {
            TextColor = Color.Black,
            DetailColor = Color.Gray,
        };

        cell.SetBinding(ListViewTextCell.TextProperty, new Binding(nameof(Book.Title)));
        cell.SetBinding(ListViewTextCell.DetailProperty, new Binding(nameof(Book.Author)));

        return cell;
    }),
    LayoutDefinition = new ListViewLinearLayout { ItemLength = 60 },
};

3. Add the following namespaces:

• XAML
• C#

xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"

using Telerik.XamarinForms.DataControls;
using Telerik.XamarinForms.DataControls.ListView;

4. Finally, set the list view as the content of your page.

ListViewTemplateCell Example

This example demonstrates how to create a list view with templated cells, like this:

1. Create a view model that will be the source of the list view:

• C#

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public bool IsFavourite { get; set; }
}

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<Book>{
            new Book{ Title = "The Fault in Our Stars ",  Author = "John Green"},
            new Book{ Title = "Divergent",  Author = "Veronica Roth"},
            new Book{ Title = "Gone Girl",  Author = "Gillian Flynn", IsFavourite = true},
            new Book{ Title = "Clockwork Angel",  Author = "Cassandra Clare"},
            new Book{ Title = "The Martian",  Author = "Andy Weir"},
            new Book{ Title = "Ready Player One",  Author = "Ernest Cline"},
            new Book{ Title = "The Lost Hero",  Author = "Rick Riordan", IsFavourite = true},
            new Book{ Title = "All the Light We Cannot See",  Author = "Anthony Doerr"},
            new Book{ Title = "Cinder",  Author = "Marissa Meyer"},
            new Book{ Title = "Me Before You",  Author = "Jojo Moyes"},
            new Book{ Title = "The Night Circus",  Author = "Erin Morgenstern"},
        };
    }

    public List<Book> Source { get; set; }
}

2. Define the listview control either in Xaml or in code behind.

You can define the list view in Xaml like this:

• XAML

<telerikDataControls:RadListView ItemsSource="{Binding Source}" x:Name="listView">
    <telerikDataControls:RadListView.BindingContext>
        <local:ViewModel />
    </telerikDataControls:RadListView.BindingContext>
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>
                    <Grid>
                        <StackLayout Orientation="Horizontal" Margin="10, 10, 10, 0">
                            <Image IsVisible="{Binding IsFavourite}" Source="favourite.png" HeightRequest="16" VerticalOptions="Center" />
                            <Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center" />
                        </StackLayout>
                        <StackLayout Orientation="Horizontal" Grid.Row="1" Margin="10, 0, 10, 10">
                            <Label Text="by" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                            <Label Text="{Binding Author}" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                        </StackLayout>
                    </Grid>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

• Define the namespace

• XAML

xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"

• You can define the list view in code behind:

• For clarity, let's build the template of the list view cell in a separate method:

• C#

public View GetCellContent()
{
    var content = new Grid();

    var book = new Label
    {
        FontAttributes = FontAttributes.Bold,
        TextColor = Color.Black,
        FontSize = 16,
        VerticalOptions = LayoutOptions.Center
    };

    book.SetBinding(Label.TextProperty, new Binding(nameof(Book.Title)));

    var fav = new Image
    {
        Source = ImageSource.FromFile("favourite.png"),
        HeightRequest = 16,
        VerticalOptions = LayoutOptions.Center
    };

    fav.SetBinding(Image.IsVisibleProperty, new Binding(nameof(Book.IsFavourite)));

    var author = new Label
    {
        TextColor = Color.Gray,
        FontAttributes = FontAttributes.Italic,
        FontSize = 13
    };

    author.SetBinding(Label.TextProperty, new Binding(nameof(Book.Author)));

    var by = new Label
    {
        Text = "by",
        TextColor = Color.Gray,
        FontAttributes = FontAttributes.Italic,
        FontSize = 13
    };

    var main = new StackLayout { Orientation = StackOrientation.Horizontal, Margin = new Thickness(10, 10, 10, 0) };
    main.Children.Add(fav);
    main.Children.Add(book);

    var detail = new StackLayout { Orientation = StackOrientation.Horizontal, Margin = new Thickness(10, 0, 10, 10) };
    detail.Children.Add(by);
    detail.Children.Add(author);

    content.Children.Add(main, 0, 0);
    content.Children.Add(detail, 0, 1);

    return content;
}

• Define the list view:

• C#

var listView = new RadListView
{
    ItemsSource = new ViewModel().Source,
    ItemTemplate = new DataTemplate(() =>
    {
        return new ListViewTemplateCell
        {
            View = GetCellContent()
        };
    }),
};

3. Finally, set the list view as the content of your page.