Using Expander as Listview ItemTemplate

[Sébastien]

Hello,

I want a listeView, and when I click on an item, layout expands smoothy to show details. 

So I decided to use RadExpander as ItemTemplate. But its not working very well. 

1. When I click on an item, it doesnt expand. I have to refresh the layout to see the expand (I refresh with scroll/unscroll). And then I can see it expand/reduce.

2.When I scroll/unscroll, its like if wrong data is displayed on cells. New text is superimposed with old text. 

 

Code below to reproduce (testing on android device).

I am open to any advice to achieve a smoothy expand on listview. 

Thanks.

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CurTestPage : ContentPage
    {
        public CurTestPage ()
        {
            InitializeComponent ();

            var list = new List<string>();

            for (int i = 0; i < 100; i++)
            {
                list.Add(i.ToString());
            }

            listView.ItemsSource = list;


        }

    }

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             xmlns:abstractions="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
             x:Class="Portwin.Tests.CurTestPage">

    <ListView x:Name="listView" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <telerikPrimitives:RadExpander x:Name="expander">
                        <telerikPrimitives:RadExpander.Header>
                            <telerikPrimitives:ExpanderHeader>
                                <Label Text="{Binding .}" />
                            </telerikPrimitives:ExpanderHeader>
                        </telerikPrimitives:RadExpander.Header>
                        <telerikPrimitives:RadExpander.Content>
                            <Label Text="{Binding .}" />
                        </telerikPrimitives:RadExpander.Content>
                    </telerikPrimitives:RadExpander>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

[Yana]

Hello Sébastien,

Actually this is a known issue with ListView and it could be observed with any control placed in the ItemTemplate if you try to increase its height dynamically - it just doesn't not expand to accommodate its content.

I would suggest a different approach - to use RadListView with grouping instead.  RadListView provides expandable groups and you could group by unique property, so that each item is in its own group. Additionally, you could modify the GroupHeaderTemplate in order to achieve similar look as the Expander header.

Please check the following resources for more details on grouping feature:
ListView Grouping
Expand and Collapse Groups

I hope this would be helpful.

Regards,
Yana
Progress Telerik