Getting Started

This example will guide you through the steps needed to add a basic RadListView control in your application.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

Example

If your app is setup, you are ready to add a RadListView control.

First, lets create a simple data and view model classes:

public class SourceItem
{
    public SourceItem(string name)
    {
        this.Name = name;
    }

    public string Name { get; set; }
}

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<SourceItem> { new SourceItem("Tom"), new SourceItem("Anna"), new SourceItem("Peter"), new SourceItem("Teodor"), new SourceItem("Lorenzo"), new SourceItem("Andrea"), new SourceItem("Martin") };
    }

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

Here is the setup of the list view:

<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding Source}">
    <telerikDataControls:RadListView.BindingContext>
        <local:ViewModel />
    </telerikDataControls:RadListView.BindingContext>
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>
                    <Grid>
                        <Label Margin="10" Text="{Binding Name}" />
                    </Grid>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
var listView = new RadListView
{
    ItemsSource = new ViewModel().Source,
    ItemTemplate = new DataTemplate(() =>
    {
        var label = new Label { Margin = new Thickness(10) };
        var content = new Grid();
        content.Children.Add(label);
        label.SetBinding(Label.TextProperty, new Binding(nameof(SourceItem.Name)));

        return new ListViewTemplateCell
        {
            View = content
        };
    })

};

You have to add the following namespaces:

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;

Finally set the list view as content of your page.

This is the result:

RadListView

SDK Browser and QSF applications contain different examples that show RadListView's main features. You can find the applications in the Examples and QSF folders of your local Telerik UI for Xamarin installation.

See Also