This is a migrated thread and some comments may be shown as answers.

Different Cell Types in same ListView

4 Answers 169 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 27 Apr 2017, 03:06 PM
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?

4 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 27 Apr 2017, 08:00 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ron
Top achievements
Rank 1
answered on 09 May 2017, 02:19 PM

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

0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 09 May 2017, 04:35 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ron
Top achievements
Rank 1
answered on 11 May 2017, 11:04 PM

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

Ron

Tags
ListView
Asked by
Ron
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Ron
Top achievements
Rank 1
Share this question
or