Different Cell Types in same ListView

[Ron]

In the Xamarin Forms ListView you can have different types of cells in the same ListView. Is it possible to do that with RadListView, and if so, how?

[Lance | Senior Manager Technical Support]

Hi Ron,

For this type of scenario we have the ListViewTemplateCell, in which you can setup the cell's View to your liking. If you need to dynamically set the content according to the bound item's values, you can use ValueConverters.

Alternatively, you can create a custom cell by extending the ListViewTemplateCell:

public class MyCustomCell : ListViewTemplateCell
{
    private Image icon;
    private Label titleLable;
    private Label authorLabel;

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        EnsureUiElements();

        var data = BindingContext as NewsItem;

        if (data == null) return;

        icon.IsVisible = true;

        titleLable.IsVisible = true;
        titleLable.Text = data.title;

        authorLabel.IsVisible = true;
        authorLabel.Text = data.author_name;
    }

    private void EnsureUiElements()
    {
        if (icon == null)
            icon = View.FindByName<Image>("icon");

        if (titleLable == null)
            titleLable = View.FindByName<Label>("title");

        if (authorLabel == null)
            authorLabel = View.FindByName<Label>("author");
    }
}

Then in the XAML, you use the custom cell as your RadListView ItemTemplate

<telerikDataControls:RadListView.ItemTemplate>
    <DataTemplate>
        <layouts:MyCustomCell>
           <layouts:MyCustomCell.View>
              <Grid Margin="6">
                  <!-- Design as you see fit -->
                  <StackLayout>
                     <Image x:Name="icon" />
                     <Label x:Name="title" />
                     <Label x:Name="author" />
                  </StackLayout>
               </Grid>
            </layouts:MyCustomCell.View>
        </layouts:MyCustomCell>
    </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

With both approaches you can hide or show individual elements according to what your bound model needs. Depending on what you want to do with your bound model, the custom cell may be an option that easier to determine what UIElements to show or hide (i.e. less Valueconverter code).

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Ron]

Hi Lance,

I understand that you can use a custom cell, which is great. However, my question is: can you have more than one custom cell type in a single RadListView? This is possible with the built in Xamarin Forms ListView through the use of a selector.

I especially want this because I would like to be able to setup different cell/row heights. I have a scenario where I must set the height of the overall RadListView to the exact height of the contents. The only way that can be achieved is by knowing the height for each row and multiplying that by the number of rows. I need to have cells with different heights, though. That's the reason I'm asking about this.

Thanks,

Ron

[Lance | Senior Manager Technical Support]

Hello Ron,

I do understand what you're trying to achieve, unfortunately the RadListView currently doesn't have a ItemTemplateSelector property.

To achieve your goal, you could try exposing a root Grid in your cell and set it's height dynamically. Keep track of the total height via a helper class or a singleton. Then, when you're done adding all the heights (and any padding, row spacing, etc), you can set the RadListView's height.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Ron]

Thanks Lance, that gave me what I needed. I appreciate it!

Ron